/* =========================================================================
   VARIABLES Y BASE
   ========================================================================= */
:root{
  /* paleta cálida y romántica */
  --cream:        #f8efe3;
  --cream-2:      #f1e4d3;
  --beige:        #e9dac4;
  --peach:        #eabf9e;
  --terracotta:   #c07b56;
  --terracotta-d: #a4623f;
  --dusty-rose:   #c98f8a;
  --bordeaux:     #6d2c34;
  --bordeaux-d:   #4a1e24;
  --brown:        #4a3626;
  --brown-soft:   #7a6153;
  --gold:         #cdA25a;
  --gold-soft:    rgba(205,162,90,0.5);
  --dark:         #241713;
  --dark-2:       #1a1210;

  --serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --serif-italic: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);

  color-scheme: light;
}

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

html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

html.lock, html.lock body{
  overflow: hidden;
  height: 100%;
}

body{
  margin: 0;
  font-family: var(--sans);
  background: var(--cream);
  color: var(--brown);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }

button{ font-family: inherit; cursor: pointer; }

::selection{ background: var(--dusty-rose); color: #fff; }

.serif-title{
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* asegura que el texto narrativo siempre haga wrap dentro de su
   contenedor, incluso si una fuente tarda en cargar y sus métricas
   de fallback son distintas */
.hero-line,
.intro-line,
.emotional-line,
.proposal-line,
.proposal-question,
.caption,
.celebration-message{
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.eyebrow{
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: var(--terracotta-d);
  margin: 0 0 0.9rem;
}

/* subtle warm paper texture used across light sections */
.texture{
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.35), transparent 40%),
    radial-gradient(circle at 80% 60%, rgba(190,140,100,0.08), transparent 45%);
}

/* =========================================================================
   LOADER
   ========================================================================= */
.loader{
  position: fixed; inset: 0; z-index: 9999;
  background: var(--dark);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
.loader.hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.loader-mark{
  width: 34px; height: 34px;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: loader-breathe 1.8s ease-in-out infinite;
}
.loader-mark span{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
}
@keyframes loader-breathe{
  0%,100%{ transform: scale(0.9); opacity: 0.6; }
  50%{ transform: scale(1.15); opacity: 1; }
}

/* =========================================================================
   MUSIC CONTROL
   ========================================================================= */
.music-toggle{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(36,23,19,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--cream);
  transition: background 0.3s var(--ease-soft), transform 0.3s var(--ease-soft), border-color .3s;
}
.music-toggle:hover{ background: rgba(36,23,19,0.75); }
.music-toggle:active{ transform: scale(0.95); }
.music-icon{ display: flex; width: 16px; height: 16px; }
.icon-pause{ display: none; }
.music-toggle.playing .icon-play{ display: none; }
.music-toggle.playing .icon-pause{ display: block; }

.music-bars{ display: flex; align-items: flex-end; gap: 2px; height: 12px; opacity: 0.55; }
.music-bars i{
  width: 2px; background: var(--gold); border-radius: 1px;
  height: 4px;
}
.music-toggle.playing .music-bars i{ animation: bar-bounce 0.9s ease-in-out infinite; }
.music-toggle.playing .music-bars i:nth-child(2){ animation-delay: 0.15s; }
.music-toggle.playing .music-bars i:nth-child(3){ animation-delay: 0.3s; }
@keyframes bar-bounce{
  0%,100%{ height: 4px; }
  50%{ height: 12px; }
}

/* pulso que resalta el botón de música mientras se espera el toque */
.music-toggle.attention{
  animation: toggle-attention 1.5s ease-in-out infinite;
}
@keyframes toggle-attention{
  0%,100%{ box-shadow: 0 0 0 0 rgba(205,162,90,0.55); }
  50%{ box-shadow: 0 0 0 14px rgba(205,162,90,0); }
}

/* =========================================================================
   INVITACIÓN A ACTIVAR LA MÚSICA
   ========================================================================= */
.music-prompt{
  position: fixed;
  inset: 0;
  z-index: 490;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 14vh;
  background: rgba(20,12,10,0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.music-prompt.show{ opacity: 1; visibility: visible; }

.music-prompt-content{
  max-width: 420px;
  width: 100%;
  padding: 0 28px;
  text-align: center;
  transform: translateY(10px);
  opacity: 0;
  transition: opacity 0.7s var(--ease) 0.15s, transform 0.7s var(--ease) 0.15s;
}
.music-prompt.show .music-prompt-content{ opacity: 1; transform: translateY(0); }

.music-prompt-text{
  font-family: var(--serif-italic);
  font-style: italic;
  color: var(--cream);
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  line-height: 1.6;
  margin: 0 0 20px;
  overflow-wrap: break-word;
}

/* flecha curva que señala el botón de música en la esquina.
   La posición (left/top) la calcula app.js en base a la posición real
   del botón de música, para que apunte bien en cualquier pantalla. */
.music-prompt-arrow{
  position: fixed;
  left: 0;
  top: 0;
  width: 84px;
  height: 84px;
  color: var(--gold);
  z-index: 491;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s var(--ease) 0.3s;
}
.music-prompt-arrow.show{
  opacity: 0.9;
  animation: arrow-bounce 1.8s ease-in-out infinite;
}
.music-prompt-arrow .arrow-line{
  animation: arrow-dash 1.1s linear infinite;
}
@keyframes arrow-dash{
  to{ stroke-dashoffset: -30; }
}
@keyframes arrow-bounce{
  0%,100%{ transform: translate(0,0); }
  50%{ transform: translate(3px,5px); }
}

@media (prefers-reduced-motion: reduce){
  .music-toggle.attention{ animation: none; }
  .music-prompt-arrow.show{ animation: none; }
  .music-prompt-arrow .arrow-line{ animation: none; }
}

/* =========================================================================
   REVEAL UTILITIES (usadas por app.js)
   ========================================================================= */
[data-reveal]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].in{
  opacity: 1;
  transform: translateY(0);
}
[data-sequence]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
[data-sequence].in{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
   1. HERO
   ========================================================================= */
.hero{
  position: relative;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dark);
}
.hero-bg{
  position: absolute; inset: -5%;
  background-size: cover;
  background-position: center;
  filter: blur(6px) brightness(0.55) saturate(1.05);
  transform: scale(1.08);
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(192,123,86,0.35), transparent 55%),
    radial-gradient(ellipse at 75% 75%, rgba(109,44,52,0.55), transparent 55%),
    linear-gradient(160deg, #2c1a15, #1a1210 70%);
  animation: hero-drift 22s ease-in-out infinite alternate;
}
@keyframes hero-drift{
  from{ transform: scale(1.08) translate(0,0); }
  to{ transform: scale(1.14) translate(-1.5%, -1%); }
}
.hero-vignette{
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(15,9,7,0.75) 100%);
}
.hero-grain{
  position: absolute; inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-content{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  padding: 0 28px;
  text-align: center;
  color: var(--cream);
}
.hero-line{
  font-family: var(--serif-italic);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 4.4vw, 2.1rem);
  line-height: 1.5;
  margin: 0 0 0.6em;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.hero-line-2{ color: var(--peach); }

.hero-btn{
  margin-top: 2.2rem;
}

.btn{
  position: relative;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 15px 32px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s;
}
.btn:active{ transform: scale(0.96); }

.btn-ghost{
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(248,239,227,0.55);
  box-shadow: 0 0 0 0 rgba(205,162,90,0);
  animation: btn-pulse 2.6s ease-in-out infinite;
}
.btn-ghost:hover{
  background: rgba(248,239,227,0.08);
  border-color: var(--gold);
}
@keyframes btn-pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(205,162,90,0.25); }
  50%{ box-shadow: 0 0 0 9px rgba(205,162,90,0); }
}
.btn-heart{ font-size: 0.9em; transform: translateY(-1px); }

.scroll-hint{
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(248,239,227,0.6), transparent);
  opacity: 0.7;
}
.scroll-hint span{
  position: absolute; top: 0; left: -2px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold);
  animation: hint-drop 2.2s ease-in-out infinite;
}
@keyframes hint-drop{
  0%{ top: 0; opacity: 0; }
  20%{ opacity: 1; }
  90%{ opacity: 0; }
  100%{ top: 42px; opacity: 0; }
}

