/*
 * 留声终剪：旧视频的整轨声音已经退出。
 * 这一幕只让一段干净旁白、雨窗与逐句字幕发生关系。
 */

.voice-keepsake {
  --voice-ink: #f4ede0;
  --voice-muted: rgb(231 224 211 / 0.7);
  --voice-cinnabar: #a85d54;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
  width: min(calc(100vw - 2rem), 82rem);
  min-height: clamp(33rem, 72svh, 49rem);
  margin: clamp(2.5rem, 8vw, 7rem) 0 clamp(2.5rem, 8vw, 7rem) 50%;
  padding: clamp(1.35rem, 4vw, 3.5rem);
  overflow: hidden;
  color: var(--voice-ink);
  border: 0;
  border-radius: 0;
  background: #07111a;
  box-shadow:
    0 3.5rem 9rem rgb(1 8 15 / 0.42),
    inset 0 0 0 1px rgb(255 255 255 / 0.018);
  translate: -50% 0;
}

.voice-keepsake::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  width: auto;
  opacity: 1;
  background:
    linear-gradient(90deg, rgb(2 8 15 / 0.94) 0%, rgb(3 10 17 / 0.76) 31%, rgb(4 11 18 / 0.2) 62%, rgb(3 9 15 / 0.05) 100%),
    linear-gradient(180deg, rgb(1 6 12 / 0.32), transparent 31%, rgb(1 6 11 / 0.82)),
    radial-gradient(circle at 73% 42%, transparent 0 20%, rgb(3 9 15 / 0.22) 62%, rgb(2 7 12 / 0.72) 100%);
  transform: none;
  pointer-events: none;
}

.voice-keepsake::after {
  z-index: 4;
  right: clamp(1rem, 3vw, 2.2rem);
  top: clamp(1rem, 3vw, 2rem);
  width: 2.75rem;
  color: rgb(231 193 160 / 0.72);
  border-color: rgb(210 137 124 / 0.44);
  background: rgb(73 24 24 / 0.12);
  box-shadow: inset 0 0 0 3px rgb(143 59 54 / 0.06);
  backdrop-filter: blur(4px);
}

.voice-keepsake__scene,
.voice-keepsake__scene img,
.voice-keepsake__film-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.voice-keepsake__scene {
  z-index: 0;
  overflow: hidden;
}

.voice-keepsake__scene img {
  object-fit: cover;
  object-position: 50% 50%;
  filter: brightness(0.7) saturate(0.72) contrast(1.12) sepia(0.045);
  transform: translate3d(-0.35%, 0, 0) scale(1.02);
  transform-origin: 64% 48%;
  animation: voice-keepsake-film-breathe 22s cubic-bezier(.42, 0, .24, 1) infinite alternate;
  animation-play-state: paused;
}

.voice-keepsake.is-visible .voice-keepsake__scene img {
  animation-play-state: running;
}

.voice-keepsake__film-veil {
  z-index: 1;
  opacity: 0.42;
  background:
    linear-gradient(90deg, rgb(108 50 43 / 0.08), transparent 14% 82%, rgb(202 151 101 / 0.055)),
    radial-gradient(ellipse 58% 76% at 66% 46%, transparent 44%, rgb(2 8 14 / 0.24) 100%),
    linear-gradient(180deg, rgb(229 208 174 / 0.025), transparent 72%, rgb(127 54 46 / 0.07));
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.voice-keepsake__copy {
  position: relative;
  z-index: 2;
  grid-column: 1 / 5;
  grid-row: 2 / 5;
  align-self: center;
  max-width: 25rem;
  min-width: 0;
}

.voice-keepsake .eyebrow {
  color: rgb(218 154 138 / 0.88);
  text-shadow: 0 0 1.8rem rgb(161 78 70 / 0.3);
}

.voice-keepsake__copy h3 {
  max-width: 7.8em;
  color: #f6efe3;
  font-size: clamp(2rem, 4.3vw, 3.9rem);
  font-weight: 360;
  line-height: 1.24;
  letter-spacing: 0.015em;
  text-shadow: 0 0.85rem 3rem rgb(0 0 0 / 0.5);
  white-space: pre-line;
}

.voice-keepsake__copy > p:last-child {
  max-width: 28rem;
  color: rgb(237 231 219 / 0.72);
  font-size: clamp(0.78rem, 1.15vw, 0.92rem);
  line-height: 1.9;
  text-shadow: 0 0.55rem 1.6rem rgb(0 0 0 / 0.72);
}

.voice-keepsake__toggle,
#voiceKeepsakeToggle {
  position: relative;
  z-index: 3;
  grid-column: 1 / 4;
  grid-row: 5 / 8;
  align-self: end;
  justify-self: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  width: 8.7rem;
  min-height: 8.7rem;
  padding: 0.82rem;
  color: #f3ecdf;
  border-color: rgb(226 214 192 / 0.22);
  border-radius: 999px;
  background:
    radial-gradient(circle at 38% 31%, rgb(255 255 255 / 0.13), transparent 32%),
    radial-gradient(circle, rgb(9 24 34 / 0.52), rgb(3 12 20 / 0.74));
  box-shadow:
    0 1.4rem 3.5rem rgb(0 0 0 / 0.3),
    0 0 3rem rgb(191 214 218 / 0.07),
    inset 0 0 0 1px rgb(255 255 255 / 0.04);
  text-align: center;
  backdrop-filter: blur(18px) saturate(1.08);
}

