/* =========================================================================
   NUESTRA MÁQUINA DEL TIEMPO — hoja de estilos
   Sistema de diseño: crema + rosa pastel + luz difusa + vidrio esmerilado.
   Inspiración: Studio Ghibli, un diario romántico, un jardín iluminado.
   ========================================================================= */

:root{
  /* ---- paleta ---- */
  --cream:        #FFF9F4;
  --cream-deep:    #FBF0E6;
  --blush:        #FDEBF0;
  --pink-soft:     #F7D6DE;
  --pink-mid:      #EFB8C6;
  --rose:         #D98CA0;
  --rose-deep:     #B96C82;
  --gold-mist:     #EAD1A6;
  --ink:          #5B4552;
  --ink-soft:      #8A7178;
  --white:        #FFFFFF;

  /* ---- tipografía ---- */
  --font-display: 'Cormorant Garamond', serif;
  --font-hand:    'Caveat', cursive;
  --font-body:    'Quicksand', sans-serif;

  /* ---- ritmo ---- */
  --ease-dream: cubic-bezier(.22,.9,.3,1);
  --ease-soft:  cubic-bezier(.4,0,.2,1);
}

*{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--cream) 0%, var(--blush) 100%);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

::selection{ background: var(--pink-mid); color: var(--white); }

button{ font-family: inherit; cursor: pointer; }
:focus-visible{ outline: 2px solid var(--rose-deep); outline-offset: 3px; border-radius: 4px; }

/* =========================================================================
   CAPA AMBIENTAL — pétalos, brillo del cursor, lavado de luz
   ========================================================================= */

#ambient-layer{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

#petals-field{ position: absolute; inset: 0; }

.petal{
  position: absolute;
  top: -5%;
  width: 10px; height: 12px;
  background: radial-gradient(circle at 30% 30%, #ffffff, var(--pink-soft) 60%, var(--pink-mid));
  border-radius: 60% 10% 60% 10%;
  opacity: .75;
  filter: drop-shadow(0 2px 6px rgba(217,140,160,.25));
  animation: petal-fall linear infinite, petal-sway ease-in-out infinite;
}

@keyframes petal-fall{
  to{ transform: translateY(115vh) rotate(var(--rot, 260deg)); }
}
@keyframes petal-sway{
  0%,100%{ margin-left: -18px; }
  50%{ margin-left: 18px; }
}

#cursor-glow{
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.55), rgba(247,214,222,.25) 45%, transparent 70%);
  transform: translate(-50%,-50%);
  transition: left .35s var(--ease-soft), top .35s var(--ease-soft), opacity .4s;
  opacity: 0;
  left: 50%; top: 50%;
}

#light-wash{
  position: absolute; inset: -10%;
  background:
    radial-gradient(45% 35% at 15% 12%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(35% 30% at 88% 82%, rgba(234,209,166,.28), transparent 65%);
  animation: wash-drift 24s ease-in-out infinite alternate;
}
@keyframes wash-drift{
  to{ transform: translate(2%, -2%) scale(1.03); }
}

/* pequeñas chispas al hacer clic */
.spark{
  position: fixed;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--gold-mist));
  pointer-events: none;
  z-index: 500;
  animation: spark-pop .8s var(--ease-dream) forwards;
}
@keyframes spark-pop{
  0%{ opacity: 1; transform: translate(0,0) scale(1); }
  100%{ opacity: 0; transform: translate(var(--sx), var(--sy)) scale(.2); }
}

/* =========================================================================
   BOTÓN DE SONIDO
   ========================================================================= */

#sound-toggle{
  position: fixed;
  top: 22px; right: 22px;
  z-index: 300;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(217,140,160,.35);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--rose-deep);
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease-soft), background .3s;
  box-shadow: 0 6px 18px rgba(185,108,130,.12);
}
#sound-toggle:hover{ transform: scale(1.08); background: rgba(255,255,255,.8); }
#sound-toggle.is-off .note-wave{ opacity: .25; }
#sound-toggle.is-on svg{ animation: note-pulse 2s ease-in-out infinite; }
@keyframes note-pulse{ 50%{ transform: scale(1.08); } }

/* =========================================================================
   CONTROL DE VOLUMEN — barra deslizante minimalista junto al botón de sonido
   ========================================================================= */

