:root {
  --ink: #080706;
  --ink-soft: #11100f;
  --ivory: #f6f0e5;
  --ivory-soft: #d8d0c3;
  --muted: #a49b8e;
  --gold: #d8b36b;
  --gold-bright: #f0d49c;
  --warm: #9b6135;
  --line: rgba(246, 240, 229, 0.13);
  --ease-cinematic: cubic-bezier(0.22, 0.72, 0.22, 1);
  --safe-top: max(18px, env(safe-area-inset-top));
  --safe-right: max(18px, env(safe-area-inset-right));
  --safe-bottom: max(18px, env(safe-area-inset-bottom));
  --safe-left: max(18px, env(safe-area-inset-left));
  --font-display: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  width: 100%;
  min-height: 100%;
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--ivory);
  background:
    radial-gradient(circle at 50% -10%, rgba(104, 74, 38, 0.14), transparent 42%),
    linear-gradient(145deg, #070605 0%, #0d0c0b 54%, #060606 100%);
  font-family: var(--font-sans);
}

button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 5px; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ambient-canvas,
.film-grain,
.page-vignette,
.ambient-light {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.ambient-canvas { z-index: 0; width: 100%; height: 100%; opacity: 0.58; }

.ambient-light {
  z-index: 0;
  width: min(72vw, 760px);
  height: min(72vw, 760px);
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.07;
  transition: opacity 2.2s ease, background 2.2s ease, transform 8s ease;
}

.ambient-light--left { inset: 5% auto auto -32%; background: #b27c42; }
.ambient-light--right { inset: auto -36% -10% auto; background: #7c4a2c; }

.film-grain {
  z-index: 8;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.page-vignette {
  z-index: 7;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.36) 100%);
}

.experience {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  transition: background-color 2s ease;
}

.experience[data-tone="warm"] .ambient-light { opacity: 0.15; }
.experience[data-tone="warm"] .ambient-light--left { transform: translate3d(8vw, 4vh, 0) scale(1.1); }
.experience[data-tone="luminous"] .ambient-light { opacity: 0.24; }
.experience[data-tone="luminous"] .ambient-light--left { background: #d6a461; }
.experience[data-tone="luminous"] .ambient-light--right { background: #a55b36; }

.scene-marker {
  position: fixed;
  z-index: 6;
  top: var(--safe-top);
  left: var(--safe-left);
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.55;
}

.scene-marker__line { width: 24px; height: 1px; background: var(--gold); }
.scene-marker__label { color: var(--ivory-soft); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; }

.scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(var(--safe-top) + 42px) var(--safe-right) calc(var(--safe-bottom) + 58px) var(--safe-left);
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.9s ease, transform 0.9s var(--ease-cinematic), visibility 0s linear 0.9s;
}

.scene.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.intro-copy {
  width: min(88vw, 640px);
  text-align: center;
}

.intro-copy__eyebrow,
.message-eyebrow,
.final-copy__eyebrow {
  margin: 0 0 19px;
  color: var(--gold);
  font-size: clamp(0.62rem, 2.6vw, 0.72rem);
  font-weight: 650;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.intro-copy__rule {
  width: 1px;
  height: 34px;
  margin: 0 auto 24px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  transform-origin: top;
  animation: ruleGrow 1.2s var(--ease-cinematic) both;
}

.intro-copy__text {
  min-height: 2.4em;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 9.4vw, 4.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  transition: opacity 0.65s ease, transform 0.65s var(--ease-cinematic), filter 0.65s ease;
}

.intro-copy__text.is-changing { opacity: 0; transform: translateY(-9px); filter: blur(5px); }

.intro-copy__hint {
  min-height: 1.5em;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(0.86rem, 3.5vw, 1rem);
  letter-spacing: 0.02em;
  transition: opacity 0.6s ease;
}

.gift-copy { position: absolute; top: 15%; width: 100%; padding-inline: 24px; text-align: center; }
.gift-copy__name { margin: 0; color: var(--gold-bright); font-family: var(--font-display); font-size: clamp(2.4rem, 11vw, 5rem); font-style: italic; line-height: 1; }
.gift-copy__message { margin: 11px 0 0; color: var(--ivory-soft); font-size: clamp(0.95rem, 4vw, 1.15rem); letter-spacing: 0.02em; }

.gift-button {
  position: relative;
  display: grid;
  place-items: center;
  width: min(72vw, 360px);
  aspect-ratio: 1;
  margin-top: 8vh;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: inherit;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 78%;
  animation: giftArrival 1.45s var(--ease-cinematic) both;
}

.gift-button::before {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(216, 179, 107, 0.18);
  border-radius: 50%;
  animation: haloBreathe 3.6s ease-in-out infinite;
}

.gift-button__halo {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  background: rgba(216, 179, 107, 0.16);
  filter: blur(42px);
  opacity: 0.72;
  transition: opacity 0.6s ease, transform 0.8s ease;
}

.gift-button__shadow {
  position: absolute;
  z-index: -1;
  bottom: 18%;
  width: 52%;
  height: 7%;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.72);
  filter: blur(15px);
}

.gift-button__image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 28px 35px rgba(0, 0, 0, 0.46));
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.72s ease, transform 0.9s var(--ease-cinematic), filter 0.9s ease;
}

.gift-button__image--closed { opacity: 1; transform: scale(0.78); }
.gift-button__image--open { opacity: 0; transform: translateY(9%) scale(0.72); }
.gift-button:hover .gift-button__image--closed { transform: translateY(-3px) scale(0.8); }
.gift-button:hover .gift-button__halo { opacity: 1; transform: scale(1.12); }
.gift-button.is-shaking { animation: giftShake 0.54s ease-in-out 2; }
.gift-button.is-open .gift-button__image--closed { opacity: 0; transform: translateY(4%) scale(0.7); filter: blur(8px); }
.gift-button.is-open .gift-button__image--open { opacity: 1; transform: translateY(0) scale(0.82); filter: drop-shadow(0 0 42px rgba(226, 180, 89, 0.38)); }
.gift-button.is-open .gift-button__halo { opacity: 1; transform: scale(1.55); }

.gift-button__focus { position: absolute; inset: 17%; border-radius: 50%; }
.gift-button:focus-visible { outline: none; }
.gift-button:focus-visible .gift-button__focus { outline: 2px solid var(--gold-bright); outline-offset: 7px; }
.gift-button:disabled { cursor: default; }

.gift-instruction {
  position: absolute;
  bottom: max(8.5%, calc(var(--safe-bottom) + 34px));
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  animation: instructionPulse 2.2s ease-in-out infinite;
}

.gift-instruction__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px var(--gold); }

