/* ============================================================
   LUMEA · 23 — Overlays über der 3D-Welt
   ============================================================ */

:root{
  --bone:#F2E9DC;
  --bone-dim:rgba(242,233,220,.72);
  --gold:#D9B36A;
  --acc:#D9B36A;   /* wird von main.js je Raum gesetzt */
  --bg:#1B1738;    /* dito */
  --shadow:0 2px 18px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.6);
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{
  font-family:"Manrope",system-ui,sans-serif;
  font-weight:300;
  color:var(--bone);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  height:100%;
  overscroll-behavior:none;
  touch-action:none;
}
html{height:100%}

#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
#overlay{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}

.noscript{position:fixed;inset:0;display:grid;place-items:center;z-index:9;background:#1B1738;font-size:1.1rem}

/* Filmkorn */
.grain{
  position:fixed;inset:0;z-index:4;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Fortschritt: Regenbogen */
.progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:6;
  background:linear-gradient(90deg,#E0566A,#E6A23A,#E2CE5C,#5CC082,#5AA7D6,#9B7BD8,#D06BB0);
  box-shadow:0 0 12px rgba(255,255,255,.3);
}

.serif{font-family:"Cormorant Garamond",Georgia,serif;font-weight:300}
em{font-style:italic;color:var(--acc)}

/* ---------- Beat-Overlays (Grundzustand: unsichtbar) ---------- */
.beat{
  position:absolute;
  opacity:0;visibility:hidden;
  will-change:opacity,transform;
  text-shadow:var(--shadow);
}
/* Dunkle Glasfläche hinter Texten, damit sie auf hellen Räumen lesbar bleiben */
.scrim{
  background:rgba(12,9,26,.46);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  box-shadow:0 20px 60px -20px rgba(0,0,0,.5);
}
.beat.center.scrim{padding:2.4rem 5vw 2.6rem}
.beat.center{
  left:50%;top:50%;
  width:min(92vw,640px);
  transform:translate(-50%,-50%);
  text-align:center;
  padding:0 4vw;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.beat .small{
  font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--acc);font-weight:400;
}
.beat h2{
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(2.3rem,10vw,5rem);line-height:1.04;letter-spacing:.01em;
  margin:.45em 0 .35em;
}
.beat .rule{
  width:72px;height:2px;border-radius:1px;margin:1.2rem auto 1.4rem;opacity:.95;
  background:linear-gradient(90deg,#E0566A,#E6A23A,#E2CE5C,#5CC082,#5AA7D6,#9B7BD8,#D06BB0);
}
.beat p{color:var(--bone-dim);font-size:1.05rem;max-width:34ch}
.beat .msg{
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(1.3rem,5vw,1.9rem);line-height:1.45;color:var(--bone);
  text-align:left;max-width:30ch;
}
.beat .msg + .msg{margin-top:1.1em}

/* Prolog */
.b-prolog h1{
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(4.6rem,24vw,10.5rem);line-height:.9;letter-spacing:.02em;
  margin:.3em 0 .2em;white-space:nowrap;
}
.b-prolog h1 .l{
  display:inline-block;opacity:0;
  animation:letter 1.3s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay:calc(.8s + var(--i)*.14s);
}
@keyframes letter{
  from{opacity:0;transform:translateY(.35em) scale(1.15);filter:blur(14px)}
  60%{filter:blur(0)}
  to{opacity:1;transform:none;filter:none}
}
.b-prolog .small,.b-prolog .date,.b-prolog .cue,.b-prolog .countlabel{
  opacity:0;animation:fadeup 1.4s cubic-bezier(.2,.7,.2,1) forwards
}
.b-prolog .small{animation-delay:.3s}
.b-prolog .countlabel{animation-delay:2.6s;font-size:.78rem;letter-spacing:.4em;text-transform:uppercase;color:var(--bone-dim);margin-top:.5rem}
.b-prolog .date{animation-delay:3.4s;margin-top:2rem;font-size:.9rem;letter-spacing:.14em;color:var(--bone-dim)}
.b-prolog .cue{animation-delay:4s}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* Die 23: groß, golden, glühend */
.b-prolog .count{
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(7rem,36vw,14rem);line-height:.95;color:var(--gold);
  margin-top:.1em;
  opacity:0;animation:fadeup 1s 2.2s cubic-bezier(.2,.7,.2,1) forwards;
}
.b-prolog .count.done{opacity:1;animation:glowpulse 3.2s ease-in-out infinite}
@keyframes glowpulse{
  0%,100%{text-shadow:0 0 18px rgba(217,179,106,.25)}
  50%{text-shadow:0 0 42px rgba(217,179,106,.7),0 0 90px rgba(217,179,106,.3)}
}
.b-prolog .cue{
  position:static;margin-top:3.2rem;
  background:none;border:0;color:var(--bone-dim);cursor:pointer;pointer-events:auto;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font:inherit;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;
}
.cueline{position:relative;display:block;width:1px;height:44px;background:linear-gradient(var(--gold),transparent)}
.cueline::before{
  content:"";position:absolute;top:0;left:-1.5px;width:4px;height:12px;border-radius:2px;
  background:var(--gold);filter:blur(1px);
  animation:cuedrop 2.2s ease-in-out infinite;
}
@keyframes cuedrop{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(36px);opacity:0}}

/* Kapitel */
.b-chapter{overflow:visible}
.b-chapter .ghost{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(16rem,70vw,30rem);line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb, var(--acc) 45%, transparent);
  z-index:-1;pointer-events:none;
}
.b-chapter .years{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  color:var(--bone-dim);font-size:1.25rem;letter-spacing:.06em;
}

/* Foto-Story: Position setzt main.js */
.b-photo{
  width:min(88vw,40ch);
  left:0;top:0;
  transform:translate(0,0);
  padding:1rem 1.2rem 1.1rem;
}
.b-photo .scene{
  display:block;
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--acc);font-weight:400;margin-bottom:.5rem;
}
.b-photo p{font-size:.98rem;line-height:1.7;color:var(--bone);max-width:none}
.b-photo.mobile{left:5vw;right:5vw;width:auto;text-align:center;padding:.8rem 1rem .9rem}
.b-photo.mobile p{font-size:.92rem;line-height:1.6}
.b-photo.side-r{text-align:left}
.b-photo.side-l{text-align:right}