/* =========================================================================
   2. INTRO
   ========================================================================= */
.intro{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--dark) 0%, #2a1a14 55%, var(--cream-2) 100%);
  padding: 10vh 24px;
  overflow: hidden;
}
.intro-content{
  width: 100%;
  max-width: 620px;
  text-align: center;
}
.intro-line{
  font-family: var(--serif-italic);
  font-style: italic;
  color: var(--cream);
  font-size: clamp(1.2rem, 3.6vw, 1.7rem);
  line-height: 1.6;
  margin: 0 0 1.1em;
}
.intro-line:last-child{ color: var(--peach); }

.sparkles{ position: absolute; inset: 0; pointer-events: none; }
.sparkles span{
  position: absolute;
  width: 3px; height: 3px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  animation: sparkle-twinkle 4s ease-in-out infinite;
}
@keyframes sparkle-twinkle{
  0%,100%{ opacity: 0; transform: scale(0.5); }
  50%{ opacity: 0.85; transform: scale(1.3); }
}

/* =========================================================================
   3. ÁLBUM
   ========================================================================= */
.album{
  position: relative;
  background: var(--cream-2);
  padding: 12vh 0 8vh;
}
.album-intro-header{
  text-align: center;
  max-width: 640px;
  margin: 0 auto 10vh;
  padding: 0 24px;
}
.album-intro-header .serif-title{
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--bordeaux);
  margin: 0;
}