#volume-control{
  position: fixed;
  top: 22px;
  right: 74px; /* justo a la izquierda del botón de música (44px + 22px + gap) */
  z-index: 300;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 22px;
  border: 1px solid rgba(217,140,160,.35);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(185,108,130,.12);
  transition: background .3s;
}
#volume-control:hover{ background: rgba(255,255,255,.8); }

#volume-slider{
  -webkit-appearance: none;
  appearance: none;
  width: 84px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rose) 0%, var(--rose) var(--vol, 20%), var(--pink-soft) var(--vol, 20%), var(--pink-soft) 100%);
  outline: none;
  cursor: pointer;
}
#volume-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--rose-deep);
  box-shadow: 0 2px 6px rgba(185,108,130,.35);
  transition: transform .2s var(--ease-soft);
}
#volume-slider::-webkit-slider-thumb:hover{ transform: scale(1.15); }
#volume-slider::-moz-range-track{
  height: 4px;
  border-radius: 2px;
  background: var(--pink-soft);
}
#volume-slider::-moz-range-progress{
  height: 4px;
  border-radius: 2px;
  background: var(--rose);
}
#volume-slider::-moz-range-thumb{
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--rose-deep);
  box-shadow: 0 2px 6px rgba(185,108,130,.35);
  transition: transform .2s var(--ease-soft);
}
#volume-slider::-moz-range-thumb:hover{ transform: scale(1.15); }

@media (max-width: 640px){
  #volume-control{ right: 68px; padding: 0 10px; }
  #volume-slider{ width: 56px; }
}

/* =========================================================================
   PANTALLA INICIAL
   ========================================================================= */

#intro-screen{
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 32px 24px;
  z-index: 10;
  transition: opacity 1s var(--ease-dream), filter 1s var(--ease-dream), visibility 1s;
}
#intro-screen.leaving{ opacity: 0; filter: blur(18px); pointer-events: none; }
#intro-screen.hidden{ visibility: hidden; display: none; }

.intro-glow{
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.9), rgba(253,235,240,.4) 45%, transparent 72%);
  z-index: -1;
}

.clock-holder{ margin-bottom: 6px; filter: drop-shadow(0 12px 30px rgba(217,140,160,.28)); }

.clock-halo{ fill: rgba(255,255,255,.5); }
.clock-ring{ fill: none; stroke: var(--pink-soft); stroke-width: 2; }
.clock-face{ fill: var(--white); }
#clock-marks line{ stroke: var(--pink-mid); stroke-width: 2; stroke-linecap: round; }
.hand{ stroke: var(--rose-deep); stroke-width: 3; stroke-linecap: round; transform-origin: 100px 100px; }
#hand-hour{ animation: tick-hour 43200s linear infinite; }
#hand-minute{ animation: tick-min 3600s linear infinite; }
@keyframes tick-hour{ to{ transform: rotate(360deg); } }
@keyframes tick-min{ to{ transform: rotate(360deg); } }
.clock-center{ fill: var(--rose-deep); }
.clock-bloom circle{ fill: var(--rose); animation: bloom-spin 6s ease-in-out infinite; transform-origin: 100px 100px; }
@keyframes bloom-spin{ 50%{ transform: scale(1.4); } }

.intro-eyebrow{
  font-family: var(--font-body);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--rose-deep);
  margin: 18px 0 6px;
}

.intro-title{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 8vw, 4.4rem);
  line-height: 1.08;
  margin: 0 0 14px;
  color: var(--ink);
}

.intro-sub{
  font-family: var(--font-hand);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  color: var(--ink-soft);
  margin: 0 0 34px;
}

.petal-btn{
  position: relative;
  border: none;
  padding: 16px 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink-mid), var(--rose));
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .02em;
  box-shadow: 0 14px 30px rgba(185,108,130,.35);
  overflow: hidden;
  transition: transform .35s var(--ease-dream), box-shadow .35s;
}
.petal-btn:hover{ transform: translateY(-3px) scale(1.03); box-shadow: 0 18px 38px rgba(185,108,130,.45); }
.petal-btn:active{ transform: translateY(0) scale(.98); }
.petal-btn-glow{
  position: absolute; inset: -40%;
  background: radial-gradient(circle, rgba(255,255,255,.55), transparent 60%);
  animation: glow-sweep 3.2s linear infinite;
}
@keyframes glow-sweep{ to{ transform: rotate(360deg); } }

.intro-hint{
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--ink-soft);
  opacity: .75;
}