/* Zwischentexte */
.b-line p{
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(1.7rem,7vw,3rem);line-height:1.25;color:var(--bone);
  max-width:22ch;
}

/* Epilog */
.b-epilog .sign{
  margin-top:2.2rem;font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:1.5rem;color:var(--acc);
}

/* Geschenk */
.b-gift{pointer-events:auto}
.giftbtn{
  position:relative;
  margin-top:2.2rem;
  width:158px;height:158px;border-radius:50%;
  border:1px solid var(--gold);
  background:radial-gradient(circle at 50% 32%, rgba(217,179,106,.30), rgba(20,16,30,.55) 72%);
  color:var(--gold);
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:1.45rem;letter-spacing:.05em;
  cursor:pointer;
  animation:btnpulse 2.6s ease-in-out infinite;
  transition:transform .18s cubic-bezier(.2,.7,.2,1);
  -webkit-tap-highlight-color:transparent;
  text-shadow:none;
}
.giftbtn::after{
  content:"";position:absolute;inset:-12px;border-radius:50%;
  background:conic-gradient(#E0566A,#E6A23A,#E2CE5C,#5CC082,#5AA7D6,#9B7BD8,#D06BB0,#E0566A);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), black calc(100% - 2px));
  opacity:.6;animation:spin 9s linear infinite;pointer-events:none;
}
@keyframes spin{to{transform:rotate(360deg)}}
.giftbtn:hover{transform:scale(1.05)}
.giftbtn:active{transform:scale(.9)}
.giftbtn.pop{animation:btnpulse 2.6s ease-in-out infinite, btnpop .5s cubic-bezier(.2,.7,.2,1)}
@keyframes btnpulse{
  0%,100%{box-shadow:0 0 22px rgba(217,179,106,.25)}
  50%{box-shadow:0 0 55px rgba(217,179,106,.6),0 0 130px rgba(217,179,106,.25)}
}
@keyframes btnpop{0%{transform:scale(.85)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
.gifthint{margin-top:1.4rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-dim)}
.giftmsg{
  margin-top:2.6rem;
  opacity:0;transform:scale(.7);filter:blur(12px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1),filter 1.1s ease;
}
.giftmsg.boom{opacity:1;transform:none;filter:none}
.giftmsg .giftnum{
  font-family:"Cormorant Garamond",serif;font-weight:300;
  font-size:clamp(6rem,30vw,10rem);line-height:1;color:var(--gold);
  animation:glowpulse 3.2s ease-in-out infinite;
}
.giftmsg .giftline{
  margin-top:.4rem;font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:clamp(1.3rem,5vw,1.9rem);color:var(--bone);
}

/* Abspann */
.b-credits{
  color:var(--bone-dim);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  line-height:2.3;
}
.b-credits b{font-weight:400;color:var(--bone)}

/* Desktop-Feinheiten */
@media(min-width:900px){
  .beat.center{width:min(80vw,720px)}
  .b-line p{font-size:2.6rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .b-prolog h1 .l,.b-prolog .small,.b-prolog .date,.b-prolog .cue,.b-prolog .count,.b-prolog .countlabel{opacity:1;transform:none;filter:none}
  .giftmsg{opacity:1;transform:none;filter:none}
}

/* ---------- Foto groß ansehen ---------- */
.hit{position:absolute;pointer-events:auto;cursor:zoom-in;background:transparent;border:0;padding:0;border-radius:4px;-webkit-tap-highlight-color:transparent}
#lb{position:fixed;inset:0;z-index:8;background:rgba(8,6,16,.975);display:none;align-items:center;justify-content:center;touch-action:none;overflow:hidden}
#lb.open{display:flex}
#lb img{max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);user-select:none;-webkit-user-drag:none;will-change:transform;cursor:grab;box-shadow:0 30px 90px -30px rgba(0,0,0,.8)}
#lb .lbclose,#bonus .lbclose{
  position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(0,0,0,.4);color:var(--bone);font:1.5rem/1 "Manrope",sans-serif;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
#lb .lbcap{
  position:absolute;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));text-align:center;
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);pointer-events:none;text-shadow:var(--shadow);
}