.voice-keepsake__toggle::after,
#voiceKeepsakeToggle::after {
  inset: -0.6rem;
  height: auto;
  border: 1px solid rgb(229 211 185 / 0.19);
  border-radius: 50%;
  background: none;
  opacity: 0.72;
  transform: scale(0.95);
  transition:
    opacity 500ms ease,
    transform 700ms cubic-bezier(.18, .75, .18, 1),
    border-color 500ms ease;
}

.voice-keepsake__toggle:hover,
#voiceKeepsakeToggle:hover {
  border-color: rgb(225 170 143 / 0.54);
  background:
    radial-gradient(circle at 38% 31%, rgb(255 255 255 / 0.17), transparent 32%),
    radial-gradient(circle, rgb(13 31 42 / 0.62), rgb(4 14 22 / 0.82));
  box-shadow:
    0 1.8rem 4.8rem rgb(0 0 0 / 0.34),
    0 0 3.8rem rgb(205 174 145 / 0.12);
  transform: translateY(-2px) scale(1.025);
}

.voice-keepsake__toggle:hover::after,
#voiceKeepsakeToggle:hover::after,
.voice-keepsake__toggle:focus-visible::after,
#voiceKeepsakeToggle:focus-visible::after {
  opacity: 1;
  border-color: rgb(230 190 159 / 0.42);
  transform: scale(1.06);
}

.voice-keepsake__disc {
  border-color: rgb(232 222 203 / 0.28);
  background:
    radial-gradient(circle at 43% 39%, rgb(255 248 227 / 0.88) 0 4%, transparent 5%),
    radial-gradient(circle, rgb(219 177 143 / 0.72) 0 10%, rgb(31 43 48 / 0.72) 11% 16%, transparent 17%),
    repeating-radial-gradient(circle, rgb(172 197 201 / 0.52) 0 1px, rgb(31 51 59 / 0.48) 1.5px 3px, rgb(5 17 25 / 0.8) 3.5px 5px);
  box-shadow:
    0 0 2.5rem rgb(210 225 224 / 0.16),
    inset 0 0 0 1px rgb(255 255 255 / 0.13);
}

.voice-keepsake__wave {
  background: rgb(8 18 26 / 0.88);
}

.voice-keepsake__wave i {
  background: #dc9b82;
}

#voiceKeepsakeAction,
.voice-keepsake__action {
  color: #f5eee1;
  padding: 0;
  font-size: 0.73rem;
  font-weight: 460;
  letter-spacing: 0.17em;
}

.voice-keepsake__timeline {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  color: transparent;
}

.voice-keepsake__track {
  background: rgb(235 228 214 / 0.18);
}

.voice-keepsake__status,
#voiceKeepsakeStatus {
  position: relative;
  z-index: 2;
  grid-column: 4 / 8;
  grid-row: 7;
  align-self: end;
  margin: 0 0 0.75rem;
  color: rgb(236 229 217 / 0.55);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-shadow: 0 0.4rem 1.2rem rgb(0 0 0 / 0.65);
}

