/* ============================================================
   Lapin Cherry v10 - "Den" (the day) showpiece, section #den.
   Owner: TASK B (with _src/main-day.html + assets/fx/cherries-day.js).
   Modes (classes on .den, set by the module):
     (none)       no JS: static, stacked copy on a cherry-night panel + SVG coupe
     .den--story  pinned + scroll-scrubbed (colour, clock, slides, 3D)
     .den--static prefers-reduced-motion: stacked copy + one composed frame
     .den--gl     WebGL canvas is live (the SVG composition steps aside)
   Live colours are custom properties written by the module: --den-bg --den-fg --den-fg2 --den-acc
   --den-line --den-line2 --den-stem --den-c1..c4 (clock chrome) --den-night --den-rp (rail).
   Scoped with :where(.chic) (zero specificity), SPEC section 6.
   ============================================================ */

:where(.chic) .den{
  --den-bg:#18050A; --den-fg:#FBF1EE; --den-fg2:rgba(251,241,238,.76); --den-acc:#F2A2B5;
  --den-line:rgba(251,241,238,.18); --den-line2:rgba(251,241,238,.42); --den-stem:#C98E97;
  --den-c1:#FFFFFF; --den-c2:#F4DDE3; --den-c3:#B88B97; --den-c4:#FFF6F8;
  --den-night:1; --den-rp:0; --den-par:0;
  --den-display:var(--lc-display, "Yeseva One", Georgia, "Times New Roman", serif);
  --den-text:var(--lc-text, "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif);
  --den-pad:var(--lc-pad, clamp(20px, 4.45vw, 64px));
  --den-head:var(--lc-head-h, 84px);
  --den-ease:cubic-bezier(.16, 1, .3, 1);
  --den-r:clamp(28px, 4vw, 64px);
  --den-toolbar:calc(100vh - 100svh);   /* mobile browser chrome: lay out inside the small viewport */
  position:relative;
  isolation:isolate;
  background:var(--den-bg);
  color:var(--den-fg);
  border-radius:0 0 var(--den-r) var(--den-r);
  font-family:var(--den-text);
}
:where(.chic) .den--story{
  /* before the first frame is written: the chalk start, so nothing flashes dark */
  --den-bg:#EBD5D0; --den-fg:#231417; --den-fg2:#5B4146; --den-acc:#8C1230;
  --den-line:rgba(35,20,23,.16); --den-line2:rgba(35,20,23,.4); --den-stem:#2B1417;
  --den-c1:#3A0714; --den-c2:#8C1230; --den-c3:#E06C86; --den-c4:#6E0C24;
  --den-night:0;
}

/* ---------- the stage box (pinned in story mode) ---------- */
:where(.chic) .den-pin{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:calc(var(--den-head) + 7vh) var(--den-pad) 12vh;
  background:var(--den-bg);
  border-radius:0 0 var(--den-r) var(--den-r);
}
:where(.chic) .den--story .den-pin{
  height:100vh;
  min-height:0;
  padding:calc(var(--den-head) + 2vh) var(--den-pad) calc(4vh + var(--den-toolbar));
}

/* sky: a morning sun, a sunset and the evening bokeh - transform/opacity only */
:where(.chic) .den-sky{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
:where(.chic) .den-sun{
  position:absolute; left:0; top:0; width:96vmax; height:96vmax; margin:-48vmax 0 0 -48vmax;
  border-radius:50%; opacity:0; will-change:transform, opacity;
}
:where(.chic) .den-sun--day{
  background:radial-gradient(closest-side, rgba(255,249,242,.9), rgba(255,238,228,.46) 36%, rgba(255,236,226,.12) 58%, rgba(255,236,226,0) 72%);
}
:where(.chic) .den-sun--dusk{
  background:radial-gradient(closest-side, rgba(255,186,132,.78), rgba(236,104,112,.42) 34%, rgba(170,34,66,.16) 56%, rgba(150,20,50,0) 72%);
}
:where(.chic) .den:not(.den--story) .den-sun--dusk{ opacity:.5; transform:translate3d(88vw, 96%, 0) scale(.9); }
:where(.chic) .den-bokeh{
  position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s);
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius:50%;
  background:radial-gradient(closest-side, rgba(255,224,204,.95), rgba(255,168,178,.4) 52%, rgba(255,168,178,0));
  opacity:calc(var(--o) * var(--den-night));
  translate:0 calc(var(--den-par) * var(--s) * -.6);
  animation:den-twinkle 5.5s ease-in-out var(--d) infinite alternate;
}
@keyframes den-twinkle{ from{ scale:.82; } to{ scale:1.12; } }

/* WebGL canvas (full-bleed, behind the copy) and the SVG composition */
:where(.chic) .den-gl{
  position:absolute; inset:0; z-index:1; display:block; width:100%; height:100%;
  opacity:0; transition:opacity .9s var(--den-ease); pointer-events:none;
}
:where(.chic) .den--gl .den-gl{ opacity:1; }
:where(.chic) .den-stage,
:where(.chic) .den-fb{
  position:absolute; z-index:1; pointer-events:none;
  top:calc(var(--den-head) + 3vh); bottom:calc(5vh + var(--den-toolbar));
  right:var(--den-pad); width:min(50vw, 860px);
}
:where(.chic) .den-fb{ transition:opacity .6s var(--den-ease), visibility 0s linear .6s; }
:where(.chic) .den-fb svg{ display:block; width:100%; height:100%; overflow:visible; }
:where(.chic) .den--gl .den-fb{ opacity:0; visibility:hidden; }
:where(.chic) .den-fb-bubs circle{ animation:den-bub 3.2s ease-in infinite; }
:where(.chic) .den-fb-bubs circle:nth-child(2){ animation-delay:.8s; }
:where(.chic) .den-fb-bubs circle:nth-child(3){ animation-delay:1.7s; }
:where(.chic) .den-fb-bubs circle:nth-child(4){ animation-delay:2.3s; }
:where(.chic) .den-fb-bubs circle:nth-child(5){ animation-delay:1.2s; }
@keyframes den-bub{ from{ transform:translateY(0); opacity:0; } 20%{ opacity:1; } to{ transform:translateY(-36px); opacity:0; } }

/* ---------- copy ---------- */
:where(.chic) .den-copy{
  position:relative; z-index:3; width:min(46vw, 660px);
  display:flex; flex-direction:column;
}
:where(.chic) .den-kicker{
  margin:0 0 8px; font:600 12px/1.35 var(--den-text); letter-spacing:.2em; text-transform:uppercase;
  color:var(--den-fg2);
}
:where(.chic) .den-clock{ display:none; }
:where(.chic) .den--story .den-clock{
  display:flex; align-items:flex-start; height:1em; margin:.04em 0 .16em -.05em;
  font:400 clamp(76px, 9vw, 160px)/1 var(--den-display); letter-spacing:-.01em;
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1, "tnum" 1;
}
:where(.chic) .den-dg,
:where(.chic) .den-reel > span{
  display:block; height:1em; line-height:1;
  background:linear-gradient(180deg, var(--den-c1) 6%, var(--den-c2) 42%, var(--den-c3) 51%, var(--den-c4) 63%, var(--den-c1) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
:where(.chic) .den-dg--roll{
  background:none; overflow:hidden; padding:0 .01em;
  /* odometer window hugging Yeseva One's lining digits (ink 0.12em-0.86em of the 1em line box);
     clip-path also clips the reel reliably (background-clip:text escapes overflow in Chrome) */
  clip-path:inset(.05em -.08em .05em);
  -webkit-mask-image:linear-gradient(transparent .05em, #000 .12em, #000 .87em, transparent .95em);
  mask-image:linear-gradient(transparent .05em, #000 .12em, #000 .87em, transparent .95em);
}
:where(.chic) .den-reel{ display:block; }
:where(.chic) .den-colon{ padding:0 .02em; animation:den-colon 2s ease-in-out infinite; }
@keyframes den-colon{ 0%, 55%{ opacity:1; } 70%, 90%{ opacity:.3; } 100%{ opacity:1; } }

:where(.chic) .den-slides{ display:grid; gap:clamp(34px, 6vh, 64px); }
:where(.chic) .den--story .den-slides{ gap:0; }
:where(.chic) .den--story .den-slide{ grid-area:1 / 1; }
/* the stacked slides that are off stage do not catch clicks meant for the one on stage (focus still works) */
:where(.chic) .den--story .den-slide:not(.is-on){ pointer-events:none; }
:where(.chic) .den-h{
  margin:0 0 .32em; font:400 clamp(40px, 4.8vw, 84px)/1 var(--den-display); letter-spacing:-.012em;
  color:var(--den-fg);
}
:where(.chic) .den-h em{ color:var(--den-acc); }   /* the Oi sticker itself comes from base.css */
:where(.chic) .den-ln{
  display:block; width:fit-content; overflow:hidden;
  padding:0 .1em .12em 0; margin:0 -.1em -.12em 0;
}
:where(.chic) .den-ln > span{ display:inline-block; }
:where(.chic) .den-t{
  display:block; margin:0 0 12px; font:600 13px/1 var(--den-text); letter-spacing:.16em; color:var(--den-acc);
}
:where(.chic) .den--story .den-t{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0;
}
:where(.chic) .den-p{
  margin:0; max-width:30em; font-size:clamp(16px, 1.22vw, 19px); line-height:1.6; color:var(--den-fg2);
}
:where(.chic) .den-more{
  margin:22px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px;
  font-size:15px; color:var(--den-fg2);
}
:where(.chic) .den-cta{
  display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 22px; border-radius:999px;
  color:#231417; text-decoration:none; font:600 15px/1 var(--den-text); letter-spacing:.01em;
  background:linear-gradient(180deg, #FFFFFF 0%, #F6E3E8 38%, #D7B3BE 50%, #FBEFF2 62%, #FFFFFF 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6), 0 14px 30px -14px rgba(0,0,0,.55);
  transition:transform .5s var(--den-ease), box-shadow .5s var(--den-ease);
}
:where(.chic) .den-cta svg{ width:18px; height:18px; transition:transform .5s var(--den-ease); }
:where(.chic) .den-cta:hover{ transform:translateY(-2px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), 0 20px 36px -14px rgba(0,0,0,.6); }
:where(.chic) .den-cta:hover svg{ transform:translateX(4px); }
:where(.chic) .den-cta:focus-visible{ outline:2px solid var(--den-fg); outline-offset:4px; }

/* rail: 10:00 / 14:00 / 18:00 - buttons jump to the moment */
:where(.chic) .den-rail{ display:none; }
:where(.chic) .den--story .den-rail{
  list-style:none; margin:clamp(22px, 4.5vh, 46px) 0 0; padding:10px 0 0; position:relative;
  display:flex; gap:clamp(18px, 2.4vw, 36px); border-top:1px solid var(--den-line);
}
:where(.chic) .den--story .den-rail::after{
  content:""; position:absolute; left:0; top:-1px; width:100%; height:1px; background:var(--den-acc);
  transform-origin:0 50%; transform:scaleX(var(--den-rp));
}
:where(.chic) .den-stop{
  /* the moments still ahead are working buttons, not disabled ones: they are dimmed with the copy
     colour (--den-fg2, the paragraph's own contrast: 6.6:1 by day), never with opacity */
  display:grid; gap:3px; min-height:44px; padding:6px 0; margin:0; border:0; background:none; cursor:pointer;
  text-align:left; color:var(--den-fg2);   /* no colour transition: it would lag behind the live palette */
  font:600 11.5px/1.2 var(--den-text); letter-spacing:.14em; text-transform:uppercase;
}
:where(.chic) .den-stop b{ font:400 20px/1.1 var(--den-display); letter-spacing:0; text-transform:none; font-variant-numeric:lining-nums; }
:where(.chic) .den-stop.is-on,
:where(.chic) .den-stop:hover{ color:var(--den-fg); }
:where(.chic) .den-stop:focus-visible{ outline:2px solid var(--den-acc); outline-offset:4px; border-radius:6px; }

:where(.chic) .den-hint{
  position:absolute; z-index:3; right:var(--den-pad); bottom:calc(20px + var(--den-toolbar)); margin:0;
  display:none; align-items:center; gap:10px; pointer-events:none;
  font:600 10.5px/1.2 var(--den-text); letter-spacing:.16em; text-transform:uppercase; color:var(--den-fg2);
  opacity:0; transition:opacity .6s var(--den-ease);
}
:where(.chic) .den-hint i{ width:28px; height:1px; background:currentColor; }
:where(.chic) .den--story.den--gl .den-hint{ display:flex; }
:where(.chic) .den--story.den--gl .den-hint.is-on{ opacity:.9; transition-delay:.2s; }

/* ---------- phones ---------- */
@media (max-width: 760px){
  :where(.chic) .den-pin{
    display:block; padding:calc(var(--den-head) + 5vh) 20px 64svh;
  }
  :where(.chic) .den--story .den-pin{ padding:calc(var(--den-head) + 4px) 20px 0; }
  :where(.chic) .den-copy{ width:100%; }
  :where(.chic) .den-stage,
  :where(.chic) .den-fb{
    left:0; right:0; width:auto; top:auto; bottom:calc(8px + var(--den-toolbar)); height:52svh;
  }
  :where(.chic) .den--story .den-stage,
  :where(.chic) .den--story .den-fb{ height:44svh; }
  :where(.chic) .den-kicker{ font-size:11px; letter-spacing:.18em; margin-bottom:4px; }
  :where(.chic) .den--story .den-clock{ font-size:clamp(52px, 15vw, 70px); margin:0 0 6px -.04em; }
  :where(.chic) .den-h{ font-size:clamp(32px, 9.4vw, 42px); margin-bottom:10px; }
  :where(.chic) .den-p{ font-size:15px; line-height:1.55; }
  :where(.chic) .den-more{ margin-top:14px; gap:8px 12px; font-size:14px; }
  :where(.chic) .den-cta{ min-height:44px; padding:0 18px; font-size:14px; }
  :where(.chic) .den--story .den-rail{ margin-top:14px; gap:20px; padding-top:6px; }
  :where(.chic) .den-stop b{ font-size:17px; }
  :where(.chic) .den-hint{ left:20px; right:auto; bottom:calc(14px + var(--den-toolbar)); }
}
@media (max-width: 760px) and (max-height: 700px){
  :where(.chic) .den--story .den-p{ font-size:14px; }
  :where(.chic) .den--story .den-more{ display:none; }
  :where(.chic) .den--story .den-stage,
  :where(.chic) .den--story .den-fb{ height:40svh; }
}
@media (min-width: 761px) and (max-height: 760px){
  :where(.chic) .den--story .den-clock{ font-size:clamp(64px, 12vh, 136px); }
  :where(.chic) .den-h{ font-size:clamp(36px, 7.6vh, 76px); }
}

@media (prefers-reduced-motion: reduce){
  :where(.chic) .den-bokeh, :where(.chic) .den-colon, :where(.chic) .den-fb-bubs circle{ animation:none; }
  :where(.chic) .den-gl, :where(.chic) .den-fb, :where(.chic) .den-cta, :where(.chic) .den-hint{ transition:none; }
}
@media print{
  :where(.chic) .den-sky, :where(.chic) .den-gl, :where(.chic) .den-fb, :where(.chic) .den-hint{ display:none; }
}