/* =========================================================
   Paleta cálida de cine analógico: negro tinta, vino, ámbar, rosa
   ========================================================= */
:root{
  --ink:#fbefe4;
  --soft:rgba(251,239,228,.74);
  --rose:#f4b9ae;
  --gold:#f2c88f;
  --amber:#ffb36b;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --script:'Dancing Script', 'Segoe Script', 'Brush Script MT', cursive;
  --mono:'Courier Prime', 'Courier New', monospace;
  --pad-top:max(72px, calc(env(safe-area-inset-top) + 58px));
  --pad-x:max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --pad-bottom:max(24px, env(safe-area-inset-bottom));
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-text-size-adjust:100%;text-size-adjust:100%}
@supports (height:100dvh){html,body{height:100dvh}}
body{
  color:var(--ink);font-family:var(--serif);-webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(130% 70% at 50% 115%, rgba(214,160,160,.34) 0%, rgba(214,160,160,0) 62%),
    radial-gradient(90% 60% at 12% -8%, rgba(190,210,196,.16) 0%, rgba(190,210,196,0) 70%),
    linear-gradient(180deg,#26312f 0%,#303d3a 55%,#3a4340 100%);
}
button{-webkit-appearance:none;appearance:none;font:inherit}

/* ---------- capas de fondo ---------- */
#bg,#fireworks{position:fixed;inset:0;width:100%;height:100%;display:block}
#bg{z-index:0}
#fireworks{z-index:5;pointer-events:none}
.tint{position:fixed;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,0);transition:background 2.4s ease}
.leak{
  position:fixed;z-index:3;pointer-events:none;mix-blend-mode:screen;
  width:90vmax;height:90vmax;left:-30vmax;top:-35vmax;
  background:radial-gradient(circle, rgba(246,196,184,.30) 0%, rgba(246,196,184,.10) 35%, rgba(246,196,184,0) 65%);
  animation:leak 22s ease-in-out infinite alternate;
}
@keyframes leak{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.85}
  50%{transform:translate3d(35vmax,22vmax,0) scale(1.15);opacity:.45}
  100%{transform:translate3d(55vmax,55vmax,0) scale(.95);opacity:.8}
}
.vignette{position:fixed;inset:0;z-index:7;pointer-events:none;background:radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(10,16,15,.38) 100%)}
.grain{
  position:fixed;left:-50%;top:-50%;width:200%;height:200%;z-index:8;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1s steps(1) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(5%,-7%)}
  60%{transform:translate(-4%,-3%)}80%{transform:translate(7%,6%)}100%{transform:translate(0,0)}
}
.flash{position:fixed;inset:0;z-index:9;pointer-events:none;background:#fff1de;opacity:0}
.flash.go{animation:flash 1s ease-out}
@keyframes flash{0%{opacity:0}10%{opacity:.3}100%{opacity:0}}

/* ---------- escenas ---------- */
#app{position:fixed;inset:0;z-index:2}
.scene{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:var(--pad-top) var(--pad-x) var(--pad-bottom);
  opacity:0;visibility:hidden;filter:blur(10px);transform:scale(1.03);
  transition:opacity 1.2s ease, filter 1.2s ease, transform 1.8s ease, visibility 0s linear 1.2s;
}
.scene.active{opacity:1;visibility:visible;filter:none;transform:none;transition-delay:0s}

.small{font-size:clamp(.8rem,3.1vw,1.1rem);letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.subtitle{font-size:clamp(1.05rem,4.2vw,1.5rem);font-style:italic;color:var(--soft);margin-top:.7rem;max-width:32ch;line-height:1.4}
.script{font-family:var(--script);font-weight:700;color:var(--rose);text-shadow:0 2px 28px rgba(255,140,110,.35)}
h1.script{font-size:clamp(2.5rem,12vw,5rem);margin:.55rem 0 .5rem;line-height:1.12}
.script.big{font-size:clamp(2.1rem,9.5vw,4.2rem);line-height:1.15}
.script.huge{font-size:clamp(2.6rem,13vw,5.5rem);line-height:1.1}
.hint{margin-top:1.2rem;font-size:.95rem;color:var(--soft);opacity:.7}

.c-in{opacity:0;animation:blurIn 1.6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:var(--d,0s)}
@keyframes blurIn{from{opacity:0;filter:blur(12px);transform:translateY(14px)}to{opacity:1;filter:blur(0);transform:none}}

.btn{
  position:relative;margin-top:1.8rem;min-height:52px;padding:.9rem 2.3rem;font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:.08em;
  color:#3a1118;background:linear-gradient(135deg,#f8d9a6,#f4b0a4);border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 10px 34px rgba(255,140,110,.32);
}
.btn.c-in{animation:blurIn 1.6s cubic-bezier(.2,.8,.2,1) forwards, breathe 2.6s ease-in-out 4.5s infinite}
.btn::after{content:'';position:absolute;inset:-6px;border-radius:inherit;border:1px solid rgba(244,185,174,.5);animation:ring 2.6s ease-out infinite}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold);box-shadow:none;font-size:1.05rem;animation:none}
.btn.ghost::after{display:none}
@keyframes breathe{50%{transform:scale(1.04)}}
@keyframes ring{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}