.album-track{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 14vh;
}

/* ---- timeline node ---- */
.timeline-node{
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  max-width: 420px;
  margin: 0 auto;
  padding: 6px 0;
}
.timeline-node .dot{
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--beige);
  border: 1px solid var(--terracotta);
  flex-shrink: 0;
  position: relative;
  transition: background 0.5s var(--ease), transform 0.5s var(--ease), box-shadow .5s;
}
.timeline-node .line-before,
.timeline-node .line-after{
  position: absolute;
  left: 5px;
  width: 1px;
  background: linear-gradient(var(--terracotta), transparent);
  opacity: 0.5;
}
.timeline-node .line-before{ bottom: 100%; height: 7vh; }
.timeline-node .line-after{ top: 100%; height: 7vh; }
.timeline-node .label{
  font-family: var(--serif);
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brown-soft);
  opacity: 0.55;
  transition: opacity 0.6s var(--ease), color .6s, transform .6s var(--ease);
  transform: translateX(-6px);
}
.timeline-node.in .dot{
  background: var(--gold);
  box-shadow: 0 0 0 6px rgba(205,162,90,0.18);
  transform: scale(1.15);
}
.timeline-node.in .label{
  opacity: 1;
  color: var(--bordeaux);
  transform: translateX(0);
}

/* ---- memory chapters ---- */
.chapter{
  position: relative;
}
.chapter-inner{
  display: grid;
  gap: 26px;
}
.chapter[data-align="left"] .chapter-inner{ justify-items: start; }
.chapter[data-align="right"] .chapter-inner{ justify-items: end; }
.chapter[data-align="center"] .chapter-inner{ justify-items: center; }

.caption-wrap{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}
.chapter[data-align="left"] .caption-wrap{ align-items: flex-start; }
.chapter[data-align="right"] .caption-wrap{ align-items: flex-end; }
.chapter[data-align="center"] .caption-wrap{ align-items: center; }

.caption{
  font-family: var(--serif-italic);
  font-style: italic;
  color: var(--brown-soft);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  max-width: 380px;
  line-height: 1.55;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s var(--ease) 0.15s, transform 0.9s var(--ease) 0.15s;
}
.chapter.in .caption{ opacity: 1; transform: translateY(0); }
.chapter[data-align="right"] .caption{ text-align: right; }
.chapter[data-align="center"] .caption{ text-align: center; }

.note{
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--terracotta-d);
  transform: rotate(-3deg);
  display: inline-block;
  position: relative;
  opacity: 0.85;
}
.note::before{ content: "— "; }

/* photo frame base */
.frame{
  position: relative;
  overflow: hidden;
  background: var(--beige);
  box-shadow: 0 18px 40px -18px rgba(74,54,38,0.35), 0 2px 8px rgba(74,54,38,0.08);
  opacity: 0;
  transform: translateY(36px) scale(0.96);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.chapter.in .frame{ opacity: 1; transform: translateY(0) scale(1); }

.frame-inner{
  width: 100%;
  height: 100%;
}

.frame .photo-el,
.frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.05);
  animation: kenburns 14s ease-in-out infinite alternate;
}
@keyframes kenburns{
  from{ transform: scale(1.05); }
  to{ transform: scale(1.16); }
}

/* placeholder (cuando la foto real todavía no fue cargada) */
.photo-placeholder{
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 14px;
  background:
    linear-gradient(150deg, var(--peach), var(--dusty-rose) 55%, var(--terracotta-d));
  color: rgba(255,255,255,0.92);
}
.photo-placeholder svg{ width: 26px; height: 26px; opacity: 0.85; }
.photo-placeholder small{
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  opacity: 0.85;
  word-break: break-all;
}