/* =========================================================================
   TRANSICIÓN — el tiempo se rompe
   ========================================================================= */

#time-break{
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2,1fr);
}
#time-break.active{ opacity: 1; }
.shard{
  background: var(--white);
  transform: scale(1.02);
  transition: transform 1.05s var(--ease-dream), opacity 1.05s var(--ease-dream);
  transition-delay: calc(var(--i) * 60ms);
}
#time-break.active .shard{
  animation: shard-fly .9s var(--ease-dream) forwards;
  animation-delay: calc(var(--i) * 55ms);
}
@keyframes shard-fly{
  to{
    transform: scale(1.15) translate(
      calc((var(--i, 0) - 2.5) * 14vw),
      calc((var(--i, 0) - 2.5) * 10vh)
    ) rotate(calc((var(--i,0) - 2.5) * 12deg));
    opacity: 0;
  }
}

/* =========================================================================
   RIEL DE NAVEGACIÓN LATERAL
   ========================================================================= */

#time-rail{
  position: fixed;
  right: 20px; top: 50%;
  transform: translateY(-50%);
  z-index: 250;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .6s, visibility .6s;
}
#time-rail.visible{ opacity: 1; visibility: visible; }
.rail-line{
  position: absolute; right: 8.5px; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--pink-mid) 8%, var(--pink-mid) 92%, transparent);
}
#rail-dots{ display: flex; flex-direction: column; gap: 15px; }
.rail-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pink-soft);
  border: none;
  padding: 0;
  transition: all .4s var(--ease-soft);
  position: relative;
}
.rail-dot::after{
  content: attr(data-label);
  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-body);
  font-size: 11px;
  white-space: nowrap;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--rose-deep);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.rail-dot:hover::after{ opacity: 1; }
.rail-dot.active{ background: var(--rose-deep); width: 11px; height: 11px; box-shadow: 0 0 0 5px rgba(217,140,160,.22); }

/* =========================================================================
   ESTACIONES — estructura común
   ========================================================================= */

#stations{
  position: relative;
  z-index: 10;
  opacity: 0;
  transition: opacity 1.1s var(--ease-dream) .3s;
}
#stations.visible{ opacity: 1; }

.station{
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 90px 22px 70px;
  overflow: hidden;
}

.station-sky{ position: absolute; inset: 0; z-index: 0; transition: opacity 1s; }

.station-index{
  font-family: var(--font-hand);
  font-size: 1.4rem;
  color: var(--rose-deep);
  opacity: 0;
  transform: translateY(10px);
  transition: all .8s var(--ease-dream);
}
.station-date{
  font-family: var(--font-body);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 4px;
  opacity: 0;
  transform: translateY(10px);
  transition: all .8s var(--ease-dream) .05s;
}
.station-title{
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  margin: 10px 0 6px;
  color: var(--ink);
  opacity: 0;
  transform: translateY(14px);
  transition: all .9s var(--ease-dream) .1s;
}
.station-hint{
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 34px;
  opacity: 0;
  transition: opacity .9s var(--ease-dream) .2s;
}
.station.in-view .station-index,
.station.in-view .station-date,
.station.in-view .station-title{ opacity: 1; transform: none; }
.station.in-view .station-hint{ opacity: .85; }
.station.opened .station-hint{ opacity: 0; }

.reveal-stage{
  position: relative;
  width: min(360px, 80vw);
  height: 260px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}

/* tarjetas de recuerdo (mensajes reales del chat) */
.memory-panel{
  position: relative;
  width: min(480px, 92vw);
  margin-top: 26px;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity .9s var(--ease-dream), transform .9s var(--ease-dream);
}
.station.opened .memory-panel{ opacity: 1; transform: none; pointer-events: auto; }

.memory-card{
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 20px;
  padding: 16px 20px;
  text-align: left;
  box-shadow: 0 12px 30px rgba(185,108,130,.14);
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transition: opacity .7s var(--ease-dream), transform .7s var(--ease-dream);
}
.station.opened .memory-card{ opacity: 1; transform: none; }
.station.opened .memory-card:nth-child(1){ transition-delay: .05s; }
.station.opened .memory-card:nth-child(2){ transition-delay: .22s; }
.station.opened .memory-card:nth-child(3){ transition-delay: .39s; }
.station.opened .memory-card:nth-child(4){ transition-delay: .56s; }
.station.opened .memory-card:nth-child(5){ transition-delay: .73s; }
.station.opened .memory-card:nth-child(6){ transition-delay: .90s; }
.station.opened .memory-card:nth-child(7){ transition-delay: 1.07s; }