/* 播放以后，留声从卡片变成一段可进入的雨夜。 */
.voice-world {
  --voice-pointer-x: 0.5;
  --voice-pointer-y: 0.5;
  --voice-pan-x: 0px;
  --voice-pan-y: 0px;
  --voice-touch-x: 50%;
  --voice-touch-y: 50%;
  z-index: 1200;
  background: #030a12;
}

body[data-world-mode="listen"] .voice-world {
  pointer-events: auto;
}

.voice-world__film,
.voice-world__film img,
.voice-world__film-depth,
.voice-world__rain-glass,
.voice-world__touch-light {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.voice-world__film {
  z-index: 0;
  overflow: hidden;
}

.voice-world__film img {
  object-fit: cover;
  object-position: 50% 50%;
  filter:
    brightness(calc(0.56 + var(--voice-progress) * 0.08))
    saturate(calc(0.62 + var(--voice-energy) * 0.18))
    contrast(1.13)
    sepia(0.04);
  transform:
    translate3d(var(--voice-pan-x), var(--voice-pan-y), 0)
    scale(calc(1.055 + var(--voice-progress) * 0.025 + var(--voice-energy) * 0.018));
  transform-origin: 63% 44%;
  transition: filter 220ms linear, transform 260ms cubic-bezier(.2, .7, .2, 1);
}

.voice-world::before,
.voice-world::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
}

.voice-world::before {
  background:
    linear-gradient(90deg, rgb(2 7 13 / 0.86) 0%, rgb(3 9 15 / 0.66) 31%, transparent 65%),
    linear-gradient(180deg, rgb(2 7 13 / 0.35), transparent 31%, rgb(2 7 13 / 0.7));
}

.voice-world::after {
  opacity: 0.38;
  background:
    linear-gradient(90deg, rgb(0 0 0 / 0.42), transparent 11% 89%, rgb(0 0 0 / 0.42)),
    linear-gradient(180deg, rgb(0 0 0 / 0.38), transparent 12% 85%, rgb(0 0 0 / 0.62));
  box-shadow: inset 0 0 9rem rgb(0 0 0 / 0.45);
}

.voice-world__film-depth {
  z-index: 1;
  pointer-events: none;
}

.voice-world__film-depth--far {
  opacity: calc(0.22 + var(--voice-energy) * 0.22);
  background:
    radial-gradient(circle at 79% 25%, rgb(219 231 233 / 0.2), transparent 18%),
    radial-gradient(ellipse at 72% 83%, rgb(170 203 212 / 0.12), transparent 32%);
  mix-blend-mode: screen;
}

.voice-world__film-depth--near {
  opacity: 0.24;
  background:
    radial-gradient(ellipse at 18% 84%, rgb(8 28 39 / 0.88), transparent 45%),
    linear-gradient(104deg, transparent 57%, rgb(231 239 238 / 0.08) 65%, transparent 73%);
  transform: translate3d(var(--voice-near-x, 0px), var(--voice-near-y, 0px), 0);
}

.voice-world__rain-glass {
  z-index: 3;
  opacity: calc(0.08 + var(--voice-energy) * 0.09);
  background:
    repeating-linear-gradient(101deg, transparent 0 34px, rgb(224 236 237 / 0.18) 35px, transparent 37px 66px);
  background-size: 150% 160%;
  mask-image: linear-gradient(90deg, transparent 6%, #000 40%, #000 93%, transparent);
  animation: voice-rain-glass 11s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
}

body[data-world-mode="listen"] .voice-world__rain-glass {
  animation-play-state: running;
}

.voice-world__touch-light {
  z-index: 4;
  left: var(--voice-touch-x);
  top: var(--voice-touch-y);
  width: min(38vw, 32rem);
  height: min(38vw, 32rem);
  opacity: calc(0.08 + var(--voice-energy) * 0.13);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(237 226 204 / 0.22), rgb(153 189 200 / 0.07) 37%, transparent 70%);
  filter: blur(8px);
  transform: translate(-50%, -50%);
  transition: left 300ms ease-out, top 300ms ease-out, opacity 200ms linear;
  pointer-events: none;
}

.voice-world :is(.voice-world__sky, .voice-world__route, .voice-world__places) {
  display: none;
}

.voice-world__copy {
  position: absolute;
  z-index: 7;
  left: clamp(2rem, 7vw, 7rem);
  top: 50%;
  width: min(34vw, 31rem);
  color: #f3ecdf;
  transform: translateY(-50%);
}