/* letras que aparecen una a una */
.word{display:inline-block;white-space:nowrap}
.ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(5deg);filter:blur(8px)}
.in .ch,.ch.in{animation:letterIn 1s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i) * 55ms)}
@keyframes letterIn{to{opacity:1;transform:none;filter:blur(0)}}

/* ---------- ESCENA 1 ---------- */
.intro-lines{min-height:5.6em;font-size:clamp(1.3rem,5.4vw,2rem);font-style:italic;line-height:1.5;max-width:24ch}
.intro-lines span{display:block;opacity:0;animation:focusIn 2.2s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes focusIn{from{opacity:0;filter:blur(14px);letter-spacing:.22em;transform:scale(1.06)}to{opacity:1;filter:blur(0);letter-spacing:0;transform:none}}
.name-reveal{position:absolute;left:0;right:0;bottom:max(6%, env(safe-area-inset-bottom));opacity:0;transition:opacity 2.4s ease;padding:0 var(--pad-x)}
.name-reveal.show{opacity:1}
.name-reveal .big{margin-top:.5rem}

/* ---------- ESCENA 2 ---------- */
.title-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--pad-top) var(--pad-x) var(--pad-bottom);opacity:0;filter:blur(12px);transform:translateY(16px);transition:opacity 1.6s ease, filter 1.6s ease, transform 1.8s ease}
.title-card.show{opacity:1;filter:none;transform:none}
.photo-stage{position:relative;width:min(100%,420px);height:100%;max-height:660px}
.moment{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.95rem;
  opacity:0;transform:translateY(54px) scale(.94);
  transition:opacity 1.2s ease, transform 1.7s cubic-bezier(.2,.9,.25,1);
}
.moment.show{opacity:1;transform:none}
.moment.out{opacity:0;transform:translateY(-34px) scale(.97);transition:opacity .9s ease, transform 1s ease}
.frame{
  position:relative;flex:1 1 0;min-height:0;width:100%;align-self:stretch;
  background:#f4e9d6;border-radius:3px;
  box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 50px rgba(255,150,110,.14);
  transform:rotate(var(--rot,0deg));
}
.frame::before{ /* cinta adhesiva */
  content:'';position:absolute;top:-13px;left:50%;width:92px;height:26px;margin-left:-46px;z-index:2;
  background:rgba(242,200,143,.55);border:1px solid rgba(255,255,255,.12);transform:rotate(-3deg);
}
.ph{position:absolute;inset:10px 10px 36px;overflow:hidden;border-radius:2px;background:linear-gradient(135deg,#4a1d2c,#8a4350)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;
  filter:sepia(1) brightness(.35) contrast(1.25) blur(7px);
  transform:scale(1.02);
  transition:filter 3.6s ease .5s, transform 10s linear .5s}
.moment.show .ph img{filter:none;transform:scale(1.1)}
.ph.empty::after{content:'♡';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:4rem;color:var(--rose)}
.meta{text-align:center}
.moment .date{font-size:clamp(.78rem,3vw,.92rem);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.moment .cap{margin-top:.4rem;font-size:clamp(1.08rem,4.4vw,1.5rem);font-style:italic;line-height:1.38;color:var(--ink);max-width:30ch;margin-left:auto;margin-right:auto}

/* ---------- ESCENA 3 ---------- */
.ecg-wrap{width:min(100%,720px);position:relative;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(22,34,32,.55);overflow:hidden;margin-bottom:16px;box-shadow:0 0 44px rgba(120,230,200,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#ecg{width:100%;height:clamp(92px,17dvh,170px);display:block}
@supports not (height:1dvh){#ecg{height:clamp(92px,17vh,170px)}}
.bpm{position:absolute;top:8px;right:14px;font-family:var(--mono);font-size:clamp(1.15rem,4.6vw,1.5rem);color:#8dffb0}
.bpm small{font-size:.75em;opacity:.8}
.beat{display:inline-block;color:#ff6b84}
.beat.pump{animation:pump .5s ease-out}
@keyframes pump{0%{transform:scale(1)}30%{transform:scale(1.55)}100%{transform:scale(1)}}
.chart-card{
  width:min(100%,720px);background:#f3ead9;color:#2b2420;border-radius:6px;padding:14px 16px 16px;text-align:left;font-family:var(--mono);
  box-shadow:0 24px 54px rgba(0,0,0,.55);
  opacity:0;transform:translateY(40px) rotate(-1.2deg) scale(.96);
  transition:opacity 1.2s ease, transform 1.5s cubic-bezier(.34,1.4,.64,1);
}
.chart-card.show{opacity:1;transform:rotate(-.4deg)}
.chart-head{font-weight:700;border-bottom:2px solid #b3202f;color:#b3202f;padding-bottom:6px;margin-bottom:10px;font-size:clamp(.74rem,3.1vw,.95rem);letter-spacing:.04em}
.chart-body{font-size:clamp(.8rem,3.3vw,1rem);line-height:1.5}
.chart-body .cl{position:relative;margin-bottom:.15em}
.chart-body .ghost{visibility:hidden}
.chart-body .typed{position:absolute;left:0;top:0;right:0}
.chart-body b{color:#b3202f}
.chart-body .cursor::after{content:'▌';animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- ESCENA 4 ---------- */
#s4{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;justify-content:flex-start;padding-top:max(76px,9dvh)}
@supports not (height:1dvh){#s4{padding-top:max(76px,9vh)}}
#s4::-webkit-scrollbar{display:none}
.counter{display:flex;gap:clamp(8px,3vw,24px);margin:1.4rem 0 .6rem;opacity:0;transition:opacity 2s;width:100%;max-width:420px;justify-content:center}
.counter.show,#counterNote.show{opacity:1}
#counterNote{opacity:0;transition:opacity 2s}
.counter div{display:flex;flex-direction:column;flex:1 1 0;min-width:0}
.counter b{font-size:clamp(1.7rem,8.4vw,3rem);color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}
.counter b.tick{animation:tick .5s ease-out}
@keyframes tick{0%{transform:translateY(-.25em);opacity:.3}100%{transform:none;opacity:1}}
.counter span{font-size:clamp(.62rem,2.6vw,.75rem);letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.letter{max-width:32ch;margin-top:1.5rem;font-size:clamp(1.15rem,4.6vw,1.5rem);line-height:1.6;font-style:italic}
.letter p{opacity:0;filter:blur(8px);transform:translateY(10px);transition:opacity 1.8s ease, filter 1.8s ease, transform 1.8s ease;margin-bottom:.85rem}
.letter p.show{opacity:1;filter:none;transform:none}
.letter p.sign{font-family:var(--script);font-style:normal;font-size:1.9em;color:var(--rose)}
#replayBtn{opacity:0;pointer-events:none;transition:opacity 2s;margin:1.4rem 0 max(12px,env(safe-area-inset-bottom))}
#replayBtn.show{opacity:1;pointer-events:auto}
#finalName{opacity:0;filter:blur(10px);transition:opacity 2s, filter 2s}
#finalName.show{opacity:1;filter:none}

/* ---------- controles ---------- */
.skip,.mute{
  position:fixed;z-index:10;top:max(12px,env(safe-area-inset-top));min-width:44px;min-height:44px;padding:.35rem 1rem;
  background:rgba(255,235,220,.08);color:var(--soft);border:1px solid rgba(255,235,220,.2);border-radius:999px;
  font-family:var(--serif);font-size:1.05rem;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .6s;
}
.skip{right:max(12px,env(safe-area-inset-right))}
.mute{left:max(12px,env(safe-area-inset-left))}
body.playing .skip,body.playing .mute{opacity:.85;pointer-events:auto}
body.final .skip{opacity:0;pointer-events:none}

/* ---------- pétalos y toques ---------- */
#petals{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.petal{position:absolute;top:-8vh;will-change:transform;animation:petalFall linear forwards}
.petal i{display:block;width:var(--s,16px);height:calc(var(--s,16px) * 1.3);
  background:radial-gradient(circle at 30% 25%, #ffd9d2 0%, var(--c,#f08a98) 55%, #b8435c 100%);
  border-radius:80% 0 80% 0;opacity:.9;box-shadow:0 0 12px rgba(255,150,150,.25);
  animation:petalSway var(--sw,3.2s) ease-in-out infinite alternate}
@keyframes petalFall{to{transform:translate3d(var(--dx,0px),115vh,0)}}
@keyframes petalSway{
  0%{transform:rotate(-35deg) rotateX(0deg) translateX(-14px)}
  100%{transform:rotate(40deg) rotateX(70deg) translateX(14px)}
}
.ripple{position:fixed;z-index:6;pointer-events:none;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;border:1.5px solid rgba(255,214,170,.85);animation:ripple 1.1s ease-out forwards}
@keyframes ripple{to{transform:scale(7);opacity:0}}
.tpetal{position:fixed;z-index:6;pointer-events:none;width:9px;height:12px;border-radius:80% 0 80% 0;background:#f4a3ae;animation:tpetal .95s ease-out forwards}
@keyframes tpetal{to{transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.3);opacity:0}}

/* ---------- pantallas bajas / horizontal ---------- */
@media (max-height:520px) and (orientation:landscape){
  :root{--pad-top:56px;--pad-bottom:14px}
  .script.big{font-size:clamp(1.6rem,7vh,2.6rem)}
  .script.huge{font-size:clamp(2rem,10vh,3.4rem)}
  h1.script{font-size:clamp(2rem,10vh,3.4rem)}
  .intro-lines{font-size:clamp(1.1rem,5vh,1.6rem);max-width:40ch}
  .photo-stage{width:min(100%,760px)}
  .moment{flex-direction:row;gap:24px}
  .frame{flex:0 0 44%;height:100%}
  .meta{flex:1;text-align:left}
  .moment .cap{margin-left:0}
  .ecg-wrap{margin-bottom:8px}
  #ecg{height:64px}
  .chart-card{padding:10px 14px}
  .chart-body{font-size:.74rem;line-height:1.35}
  #s4{padding-top:60px}
}
@media (max-width:360px){
  .subtitle{font-size:1rem}
  .btn{padding:.85rem 1.8rem;font-size:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .grain,.leak{animation:none}
}