.memory-who{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
.memory-who.who-ary{ color: var(--rose-deep); }
.memory-who.who-haejin{ color: #B08A5C; }
.memory-text{
  font-family: var(--font-hand);
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.35;
  color: var(--ink);
  margin: 3px 0 0;
}

.tap-glow{
  position: absolute; inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.6), transparent 65%);
  opacity: 0;
  animation: tap-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tap-pulse{
  0%,100%{ opacity: 0; transform: scale(.8); }
  50%{ opacity: .8; transform: scale(1.05); }
}
.station.opened .tap-glow{ display: none; }

/* botones "objeto" genéricos usados por cada mecánica */
.stage-object{
  background: none; border: none; padding: 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.stage-object:focus-visible{ outline-offset: 8px; }

/* =========================================================================
   DECORACIÓN AMBIENTAL POR ESTACIÓN (mariposas, hojas, luciérnagas...)
   ========================================================================= */
.deco{ position: absolute; opacity: .8; pointer-events: none; }
.deco-butterfly{ animation: butterfly-fly 9s ease-in-out infinite; }
@keyframes butterfly-fly{
  0%,100%{ transform: translate(0,0) rotate(-4deg); }
  25%{ transform: translate(14px,-18px) rotate(4deg); }
  50%{ transform: translate(-6px,-30px) rotate(-6deg); }
  75%{ transform: translate(-16px,-10px) rotate(3deg); }
}
.deco-leaf{ animation: leaf-drift 11s ease-in-out infinite; }
@keyframes leaf-drift{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-22px) rotate(14deg); }
}
.deco-spark{ animation: spark-twinkle 2.4s ease-in-out infinite; }
@keyframes spark-twinkle{ 0%,100%{ opacity: .25; transform: scale(.8);} 50%{ opacity: 1; transform: scale(1.15);} }
.deco-firefly{ animation: firefly-drift 6s ease-in-out infinite; }
@keyframes firefly-drift{
  0%,100%{ transform: translate(0,0); opacity: .5; }
  50%{ transform: translate(20px,-24px); opacity: 1; }
}

/* =========================================================================
   MECÁNICA 1 — AGOSTO · abrir una carta doblada
   ========================================================================= */
.m-letter .paper{
  width: 190px; height: 130px;
  background: linear-gradient(180deg, #fff, var(--cream-deep));
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(185,108,130,.22);
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s var(--ease-dream);
}
.m-letter .fold{
  position: absolute; left: 0; right: 0; top: 0; height: 50%;
  background: linear-gradient(180deg, var(--pink-soft), var(--cream-deep));
  border-radius: 4px 4px 0 0;
  transform-origin: bottom;
  transition: transform 1.1s var(--ease-dream);
  box-shadow: 0 2px 10px rgba(185,108,130,.15);
}
.m-letter .seal{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--rose), var(--rose-deep));
  box-shadow: 0 4px 10px rgba(185,108,130,.4);
  transition: opacity .4s, transform .4s;
}
.station.opened .m-letter .fold{ transform: rotateX(-165deg); }
.station.opened .m-letter .seal{ opacity: 0; transform: translate(-50%,-50%) scale(0); }
.station.opened .m-letter .paper{ transform: translateY(-8px); }

/* =========================================================================
   MECÁNICA 2 — SEPTIEMBRE · abrir un sobre
   ========================================================================= */