.voice-world__kicker,
.voice-world__listening-note,
.voice-world__transcript {
  margin: 0;
}

.voice-world__kicker {
  margin-bottom: clamp(1.2rem, 3vh, 2.4rem);
  color: rgb(222 162 141 / 0.82);
  font: 500 0.68rem/1.5 system-ui, sans-serif;
  letter-spacing: 0.3em;
}

.voice-world__transcript {
  min-height: 4.4em;
  max-width: 15em;
  color: rgb(247 241 230 / 0.96);
  font: 360 clamp(1.75rem, 3.7vw, 3.6rem)/1.42 "Noto Serif SC", "Songti SC", serif;
  letter-spacing: 0.025em;
  text-wrap: balance;
  text-shadow:
    0 0.8rem 3rem rgb(0 0 0 / 0.72),
    0 0 1px rgb(255 255 255 / 0.18);
}

.voice-world__transcript.is-entering {
  animation: voice-line-enter 420ms cubic-bezier(.2, .7, .18, 1) both;
}

.voice-world__waveform {
  display: flex;
  gap: 3px;
  align-items: center;
  width: min(100%, 24rem);
  height: 2.5rem;
  margin-top: clamp(1.4rem, 4vh, 2.8rem);
  opacity: 0.66;
}

.voice-world__waveform i {
  flex: 1 1 0;
  min-width: 1px;
  height: calc(4px + var(--bar) * 1px);
  border-radius: 99px;
  background: linear-gradient(180deg, rgb(231 183 155 / 0.92), rgb(201 216 215 / 0.32));
  box-shadow: 0 0 0.65rem rgb(216 166 142 / 0.08);
  transform: scaleY(calc(0.22 + var(--voice-energy) * 1.45));
  transition: transform 150ms linear, opacity 150ms linear;
}

.voice-world__waveform i:nth-child(3n) {
  opacity: 0.62;
}

.voice-world__listening-note {
  margin-top: 0.7rem;
  color: rgb(231 225 214 / 0.52);
  font: 400 0.65rem/1.6 system-ui, sans-serif;
  letter-spacing: 0.16em;
}

.voice-world__caption {
  z-index: 7;
  left: clamp(2rem, 7vw, 7rem);
  bottom: max(1.55rem, env(safe-area-inset-bottom));
  gap: 0.9rem;
  color: rgb(231 225 214 / 0.55);
  transform: none;
}

.voice-world__caption span {
  color: rgb(222 160 136 / 0.84);
}

.voice-world__progress {
  position: absolute;
  z-index: 8;
  right: clamp(1.4rem, 4vw, 4rem);
  bottom: max(1.7rem, env(safe-area-inset-bottom));
  width: min(31vw, 25rem);
  height: 1px;
  overflow: hidden;
  background: rgb(233 227 216 / 0.18);
}

.voice-world__progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #d68d76, #e6d4b8);
  box-shadow: 0 0 0.8rem rgb(218 142 118 / 0.4);
  transform: scaleX(var(--voice-progress));
  transform-origin: 0 50%;
  transition: transform 220ms linear;
}

.voice-world__control {
  z-index: 10;
  top: max(1.25rem, env(safe-area-inset-top));
  left: auto;
  right: clamp(1.4rem, 4vw, 4rem);
  grid-template-columns: auto auto auto auto auto;
  min-height: 2.8rem;
  padding-inline: 0.9rem;
  border: 1px solid rgb(231 224 209 / 0.18);
  border-radius: 999px;
  background: rgb(3 11 18 / 0.36);
  transform: none;
  backdrop-filter: blur(13px);
}

.voice-world__control b {
  color: rgb(235 228 216 / 0.28);
  font-weight: 400;
}

.voice-world__duration {
  color: rgb(235 228 216 / 0.42) !important;
}

.voice-world__touch-ripple {
  position: fixed;
  z-index: 9;
  width: 1rem;
  aspect-ratio: 1;
  border: 1px solid rgb(235 221 194 / 0.52);
  border-radius: 50%;
  box-shadow:
    0 0 2.5rem rgb(223 180 151 / 0.18),
    inset 0 0 1rem rgb(206 226 228 / 0.08);
  transform: translate(-50%, -50%) scale(0.18);
  pointer-events: none;
  animation: voice-touch-ripple 1.6s cubic-bezier(.16, .72, .18, 1) forwards;
}

