/* =========================================================================
   ListFlow — Intro/Loading do mascote (DADO REAL do SVG → glow/carga → explosão → portal)
   Arquivo dedicado. test == prod: harness (loading-proto.html) e partial EJS
   consomem ESTE css. O SVG é inline (intro-mascote.js) e os paths do dado são
   tagueados por índice (.lf-die-rim / .lf-die-face). Glow via overlay calibrável.
   ========================================================================= */

:root{
  --lf-orange:#ff4d1c; --lf-red:#e01a0e; --lf-red-d:#b11008;
  --lf-ink:#0a0b0f; --lf-ink2:#15161d;
  /* centro/tamanho do dado dentro do mascote (medido no SVG real; alinha o glow) */
  --die-x:43%; --die-y:59%; --die-size:92px;
}

html.lf-intro-lock, body.lf-intro-lock{overflow:hidden !important;height:100%;}

/* ===== overlay que cobre tudo (vira "íris") ===== */
#lf-intro{
  position:fixed; inset:0; z-index:99990; display:grid; place-items:center;
  background:radial-gradient(900px 900px at var(--die-x) var(--die-y),#1b1c24,var(--lf-ink) 62%);
  --r:0px;
  -webkit-mask:radial-gradient(circle var(--r) at var(--dx,50%) var(--dy,58%),transparent 0,transparent 85%,#000 100%);
          mask:radial-gradient(circle var(--r) at var(--dx,50%) var(--dy,58%),transparent 0,transparent 85%,#000 100%);
  will-change:mask,opacity;
}
#lf-intro.is-fade{transition:opacity .5s ease; opacity:0;}

.lf-intro-bg{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(1200px 700px at 70% -10%,rgba(255,77,28,.10),transparent 60%); opacity:.9;}
.lf-intro-bg.has-img{background-image:url('/assets/bg-loading-blur.png'); background-size:cover; background-position:center; opacity:.16; filter:blur(2px);}
.lf-intro-vignette{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%,transparent 55%,rgba(0,0,0,.6) 100%);}

/* ===== palco ===== */
.lf-intro-stage{position:relative; display:grid; justify-items:center;}
.lf-intro-mascot{
  position:relative; width:min(78vw,360px);
  filter:drop-shadow(0 18px 44px rgba(0,0,0,.6));
  animation:lf-mascot-in .7s cubic-bezier(.22,1,.36,1) both;
}
.lf-mascot-mount{display:block; width:100%;}
.lf-mascot-mount > svg{display:block; width:100%; height:auto;}
@keyframes lf-mascot-in{from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none}}

/* ===== DADO REAL (paths tagueados via JS) ===== */
.lf-die-rim{
  transform-box:fill-box; transform-origin:center;
  filter:drop-shadow(0 0 5px rgba(255,40,20,.6));
  animation:lf-rim-pulse 1.5s ease-in-out infinite;
}
@keyframes lf-rim-pulse{
  0%,100%{filter:drop-shadow(0 0 4px rgba(255,40,20,.5)); transform:scale(1);}
  50%    {filter:drop-shadow(0 0 13px rgba(255,90,35,.95)); transform:scale(1.025);}
}
.lf-die-face{transform-box:fill-box; transform-origin:center; transition:filter .25s ease;}

/* glow overlay no centro do dado (calibrável por --die-x/y/size) */
.lf-die-glow{
  position:absolute; left:var(--die-x); top:var(--die-y); transform:translate(-50%,-50%);
  width:calc(var(--die-size)*1.75); height:calc(var(--die-size)*1.75); border-radius:50%;
  pointer-events:none; z-index:2; mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,95,45,.55),rgba(224,26,14,.22) 45%,transparent 70%);
  animation:lf-glow-pulse 1.5s ease-in-out infinite;
}
@keyframes lf-glow-pulse{
  0%,100%{opacity:.32; transform:translate(-50%,-50%) scale(.9);}
  50%    {opacity:.66; transform:translate(-50%,-50%) scale(1.06);}
}

/* ===== CARGA (energiza antes de explodir) ===== */
#lf-intro.is-charging .lf-die-rim{animation:lf-rim-charge var(--chargeMs,300ms) ease-in forwards;}
@keyframes lf-rim-charge{
  from{filter:drop-shadow(0 0 10px rgba(255,90,35,.9)); transform:scale(1.03);}
  to  {filter:drop-shadow(0 0 30px rgba(255,180,70,1)) brightness(1.7); transform:scale(1.16);}
}
#lf-intro.is-charging .lf-die-face{filter:brightness(1.55) saturate(1.35);}
#lf-intro.is-charging .lf-die-glow{animation:lf-glow-charge var(--chargeMs,300ms) ease-in forwards;}
@keyframes lf-glow-charge{from{opacity:.7;} to{opacity:1; transform:translate(-50%,-50%) scale(1.55);}}

/* wordmark */
.lf-intro-brand{margin-top:24px; font:800 15px/1 Inter,system-ui,sans-serif; letter-spacing:4px; opacity:0; animation:lf-fadein .6s .3s forwards;}
.lf-intro-brand .o{color:var(--lf-orange);}
@keyframes lf-fadein{to{opacity:.88}}

/* flash + canvas (siblings, NÃO mascarados) */
#lf-intro-flash{position:fixed; inset:0; z-index:99992; pointer-events:none; opacity:0; mix-blend-mode:screen;
  background:radial-gradient(circle at var(--dx,50%) var(--dy,58%),#fff 0,#ffd9a8 18%,rgba(255,120,40,.6) 38%,transparent 60%);}
#lf-intro-fx{position:fixed; inset:0; z-index:99991; pointer-events:none;}

/* skip */
.lf-intro-skip{position:fixed; right:18px; bottom:18px; z-index:99993; cursor:pointer;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:#cfd2da;
  font:600 12px/1 Inter,system-ui,sans-serif; letter-spacing:1px; padding:9px 14px; border-radius:9px;
  backdrop-filter:blur(4px); transition:background .2s,color .2s,opacity .3s;}
.lf-intro-skip:hover{background:rgba(255,255,255,.12); color:#fff;}

@media (prefers-reduced-motion: reduce){
  .lf-die-rim,.lf-die-glow,.lf-intro-mascot{animation:none !important;}
}