.m-envelope{ }
.m-envelope .env-body{
  width: 210px; height: 140px;
  background: linear-gradient(160deg, #fff, var(--blush));
  border-radius: 6px;
  position: relative;
  box-shadow: 0 16px 34px rgba(185,108,130,.2);
}
.m-envelope .env-flap{
  position: absolute; top: 0; left: 0; right: 0; height: 76px;
  background: linear-gradient(160deg, var(--pink-mid), var(--pink-soft));
  clip-path: polygon(0 0, 100% 0, 50% 78%);
  transform-origin: top;
  transition: transform 1s var(--ease-dream);
  z-index: 3;
}
.m-envelope .env-letter{
  position: absolute; left: 10%; right: 10%; bottom: 8%;
  height: 70%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(185,108,130,.18);
  transform: translateY(6%);
  transition: transform 1.05s var(--ease-dream) .25s;
}
.station.opened .m-envelope .env-flap{ transform: rotateX(-160deg); }
.station.opened .m-envelope .env-letter{ transform: translateY(-58%); }

/* =========================================================================
   MECÁNICA 3 — OCTUBRE · hacer florecer una flor
   ========================================================================= */
.m-flower{ }
.m-flower .stem{
  position: absolute; bottom: 0; left: 50%; width: 3px; height: 90px;
  background: linear-gradient(180deg, #B7CFA0, #93B37C);
  transform: translateX(-50%);
  border-radius: 3px;
}
.m-flower .bloom{ position: relative; width: 140px; height: 140px; }
.m-flower .petal-el{
  position: absolute; left: 50%; top: 50%;
  width: 50px; height: 68px;
  background: linear-gradient(180deg, #fff, var(--pink-soft));
  border-radius: 60% 60% 60% 60%/70% 70% 30% 30%;
  transform-origin: 50% 100%;
  transition: transform 1.1s var(--ease-dream);
  box-shadow: 0 4px 12px rgba(185,108,130,.15);
}
.m-flower .petal-el:nth-child(1){ transform: translate(-50%,-100%) rotate(0deg)   scale(.3); }
.m-flower .petal-el:nth-child(2){ transform: translate(-50%,-100%) rotate(60deg)  scale(.3); }
.m-flower .petal-el:nth-child(3){ transform: translate(-50%,-100%) rotate(120deg) scale(.3); }
.m-flower .petal-el:nth-child(4){ transform: translate(-50%,-100%) rotate(180deg) scale(.3); }
.m-flower .petal-el:nth-child(5){ transform: translate(-50%,-100%) rotate(240deg) scale(.3); }
.m-flower .petal-el:nth-child(6){ transform: translate(-50%,-100%) rotate(300deg) scale(.3); }
.station.opened .m-flower .petal-el:nth-child(1){ transform: translate(-50%,-100%) rotate(0deg)   scale(1); transition-delay: 0s; }
.station.opened .m-flower .petal-el:nth-child(2){ transform: translate(-50%,-100%) rotate(60deg)  scale(1); transition-delay: .06s; }
.station.opened .m-flower .petal-el:nth-child(3){ transform: translate(-50%,-100%) rotate(120deg) scale(1); transition-delay: .12s; }
.station.opened .m-flower .petal-el:nth-child(4){ transform: translate(-50%,-100%) rotate(180deg) scale(1); transition-delay: .18s; }
.station.opened .m-flower .petal-el:nth-child(5){ transform: translate(-50%,-100%) rotate(240deg) scale(1); transition-delay: .24s; }
.station.opened .m-flower .petal-el:nth-child(6){ transform: translate(-50%,-100%) rotate(300deg) scale(1); transition-delay: .3s; }
.m-flower .bloom-center{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0);
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--gold-mist));
  transition: transform .6s var(--ease-dream) .5s;
  z-index: 2;
}
.station.opened .m-flower .bloom-center{ transform: translate(-50%,-50%) scale(1); }

/* =========================================================================
   MECÁNICA 4 — NOVIEMBRE · abrir una ventana
   ========================================================================= */