.message-backdrop,
.photo-backdrop {
  position: absolute;
  inset: -8%;
  z-index: -2;
  background: linear-gradient(rgba(7, 6, 5, 0.55), rgba(7, 6, 5, 0.83)), url("assets/foto-sol.jpg") center / cover no-repeat;
  filter: blur(35px) saturate(0.74);
  opacity: 0;
  transform: scale(1.12);
  transition: opacity 2.2s ease;
}

.message-backdrop.is-visible,
.scene--photo.is-active .photo-backdrop { opacity: 0.28; }

.message-wrap { width: min(90vw, 880px); text-align: center; }
.message-eyebrow { min-height: 1.2em; margin-bottom: 22px; }

.message-text {
  min-height: 3.1em;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8.2vw, 5.35rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(22px);
  filter: blur(7px);
}

.message-text.is-visible { animation: messageReveal 1s var(--ease-cinematic) forwards; }
.message-text.is-leaving { animation: messageLeave 0.72s ease forwards; }
.message-text.is-emphasis { color: var(--gold-bright); font-size: clamp(2.35rem, 10.5vw, 6.4rem); text-shadow: 0 0 46px rgba(216, 179, 107, 0.2); }
.message-text.is-soft { color: var(--ivory-soft); font-size: clamp(1.55rem, 6.9vw, 4.15rem); }
.message-text.is-final { color: #fff8eb; }

.message-aside {
  min-height: 1.5em;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: clamp(0.8rem, 3vw, 0.92rem);
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.message-aside.is-visible { opacity: 1; }

.scene--photo { overflow: hidden; }
.photo-backdrop { opacity: 0; }

.photo-figure {
  position: relative;
  width: min(92vw, 740px);
  margin: 0;
  text-align: center;
}

.photo-figure__glow {
  position: absolute;
  inset: 10% 7%;
  z-index: -1;
  border-radius: 44px;
  background: rgba(213, 167, 93, 0.26);
  filter: blur(48px);
}

.photo-figure__frame {
  position: relative;
  padding: clamp(5px, 1.4vw, 9px);
  overflow: hidden;
  border: 1px solid rgba(255, 241, 216, 0.18);
  border-radius: clamp(20px, 5vw, 32px);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 36px 100px rgba(0, 0, 0, 0.55);
}

.photo-figure__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), transparent 24%, transparent 78%, rgba(216, 179, 107, 0.08));
  pointer-events: none;
}

.photo-figure img {
  display: block;
  width: 100%;
  max-height: min(65dvh, 720px);
  object-fit: contain;
  border-radius: clamp(15px, 4vw, 25px);
  animation: photoBreathe 14s ease-in-out infinite alternate;
}

.photo-figure__caption { margin-top: 18px; color: var(--ivory-soft); font-family: var(--font-display); font-size: clamp(0.98rem, 3.8vw, 1.25rem); font-style: italic; }

.final-copy { width: min(92vw, 780px); text-align: center; }
.final-copy__eyebrow { margin-bottom: 24px; }