/* -- layout: polaroid -- */
.chapter[data-layout="polaroid"] .frame{
  width: min(320px, 74vw);
  aspect-ratio: 4/5;
  padding: 14px 14px 46px;
  background: #fffdf9;
  border-radius: 2px;
  rotate: -3deg;
}
.chapter[data-layout="polaroid"][data-align="right"] .frame{ rotate: 3deg; }
.chapter[data-layout="polaroid"] .frame .photo-el,
.chapter[data-layout="polaroid"] .frame img{ height: calc(100% - 0px); }
.chapter[data-layout="polaroid"] .frame-inner{ width: 100%; height: 100%; overflow: hidden; }

/* -- layout: large -- */
.chapter[data-layout="large"] .frame{
  width: min(560px, 92vw);
  aspect-ratio: 5/6;
  border-radius: 6px;
}

/* -- layout: pair (overlapping) -- */
.chapter[data-layout="pair"] .chapter-inner{ position: relative; min-height: 380px; width: 100%; }
.chapter[data-layout="pair"] .pair-wrap{
  position: relative;
  width: min(520px, 90vw);
  height: 360px;
}
.chapter[data-layout="pair"] .frame:nth-child(1){
  position: absolute; left: 0; top: 10px;
  width: 62%; height: 82%;
  rotate: -4deg;
  z-index: 1;
  border-radius: 4px;
}
.chapter[data-layout="pair"] .frame:nth-child(2){
  position: absolute; right: 0; bottom: 0;
  width: 52%; height: 68%;
  rotate: 5deg;
  z-index: 2;
  border-radius: 4px;
  border: 6px solid var(--cream-2);
  transition-delay: 0.18s;
}
.chapter[data-layout="pair"][data-align="right"] .frame:nth-child(1){ left: auto; right: 0; rotate: 4deg; }
.chapter[data-layout="pair"][data-align="right"] .frame:nth-child(2){ right: auto; left: 0; rotate: -5deg; }

/* -- layout: cluster (group of 3) -- */
.chapter[data-layout="cluster"] .chapter-inner{ min-height: 300px; }
.chapter[data-layout="cluster"] .cluster-wrap{
  position: relative;
  width: min(480px, 92vw);
  height: 260px;
}
.chapter[data-layout="cluster"] .frame{
  position: absolute;
  width: 44%;
  aspect-ratio: 1/1;
  border-radius: 4px;
  border: 5px solid var(--cream-2);
}
.chapter[data-layout="cluster"] .frame:nth-child(1){ left: 0; top: 0; rotate: -6deg; z-index: 3; }
.chapter[data-layout="cluster"] .frame:nth-child(2){ left: 26%; top: 34%; rotate: 4deg; z-index: 2; transition-delay: .12s; }
.chapter[data-layout="cluster"] .frame:nth-child(3){ left: 52%; top: 4%; rotate: 8deg; z-index: 1; transition-delay: .24s; }

/* -- layout: fullbleed -- */
.chapter[data-layout="fullbleed"]{ margin: 0 -24px; }
.chapter[data-layout="fullbleed"] .chapter-inner{ display: block; }
.chapter[data-layout="fullbleed"] .frame{
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 0;
}
.chapter[data-layout="fullbleed"] .frame-inner{
  position: relative;
  top: -6%;
  height: 112%;
  will-change: transform;
}
.chapter[data-layout="fullbleed"] .fb-caption{
  position: absolute;
  left: 50%; bottom: 8%;
  z-index: 2;
  transform: translate(-50%, 10px);
  color: #fff;
  text-align: center;
  width: min(560px, 86%);
  text-shadow: 0 2px 18px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 1s var(--ease) 0.3s, transform 1s var(--ease) 0.3s;
}
.chapter[data-layout="fullbleed"].in .fb-caption{ opacity: 1; transform: translate(-50%, 0); }
.chapter[data-layout="fullbleed"] .fb-caption .caption{ color: #fff; max-width: none; opacity: 1; transform: none; transition: none; }
.chapter[data-layout="fullbleed"] .frame::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,12,10,0) 40%, rgba(20,12,10,0.55) 100%);
}

/* =========================================================================
   4. MOMENTO EMOCIONAL
   ========================================================================= */