.m-window{ }
.m-window .frame{
  width: 200px; height: 220px;
  background: linear-gradient(180deg, #cfe6f2, #fdf2e6);
  border: 8px solid #fff;
  border-radius: 10px;
  box-shadow: 0 18px 36px rgba(185,108,130,.2), inset 0 0 0 2px var(--pink-soft);
  position: relative;
  overflow: hidden;
}
.m-window .cross-v{ position: absolute; left: 50%; top: 0; bottom: 0; width: 6px; background: #fff; transform: translateX(-50%); }
.m-window .cross-h{ position: absolute; top: 50%; left: 0; right: 0; height: 6px; background: #fff; transform: translateY(-50%); }
.m-window .shutter{
  position: absolute; top: 0; bottom: 0; width: 50%;
  background: linear-gradient(135deg, var(--pink-mid), var(--rose));
  z-index: 2;
  transition: transform 1.1s var(--ease-dream);
}
.m-window .shutter-l{ left: 0; transform-origin: left; }
.m-window .shutter-r{ right: 0; transform-origin: right; }
.station.opened .m-window .shutter-l{ transform: rotateY(-100deg); }
.station.opened .m-window .shutter-r{ transform: rotateY(100deg); }
.m-window .sill-note{
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%) scale(0);
  width: 26px; height: 20px; background: #fff; border-radius: 2px;
  box-shadow: 0 4px 8px rgba(185,108,130,.25);
  transition: transform .5s var(--ease-dream) .6s;
}
.station.opened .m-window .sill-note{ transform: translateX(-50%) scale(1); }

/* =========================================================================
   MECÁNICA 5 — DICIEMBRE · descubrir una nube
   ========================================================================= */
.m-cloud{ }
.m-cloud .puff{
  position: absolute;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(185,108,130,.15);
  transition: transform 1.2s var(--ease-dream), opacity 1.2s var(--ease-dream);
}
.m-cloud .p1{ width: 110px; height: 110px; left: 50%; top: 50%; transform: translate(-50%,-40%); }
.m-cloud .p2{ width: 80px; height: 80px; left: 30%; top: 55%; }
.m-cloud .p3{ width: 90px; height: 90px; right: 20%; top: 55%; }
.m-cloud .p4{ width: 60px; height: 60px; left: 40%; top: 35%; }
.station.opened .m-cloud .p1{ transform: translate(-90%,-90%) scale(.6); opacity: 0; }
.station.opened .m-cloud .p2{ transform: translate(-140%,10%) scale(.6); opacity: 0; }
.station.opened .m-cloud .p3{ transform: translate(140%,10%) scale(.6); opacity: 0; }
.station.opened .m-cloud .p4{ transform: translate(0,-120%) scale(.6); opacity: 0; }
.m-cloud .star-behind{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(0);
  font-size: 30px; color: var(--gold-mist);
  transition: transform .7s var(--ease-dream) .5s;
}
.station.opened .m-cloud .star-behind{ transform: translate(-50%,-50%) scale(1); }

/* =========================================================================
   MECÁNICA 6 — ENERO · encender una lámpara
   ========================================================================= */
.m-lamp{ }
.m-lamp .lamp-shade{
  width: 90px; height: 60px;
  background: linear-gradient(180deg, var(--pink-soft), var(--pink-mid));
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  margin: 0 auto;
}
.m-lamp .lamp-pole{ width: 4px; height: 60px; background: var(--gold-mist); margin: 0 auto; }
.m-lamp .lamp-base{ width: 46px; height: 8px; background: var(--gold-mist); margin: 0 auto; border-radius: 3px; }
.m-lamp .glow-orb{
  position: absolute; left: 50%; top: 78px; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--gold-mist));
  opacity: 0;
  filter: blur(1px);
  transition: opacity 1s var(--ease-dream), box-shadow 1s var(--ease-dream);
}
.station.opened .m-lamp .glow-orb{
  opacity: 1;
  box-shadow: 0 0 60px 34px rgba(234,209,166,.55), 0 0 120px 70px rgba(234,209,166,.25);
}
.m-lamp .lamp-stage{ display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }

/* =========================================================================
   MECÁNICA 7 — FEBRERO · abrir una cajita con forma de corazón
   ========================================================================= */
.m-heartbox{ }
.m-heartbox .box{
  position: relative; width: 150px; height: 130px;
}
.m-heartbox .box-base{
  position: absolute; bottom: 0; width: 100%; height: 85px;
  background: linear-gradient(160deg, #fff, var(--pink-soft));
  border-radius: 14px;
  box-shadow: 0 16px 30px rgba(185,108,130,.22);
}
.m-heartbox .box-lid{
  position: absolute; top: 0; width: 100%; height: 60px;
  background: linear-gradient(160deg, var(--pink-mid), var(--rose));
  border-radius: 50% 50% 20% 20% / 60% 60% 20% 20%;
  transform-origin: bottom;
  transition: transform 1.05s var(--ease-dream);
  box-shadow: 0 6px 14px rgba(185,108,130,.2);
}
.m-heartbox .ribbon{
  position: absolute; left: 50%; top: 0; bottom: 0; width: 10px; background: #fff;
  transform: translateX(-50%);
  opacity: .9;
  transition: opacity .4s;
}
.station.opened .m-heartbox .box-lid{ transform: rotateX(-140deg) translateY(-6px); }
.station.opened .m-heartbox .ribbon{ opacity: 0; }
.m-heartbox .box-glow{
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%) scale(0);
  width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--gold-mist));
  transition: transform .5s var(--ease-dream) .45s;
}
.station.opened .m-heartbox .box-glow{ transform: translateX(-50%) scale(1); }