.final-copy__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.65rem, 12vw, 7.25rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.final-copy__title em { color: var(--gold-bright); font-weight: 400; }
.final-copy__title span { color: #a75549; font-family: var(--font-sans); font-size: 0.38em; vertical-align: 0.22em; }

.final-copy__signature { display: grid; gap: 4px; margin-top: clamp(30px, 6vh, 52px); color: var(--muted); font-size: 0.88rem; }
.final-copy__signature strong { color: var(--ivory); font-family: var(--font-display); font-size: 1.45rem; font-style: italic; font-weight: 400; }

.replay-button {
  min-height: 46px;
  margin-top: 32px;
  padding: 11px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ivory-soft);
  background: rgba(255, 255, 255, 0.045);
  cursor: pointer;
  opacity: 0;
  animation: replayReveal 1s ease forwards;
  backdrop-filter: blur(12px);
}

.replay-button:hover { color: var(--ivory); background: rgba(255, 255, 255, 0.08); transform: translateY(-2px); }

.audio-dock {
  position: fixed;
  z-index: 10;
  right: var(--safe-right);
  bottom: var(--safe-bottom);
  display: grid;
  grid-template-columns: 38px auto minmax(48px, 78px);
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 6px 11px 6px 6px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px;
  background: rgba(10, 9, 8, 0.64);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  animation: dockReveal 0.8s var(--ease-cinematic) both;
}

.audio-dock__button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(216, 179, 107, 0.22);
  border-radius: 50%;
  color: var(--gold-bright);
  background: rgba(216, 179, 107, 0.08);
  cursor: pointer;
}

.audio-dock__meta { display: grid; line-height: 1.05; }
.audio-dock__label { color: var(--muted); font-size: 0.5rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.audio-dock__status { color: var(--ivory-soft); font-size: 0.68rem; }
.audio-dock__volume { display: flex; align-items: center; }
.audio-dock__volume input { width: 100%; height: 24px; accent-color: var(--gold); cursor: pointer; }

.audio-notice {
  position: fixed;
  z-index: 11;
  right: var(--safe-right);
  bottom: calc(var(--safe-bottom) + 62px);
  max-width: min(78vw, 310px);
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ivory-soft);
  background: rgba(13, 12, 10, 0.82);
  font-size: 0.72rem;
  line-height: 1.35;
  backdrop-filter: blur(14px);
}

.noscript-message { width: min(92vw, 680px); margin: 7vh auto; padding: 22px; color: var(--ivory); text-align: center; }
.noscript-message img { display: block; width: 100%; border-radius: 22px; }
.noscript-message h1 { font-family: var(--font-display); font-weight: 400; }
.noscript-message p { color: var(--ivory-soft); line-height: 1.7; }
.js .noscript-message { display: none; }

@keyframes ruleGrow { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }
@keyframes giftArrival {
  0% { opacity: 0; transform: translateY(-58vh) rotate(-4deg) scale(0.82); }
  68% { opacity: 1; transform: translateY(12px) rotate(1.5deg) scale(1.02); }
  82% { transform: translateY(-5px) rotate(-0.5deg) scale(0.99); }
  100% { opacity: 1; transform: none; }
}
@keyframes giftShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  18% { transform: translateX(-4px) rotate(-1.4deg); }
  36% { transform: translateX(4px) rotate(1.5deg); }
  54% { transform: translateX(-3px) rotate(-1deg); }
  72% { transform: translateX(3px) rotate(1deg); }
}
@keyframes haloBreathe { 50% { opacity: 0.45; transform: scale(1.08); } }
@keyframes instructionPulse { 50% { opacity: 0.48; transform: translateY(2px); } }
@keyframes messageReveal { to { opacity: 1; transform: none; filter: none; } }
@keyframes messageLeave { to { opacity: 0; transform: translateY(-13px); filter: blur(6px); } }
@keyframes photoBreathe { from { transform: scale(1); } to { transform: scale(1.018); } }
@keyframes replayReveal { to { opacity: 1; } }
@keyframes dockReveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (min-width: 700px) {
  .gift-copy { top: 12%; }
  .gift-button { margin-top: 10vh; }
  .photo-figure img { max-height: min(70dvh, 720px); }
}

@media (max-height: 620px) and (orientation: landscape) {
  .gift-copy { top: 9%; }
  .gift-button { width: min(42vh, 300px); margin-top: 12vh; }
  .gift-instruction { bottom: calc(var(--safe-bottom) + 12px); }
  .photo-figure { width: min(72vw, 620px); }
  .photo-figure img { max-height: 62dvh; }
  .scene-marker { top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .film-grain { display: none; }
  .ambient-canvas { opacity: 0.25; }
}

.experience[data-test-mode="true"] .scene,
.experience[data-test-mode="true"] .message,
.experience[data-test-mode="true"] .photo-card,
.experience[data-test-mode="true"] .photo-backdrop,
.experience[data-test-mode="true"] .gift-button,
.experience[data-test-mode="true"] .gift-button__image,
.experience[data-test-mode="true"] .final-signature,
.experience[data-test-mode="true"] .replay-button {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

@media (prefers-contrast: more) {
  :root { --muted: #d7d0c5; --line: rgba(255, 255, 255, 0.3); }
  .page-vignette { opacity: 0.65; }
}