/* ---------- Highlights: Sterne, Kerzen, Raum danach, Bonus ---------- */
.beat.center.top{top:calc(10px + env(safe-area-inset-top));transform:translate(-50%,0);padding:1.1rem 5vw 1.2rem;width:min(92vw,560px)}
.beat.center.top h2{font-size:clamp(1.8rem,7.5vw,3.2rem);margin:.25em 0 .15em}
.b-stars .sub{font-size:.85rem;color:var(--bone-dim);margin-top:.2rem}
.b-stars .counter{margin-top:.5rem;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc)}
.starhit{
  position:absolute;left:0;top:0;width:48px;height:48px;border-radius:50%;
  pointer-events:auto;background:transparent;border:0;padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.starhit.read{cursor:default}
#memo{
  position:absolute;left:5vw;right:5vw;bottom:calc(18px + env(safe-area-inset-bottom));
  max-width:560px;margin:0 auto;padding:1rem 1.2rem 1.1rem;text-align:center;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);
}
#memo.show{opacity:1;transform:none;pointer-events:auto}
#memo .memotext{
  font-family:"Cormorant Garamond",serif;font-weight:300;font-style:italic;
  font-size:clamp(1.2rem,4.6vw,1.6rem);line-height:1.4;color:var(--bone);text-shadow:var(--shadow);
}
.memovid{
  margin-top:.8rem;padding:.5rem 1.1rem;border-radius:999px;border:1px solid var(--acc);
  background:rgba(0,0,0,.3);color:var(--acc);font:inherit;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;
}
.cakehit{position:absolute;pointer-events:auto;background:transparent;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.b-candles .candletitle{transition:opacity .5s}
.futlabel{
  position:absolute;left:0;top:0;pointer-events:none;
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);text-shadow:var(--shadow);white-space:nowrap;
}
#bonus{position:fixed;inset:0;z-index:8;background:rgba(8,6,16,.9);display:none;align-items:center;justify-content:center;padding:6vh 5vw}
#bonus.open{display:flex}
#bonus .bonuscard{width:min(92vw,560px);max-height:88vh;overflow:auto;padding:2rem 6vw 2.2rem;text-align:center}
#bonus .bonuscard h2{font-size:clamp(2rem,8vw,3.4rem);margin:.3em 0 .5em}
#bonus .bline{font-family:"Cormorant Garamond",serif;font-size:clamp(1.15rem,4.4vw,1.5rem);line-height:1.45;color:var(--bone);margin:.6em auto;max-width:34ch}
#bonus .bstrip{display:flex;gap:.6rem;overflow-x:auto;margin-top:1.4rem;padding-bottom:.4rem}
#bonus .bstrip img{height:150px;border-radius:6px;flex:none}
#lb video{max-width:calc(100vw - 24px);max-height:calc(100vh - 24px);background:#000}

/* ---------- Zeitleiste oben: antippen/ziehen springt zur Stelle ---------- */
#scrub{position:fixed;top:0;left:0;right:0;height:26px;z-index:7;touch-action:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#scrub .tick{position:absolute;top:0;width:1px;height:7px;background:rgba(242,233,220,.55);transform:translateX(-.5px)}
#scrub .knob{
  position:absolute;top:1px;width:12px;height:12px;border-radius:50%;background:var(--bone);
  transform:translate(-50%,-50%) scale(0);box-shadow:0 0 12px rgba(255,255,255,.6);
  transition:transform .18s cubic-bezier(.2,.7,.2,1);
}
#scrub .tip{
  position:absolute;top:14px;transform:translateX(-50%);
  padding:.35rem .7rem;border-radius:999px;
  background:rgba(12,9,26,.8);border:1px solid rgba(255,255,255,.12);
  font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bone);white-space:nowrap;
  opacity:0;transition:opacity .18s;pointer-events:none;
}
#scrub.active .knob{transform:translate(-50%,-50%) scale(1)}
#scrub.active .tip{opacity:1}
#scrub.active ~ .progress,#scrub.active + .progress{height:4px}
@media(hover:hover){#scrub:hover .knob{transform:translate(-50%,-50%) scale(1)}#scrub:hover .tip{opacity:1}}