/* =========================================================================
   MECÁNICA 8 — MARZO · descubrir una estrella
   ========================================================================= */
.m-star{ }
.m-star .star-shape{
  font-size: 54px;
  color: var(--gold-mist);
  filter: drop-shadow(0 4px 10px rgba(185,108,130,.25));
  transition: transform 1s var(--ease-dream), filter 1s var(--ease-dream);
  display: inline-block;
}
.station.opened .m-star .star-shape{
  transform: scale(1.5) rotate(20deg);
  filter: drop-shadow(0 0 26px rgba(234,209,166,.85));
}
.m-star .constellation{ position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease-dream) .3s; }
.station.opened .m-star .constellation{ opacity: 1; }
.m-star .dot{ position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-mist); animation: spark-twinkle 2s ease-in-out infinite; }

/* =========================================================================
   MECÁNICA 9 — ABRIL · abrir una caja de recuerdos
   ========================================================================= */
.m-memorybox{ }
.m-memorybox .box{ position: relative; width: 160px; height: 110px; }
.m-memorybox .base{
  position: absolute; bottom: 0; width: 100%; height: 70px;
  background: linear-gradient(160deg, var(--cream-deep), var(--pink-soft));
  border-radius: 8px;
  box-shadow: 0 16px 30px rgba(185,108,130,.2);
}
.m-memorybox .lid{
  position: absolute; top: 4px; width: 106%; left: -3%; height: 26px;
  background: linear-gradient(160deg, #fff, var(--cream-deep));
  border-radius: 6px;
  transform-origin: left;
  transition: transform 1.05s var(--ease-dream);
  box-shadow: 0 6px 14px rgba(185,108,130,.18);
}
.station.opened .m-memorybox .lid{ transform: rotateZ(-35deg) translateY(-14px); }
.m-memorybox .tissue{
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%) scale(0);
  width: 70%; height: 40px;
  background: radial-gradient(ellipse at top, #fff, var(--pink-soft));
  border-radius: 50% 50% 10% 10%;
  transition: transform .6s var(--ease-dream) .35s;
}
.station.opened .m-memorybox .tissue{ transform: translateX(-50%) scale(1); }

/* =========================================================================
   MECÁNICA 10 — MAYO · girar una cajita musical
   ========================================================================= */
.m-musicbox{ }
.m-musicbox .box{ position: relative; width: 140px; height: 120px; }
.m-musicbox .body{
  position: absolute; bottom: 0; width: 100%; height: 80px;
  background: linear-gradient(160deg, #fff, var(--pink-soft));
  border-radius: 10px;
  box-shadow: 0 16px 30px rgba(185,108,130,.2);
}
.m-musicbox .lid-top{
  position: absolute; top: 0; width: 100%; height: 34px;
  background: linear-gradient(160deg, var(--pink-mid), var(--rose));
  border-radius: 10px 10px 0 0;
  transition: transform 1s var(--ease-dream);
  transform-origin: bottom;
}
.station.opened .m-musicbox .lid-top{ transform: rotateX(-120deg) translateY(-4px); }
.m-musicbox .key{
  position: absolute; right: -14px; top: 40px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 4px solid var(--gold-mist);
  transition: transform 1.4s var(--ease-dream);
}
.station.opened .m-musicbox .key{ transform: rotate(320deg); }
.m-musicbox .ballerina{
  position: absolute; left: 50%; bottom: 78px; transform: translateX(-50%) scale(0);
  font-size: 22px;
  transition: transform .6s var(--ease-dream) .35s;
}
.station.opened .m-musicbox .ballerina{ transform: translateX(-50%) scale(1) rotate(360deg); transition: transform 1.6s var(--ease-dream) .35s; }
.note{ position: absolute; opacity: 0; font-size: 15px; color: var(--rose-deep); }
.station.opened .note{ animation: note-float 2.6s ease-out infinite; }
.note:nth-child(1){ left: 20%; top: 20%; animation-delay: .5s !important; }
.note:nth-child(2){ right: 18%; top: 10%; animation-delay: 1.1s !important; }
.note:nth-child(3){ left: 45%; top: 0%; animation-delay: 1.7s !important; }
@keyframes note-float{
  0%{ opacity: 0; transform: translateY(0) scale(.7); }
  25%{ opacity: 1; }
  100%{ opacity: 0; transform: translateY(-60px) scale(1.1); }
}

/* =========================================================================
   MECÁNICA 11 — JUNIO · desbloquear el candado de los 10 meses
   ========================================================================= */
.m-lock{ }
.m-lock .lock-body{
  position: relative; width: 110px; height: 100px; margin: 0 auto;
}
.m-lock .shackle{
  position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  width: 54px; height: 54px;
  border: 10px solid var(--gold-mist);
  border-bottom: none;
  border-radius: 50px 50px 0 0;
  transition: transform 1s var(--ease-dream);
}
.station.opened .m-lock .shackle{ transform: translate(-50%,-18px) rotate(-24deg); }
.m-lock .lock-face{
  position: absolute; bottom: 0; width: 100%; height: 66px;
  background: linear-gradient(160deg, var(--pink-mid), var(--rose));
  border-radius: 14px;
  box-shadow: 0 16px 30px rgba(185,108,130,.24);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 22px;
}
.m-lock .unlock-burst{
  position: absolute; left: 50%; top: 60%; transform: translate(-50%,-50%) scale(0);
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--gold-mist));
  transition: transform .5s var(--ease-dream) .5s;
}
.station.opened .m-lock .unlock-burst{ transform: translate(-50%,-50%) scale(1.4); opacity: 0; }