.emotional{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dark-2);
}
.emotional-photo-wrap{
  position: absolute; inset: 0;
  overflow: hidden;
}
.emotional-photo{
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.55;
  transform: scale(1.06);
  transition: transform 6s var(--ease-soft);
}
.emotional.in-view .emotional-photo{ transform: scale(1); }
.emotional-overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(26,18,16,0.75), rgba(26,18,16,0.35) 45%, rgba(26,18,16,0.85));
}
.emotional-text{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 620px;
  padding: 0 28px;
  text-align: center;
}
.emotional-line{
  font-family: var(--serif-italic);
  font-style: italic;
  color: var(--cream);
  font-size: clamp(1.3rem, 4vw, 2rem);
  line-height: 1.6;
  margin: 0 0 0.9em;
}
.emotional-line:last-child{ color: var(--gold); }

/* =========================================================================
   5. PROPUESTA
   ========================================================================= */
.proposal{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--dark);
  padding: 10vh 24px;
}
.proposal-bg{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(192,123,86,0.22), transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(109,44,52,0.5), transparent 55%),
    var(--dark);
}
.proposal-photo-wrap{
  position: absolute; inset: 0;
  overflow: hidden;
}
.proposal-photo{
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.28;
  filter: saturate(0.9);
}
.proposal-particles{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.proposal-particles span{
  position: absolute;
  bottom: -10%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  animation: drift-up linear infinite;
}
@keyframes drift-up{
  0%{ transform: translateY(0) translateX(0); opacity: 0; }
  10%{ opacity: 0.7; }
  90%{ opacity: 0.4; }
  100%{ transform: translateY(-110vh) translateX(20px); opacity: 0; }
}

.proposal-content{
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  text-align: center;
  color: var(--cream);
}
.proposal-line{
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: clamp(1.2rem, 3.6vw, 1.6rem);
  color: var(--peach);
  margin: 0 0 0.7em;
}
.proposal-question{
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  margin: 0.5em 0 1.3em;
  color: var(--cream);
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
}

.proposal-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.btn-primary{
  background: var(--bordeaux);
  color: var(--cream);
  box-shadow: 0 12px 30px -10px rgba(109,44,52,0.7);
}
.btn-primary:hover{ background: var(--bordeaux-d); }
.btn-secondary{
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--gold-soft);
}
.btn-secondary:hover{ background: rgba(205,162,90,0.12); }

/* celebration overlay */
.celebration{
  position: fixed; inset: 0;
  z-index: 800;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(74,30,36,0.92), rgba(20,12,10,0.98));
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease), visibility 1s;
}
.celebration.show{ opacity: 1; visibility: visible; }
#celebration-canvas{ position: absolute; inset: 0; width: 100%; height: 100%; }
.celebration-content{
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 0 28px;
  transform: translateY(16px);
  opacity: 0;
  transition: opacity 1s var(--ease) 0.3s, transform 1s var(--ease) 0.3s;
}
.celebration.show .celebration-content{ opacity: 1; transform: translateY(0); }
.celebration-heart{
  font-size: 2.4rem;
  color: var(--gold);
  margin-bottom: 18px;
  animation: heart-beat 1.6s ease-in-out infinite;
}
@keyframes heart-beat{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.15); }
}
.celebration-message-group{
  max-width: 560px;
  margin: 0 auto;
}
.celebration-message{
  font-family: var(--serif-italic);
  font-style: italic;
  font-size: clamp(1.3rem, 4.4vw, 2rem);
  color: var(--cream);
  line-height: 1.6;
  margin: 0 0 0.6em;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.celebration-message.in{ opacity: 1; transform: translateY(0); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 720px){
  .album-track{ gap: 11vh; }
  .chapter[data-layout="pair"] .pair-wrap{ height: 300px; }
  .chapter[data-layout="cluster"] .cluster-wrap{ height: 220px; }
  .timeline-node{ max-width: 300px; gap: 16px; }
  .timeline-node .label{ font-size: 0.72rem; letter-spacing: 0.18em; }
  .chapter[data-layout="fullbleed"]{ margin: 0 -16px; }
}

@media (max-width: 480px){
  .hero-content{ padding: 0 22px; }
  .chapter[data-layout="large"] .frame{ width: 100%; }
  .chapter[data-layout="polaroid"] .frame{ width: min(280px, 78vw); }
}

/* respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .frame .photo-el, .frame img{ animation: none; }
  .hero-bg{ animation: none; }
  .btn-ghost{ animation: none; }
  [data-reveal], [data-sequence], .frame, .caption, .timeline-node .dot, .timeline-node .label{
    transition-duration: 0.2s;
  }
}

/* remove hover-dependent affordances on touch devices (mobile-first) */
@media (hover: none){
  .music-toggle:hover, .btn-ghost:hover, .btn-primary:hover, .btn-secondary:hover{
    background: initial;
  }
}