@keyframes voice-keepsake-film-breathe {
  from { transform: translate3d(-0.35%, 0, 0) scale(1.02); }
  to { transform: translate3d(0.35%, -0.35%, 0) scale(1.035); }
}

@keyframes voice-rain-glass {
  from { background-position: 0 -20%; }
  to { background-position: 32% 120%; }
}

@keyframes voice-line-enter {
  from { opacity: 0; filter: blur(3px); transform: translateY(0.35rem); }
  to { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes voice-touch-ripple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18); }
  18% { opacity: 0.72; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8); }
}

@media (max-width: 720px) {
  .voice-keepsake {
    width: 100vw;
    min-height: clamp(32rem, 78svh, 42rem);
    margin: 2.4rem 0 3.8rem 50%;
    padding: max(1.25rem, env(safe-area-inset-left));
    translate: -50% 0;
  }

  .voice-keepsake::before {
    background:
      linear-gradient(180deg, rgb(2 8 15 / 0.88), rgb(2 8 15 / 0.64) 31%, transparent 48%, rgb(2 7 13 / 0.9)),
      linear-gradient(90deg, rgb(2 8 15 / 0.62), transparent 68%);
  }

  .voice-keepsake__scene img {
    object-position: 50% 50%;
    filter: brightness(0.67) saturate(0.69) contrast(1.1) sepia(0.035);
    transform-origin: 50% 64%;
  }

  .voice-keepsake__copy {
    grid-column: 1 / 10;
    grid-row: 1 / 4;
    align-self: start;
    max-width: 19rem;
    padding-top: 1.1rem;
  }

  .voice-keepsake__copy h3 {
    max-width: 8.5em;
    padding-right: 0;
    font-size: clamp(1.85rem, 9vw, 2.65rem);
  }

  .voice-keepsake__copy > p:last-child {
    max-width: 18rem;
    font-size: 0.76rem;
  }

  .voice-keepsake__toggle,
  #voiceKeepsakeToggle {
    grid-column: 1 / 6;
    grid-row: 6 / 8;
    align-self: end;
    justify-self: start;
    width: 8rem;
    min-height: 8rem;
  }

  .voice-keepsake__status,
  #voiceKeepsakeStatus {
    grid-column: 6 / 13;
    grid-row: 7 / 9;
    align-self: end;
    margin: 0 0 0.6rem 0.4rem;
    font-size: 0.6rem;
    line-height: 1.65;
  }

  .voice-world__film img {
    object-position: 50% 50%;
    transform:
      translate3d(var(--voice-pan-x), var(--voice-pan-y), 0)
      scale(calc(1.055 + var(--voice-progress) * 0.022 + var(--voice-energy) * 0.012));
    transform-origin: 60% 43%;
  }

  .voice-world::before {
    background:
      linear-gradient(180deg, rgb(2 7 13 / 0.84), rgb(2 7 13 / 0.58) 32%, transparent 51%, rgb(2 7 13 / 0.88)),
      linear-gradient(90deg, rgb(2 7 13 / 0.58), transparent 72%);
  }

  .voice-world__copy {
    left: 1.25rem;
    top: 14svh;
    width: min(calc(100% - 2.5rem), 20rem);
    transform: none;
  }

  .voice-world__kicker {
    margin-bottom: 1rem;
    font-size: 0.59rem;
  }

  .voice-world__transcript {
    min-height: 6.2em;
    max-width: 12.5em;
    font-size: clamp(1.3rem, 6.5vw, 1.85rem);
    line-height: 1.55;
  }

  .voice-world__waveform {
    width: min(78vw, 19rem);
    height: 2rem;
    margin-top: 1.2rem;
    gap: 2px;
  }

  .voice-world__listening-note {
    font-size: 0.57rem;
  }

  .voice-world__caption {
    left: 1.2rem;
    bottom: max(1.2rem, env(safe-area-inset-bottom));
    max-width: calc(100% - 2.4rem);
    font-size: 0.54rem;
    white-space: normal;
  }

  .voice-world__progress {
    right: 1.2rem;
    bottom: max(3.45rem, calc(env(safe-area-inset-bottom) + 2.25rem));
    width: calc(100% - 2.4rem);
  }

  .voice-world__control {
    top: max(0.8rem, env(safe-area-inset-top));
    right: 0.8rem;
    max-width: calc(100% - 1.6rem);
    min-height: 2.55rem;
    padding-inline: 0.72rem;
  }

  .voice-world__touch-light {
    width: 76vw;
    height: 76vw;
  }
}