/* =========================================================================
   MECÁNICA 12 — JULIO · abrir un cofre de luz (final antes de la carta)
   ========================================================================= */
.m-chest{ }
.m-chest .chest{ position: relative; width: 170px; height: 110px; }
.m-chest .chest-base{
  position: absolute; bottom: 0; width: 100%; height: 68px;
  background: linear-gradient(160deg, var(--gold-mist), var(--pink-mid));
  border-radius: 8px;
  box-shadow: 0 18px 34px rgba(185,108,130,.25);
}
.m-chest .chest-lid{
  position: absolute; top: 0; width: 100%; height: 46px;
  background: linear-gradient(160deg, var(--pink-soft), var(--gold-mist));
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  transform-origin: bottom;
  transition: transform 1.1s var(--ease-dream);
  box-shadow: 0 8px 16px rgba(185,108,130,.2);
}
.station.opened .m-chest .chest-lid{ transform: rotateX(-130deg) translateY(-10px); }
.m-chest .light-burst{
  position: absolute; left: 50%; bottom: 55px; transform: translateX(-50%) scale(0);
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--gold-mist) 55%, transparent 75%);
  transition: transform .8s var(--ease-dream) .3s, opacity .8s;
}
.station.opened .m-chest .light-burst{ transform: translateX(-50%) scale(1); }

/* =========================================================================
   CARTA FINAL
   ========================================================================= */
#final-letter{
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 60px 24px;
}
.final-envelope{
  width: 96px; height: 66px;
  margin-bottom: 30px;
  position: relative;
  opacity: 0;
  transform: translateY(20px) scale(.85);
  animation: final-rise 1.4s var(--ease-dream) forwards;
}
.final-envelope .fe-body{ position: absolute; inset: 0; background: linear-gradient(160deg, #fff, var(--pink-soft)); border-radius: 6px; box-shadow: 0 14px 30px rgba(185,108,130,.22); }
.final-envelope .fe-flap{ position: absolute; top:0; left:0; right:0; height: 60%; background: linear-gradient(160deg, var(--pink-mid), var(--rose)); clip-path: polygon(0 0,100% 0,50% 100%); }
@keyframes final-rise{ to{ opacity: 1; transform: translateY(0) scale(1); } }

.final-text{
  font-family: var(--font-hand);
  font-size: clamp(1.5rem, 4.4vw, 2.3rem);
  line-height: 1.5;
  max-width: 640px;
  color: var(--ink);
  opacity: 0;
  animation: final-fade 1.8s var(--ease-dream) .6s forwards;
}
@keyframes final-fade{ to{ opacity: 1; } }

.final-sign{
  margin-top: 26px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose-deep);
  opacity: 0;
  animation: final-fade 1.4s var(--ease-dream) 1.6s forwards;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 640px){
  #time-rail{ right: 10px; }
  .rail-dot::after{ display: none; }
  .station{ padding: 76px 16px 56px; }
  .reveal-stage{ height: 220px; }
}

@media (min-width: 641px){
  .station-hint::after{ content: ' · haz clic para descubrir'; }
}