@media (max-width: 380px), (max-height: 620px) and (orientation: portrait) {
  .voice-keepsake {
    height: min(96svh, 36rem);
    min-height: 0;
    margin-top: 1.25rem;
    margin-bottom: 2.6rem;
  }

  .voice-keepsake__copy {
    padding-top: 0.5rem;
  }

  .voice-keepsake__copy h3 {
    margin-block: 0.65rem;
  }

  .voice-keepsake__copy > p:last-child {
    line-height: 1.72;
  }

  .voice-world__copy {
    top: 14svh;
  }

  .voice-world__transcript {
    min-height: 5.8em;
    font-size: clamp(1.16rem, 5.8vw, 1.48rem);
  }

  .voice-world__waveform {
    margin-top: 0.75rem;
  }

  .voice-world__listening-note {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-keepsake__scene img,
  .voice-world__film img,
  .voice-world__rain-glass,
  .voice-world__transcript,
  .voice-world__touch-ripple {
    animation: none !important;
    transition: none !important;
  }

  .voice-world__rain-glass,
  .voice-world__touch-light {
    display: none;
  }

  .voice-world__waveform i {
    transform: scaleY(0.5);
  }
}

body.is-data-saver .voice-world__rain-glass,
body.is-data-saver .voice-world__film-depth,
body.is-data-saver .voice-world__touch-light {
  display: none;
}

@media (forced-colors: active) {
  .voice-keepsake__scene,
  .voice-keepsake__film-veil,
  .voice-world__film,
  .voice-world__film-depth,
  .voice-world__rain-glass,
  .voice-world__touch-light {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   苍山底片 · keep the real photograph legible without turning it into a poster
   -------------------------------------------------------------------------- */

@media (min-width: 721px) {
  .voice-keepsake {
    height: clamp(33rem, 72svh, 49rem);
    min-height: 0;
  }

  .voice-keepsake__scene img,
  .voice-world__film img {
    right: 0;
    left: 0;
    width: 100%;
  }

  .voice-keepsake::before {
    background:
      linear-gradient(90deg, rgb(2 8 15 / 0.97) 0%, rgb(3 10 17 / 0.88) 29%, rgb(3 10 17 / 0.58) 41%, rgb(3 10 17 / 0.12) 56%, transparent 72%),
      linear-gradient(180deg, rgb(1 6 12 / 0.26), transparent 34%, rgb(1 6 11 / 0.84)),
      radial-gradient(ellipse at 76% 45%, transparent 0 30%, rgb(2 7 12 / 0.36) 76%, rgb(2 7 12 / 0.68) 100%);
  }

  .voice-world::before {
    background:
      linear-gradient(90deg, rgb(2 7 13 / 0.96) 0%, rgb(3 9 15 / 0.84) 25%, rgb(3 9 15 / 0.48) 36%, transparent 52%),
      linear-gradient(180deg, rgb(2 7 13 / 0.32), transparent 34%, rgb(2 7 13 / 0.72));
  }
}

@media (max-width: 720px) {
  .voice-keepsake__toggle,
  #voiceKeepsakeToggle {
    grid-column: 1 / 6;
    grid-row: 4 / 6;
    align-self: center;
    width: 7.2rem;
    min-height: 7.2rem;
  }

  .voice-keepsake__status,
  #voiceKeepsakeStatus {
    grid-column: 7 / 13;
    grid-row: 5 / 7;
    align-self: center;
  }
}

.voice-keepsake.reveal {
  transition-duration: 420ms;
}

.voice-keepsake.reveal:not(.is-visible) .voice-keepsake__copy h3 {
  filter: blur(3px);
  letter-spacing: 0.035em;
  transform: translate3d(0, 0.4rem, 0);
}

.voice-keepsake.reveal.is-visible .voice-keepsake__copy h3 {
  filter: none;
  letter-spacing: 0.015em;
  transform: none;
  transition:
    filter 420ms ease,
    letter-spacing 420ms ease,
    transform 420ms cubic-bezier(.2, .72, .22, 1);
}