/* rescu-leon3d-v2.css — LE²ON 3D scroll hero. Everything is scoped to .l3d.
   Hex fallbacks sit beside every variable, per the site build rules. */
.l3d{
  --l3d-void:#160710; --l3d-abyss:#2B0F1C; --l3d-ox:#481B2E; --l3d-tang:#E7714D;
  --l3d-lav:#BAA5C0; --l3d-fawn:#F9E3DB; --l3d-cer:#DCDFE7;
  --l3d-display:"Bebas Neue","Arial Narrow",Impact,sans-serif;
  --l3d-body:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --l3d-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --l3d-top:72px;      /* height of the site's fixed nav */
  --l3d-bottom:34px;   /* raised on phones to clear the sticky action bar */
  position:relative; background:#160710; background:var(--l3d-void,#160710);
  color:#DCDFE7; color:var(--l3d-cer,#DCDFE7);
  font-family:var(--l3d-body); font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.l3d *{box-sizing:border-box}
.l3d-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; z-index:0;
  background:#2B0F1C;
  background:radial-gradient(120% 70% at 50% 28%, #5a2038 0%, #2B0F1C 38%, #160710 78%)}
.l3d-canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.l3d-no-gl .l3d-canvas{display:none}
.l3d-no-gl .l3d-stage::before{content:""; position:absolute; left:50%; top:30%; width:min(70vw,420px); aspect-ratio:1;
  transform:translate(-50%,-50%); border-radius:50%;
  background:conic-gradient(#E7714D 0 25%,#BAA5C0 0 50%,#DCDFE7 0 75%,#F9E3DB 0); filter:blur(46px); opacity:.42}
.l3d-scrim{position:absolute; inset:auto 0 0 0; height:62%; pointer-events:none;
  background:linear-gradient(to top, #160710 8%, rgba(22,7,16,.82) 42%, rgba(22,7,16,0) 100%)}

.l3d-hud{position:absolute; left:18px; top:calc(var(--l3d-top) + 10px); font:500 10.5px/1.5 var(--l3d-mono);
  letter-spacing:.14em; text-transform:uppercase; color:#BAA5C0; color:var(--l3d-lav,#BAA5C0); pointer-events:none}
.l3d-hud b{color:#E7714D; color:var(--l3d-tang,#E7714D); font-weight:500}
.l3d-meter{display:block; width:96px; height:2px; margin-top:8px; background:rgba(186,165,192,.25); overflow:hidden}
.l3d-meter i{display:block; height:100%; width:100%; background:#E7714D; transform-origin:left; transform:scaleX(0)}

.l3d-rail{position:absolute; right:10px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:6px}
.l3d-rail button{width:40px; height:40px; padding:0; border-radius:50%; border:1px solid rgba(186,165,192,.3);
  background:rgba(22,7,16,.35); color:#BAA5C0; font:400 19px/1 var(--l3d-display); letter-spacing:.02em; cursor:pointer;
  transition:all .3s ease; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px)}
.l3d-rail button sup{font-size:.55em; vertical-align:.55em; margin-left:1px}
.l3d-rail button.on{background:#E7714D; border-color:#E7714D; color:#22080f; transform:scale(1.12)}

.l3d-track{position:relative; z-index:1; margin-top:-100vh; margin-top:-100svh; pointer-events:none}
.l3d-st{min-height:100vh; min-height:100svh; display:flex; align-items:flex-end;
  padding:calc(var(--l3d-top) + 48px) 62px var(--l3d-bottom) 18px}
.l3d-copy{max-width:520px; display:flex; flex-direction:column; gap:12px; pointer-events:auto}
.l3d-eyebrow{font:500 11px/1.4 var(--l3d-mono); letter-spacing:.16em; text-transform:uppercase;
  color:#BAA5C0; color:var(--l3d-lav,#BAA5C0); margin:0}
.l3d-eyebrow b{color:#E7714D; font-weight:500}
.l3d h1,.l3d h2{font-family:var(--l3d-display); font-weight:400; color:#F9E3DB; color:var(--l3d-fawn,#F9E3DB);
  margin:0; line-height:.88; letter-spacing:.01em; text-transform:uppercase; text-wrap:balance}
.l3d h1{font-size:clamp(58px,17vw,128px)}
.l3d h2{font-size:clamp(46px,13vw,96px)}
.l3d h1 em,.l3d h2 em{font-style:normal; color:#E7714D; color:var(--l3d-tang,#E7714D)}
.l3d-lede{margin:0; max-width:44ch; font-size:15px; color:#DCDFE7}
.l3d-lede strong{color:#F9E3DB; font-weight:600}
.l3d-tags{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 0; padding:0; list-style:none}
.l3d-tags a{display:block; font:500 10.5px/1 var(--l3d-mono); letter-spacing:.08em; text-transform:uppercase; color:#F9E3DB;
  text-decoration:none; padding:9px 10px; border:1px solid rgba(186,165,192,.35); border-radius:4px; background:rgba(43,15,28,.5);
  transition:border-color .2s ease, background .2s ease}
.l3d-tags a:hover{border-color:#E7714D; background:rgba(72,27,46,.8)}
.l3d-acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}
.l3d-btn{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:999px;
  font:600 13px/1 var(--l3d-body); letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:transform .2s ease, background .2s ease, border-color .2s ease}
.l3d-btn.hot{background:#E7714D; color:#22080f}
.l3d-btn.hot:hover{transform:translateY(-2px); background:#f08462}
.l3d-btn.ghost{background:rgba(72,27,46,.45); color:#F9E3DB; border-color:rgba(186,165,192,.45)}
.l3d-btn.ghost:hover{border-color:#BAA5C0}
.l3d a:focus-visible,.l3d button:focus-visible{outline:2px solid #F9E3DB; outline-offset:3px}
.l3d-fine{margin:6px 0 0; font-size:11.5px; line-height:1.5; color:rgba(220,223,231,.62); max-width:52ch}
.l3d-cue{font:500 10.5px/1 var(--l3d-mono); letter-spacing:.16em; text-transform:uppercase; color:#BAA5C0; margin:6px 0 0;
  display:flex; align-items:center; gap:10px}
.l3d-cue::before{content:""; width:1px; height:26px; background:linear-gradient(#E7714D,transparent); animation:l3d-drop 1.8s ease-in-out infinite}
@keyframes l3d-drop{0%{transform:scaleY(.2);transform-origin:top}60%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(.2);transform-origin:bottom}}

@media (max-width:859px){ .l3d{--l3d-bottom:96px} }
@media (min-width:860px){
  .l3d-scrim{height:100%; inset:0 auto 0 0; width:58%;
    background:linear-gradient(to right, rgba(22,7,16,.9) 0%, rgba(22,7,16,.55) 55%, rgba(22,7,16,0) 100%)}
  .l3d-hud{left:40px}
  .l3d-rail{right:28px; gap:8px}
  .l3d-st{align-items:center; padding:calc(var(--l3d-top) + 40px) 120px 60px max(40px,7vw)}
  .l3d-lede{font-size:16.5px}
}
@media (prefers-reduced-motion:reduce){ .l3d-cue::before{animation:none} .l3d-btn,.l3d-rail button{transition:none} }

/* inside rescu.life: neutralise site-wide element styles */
.l3d h2{max-width:none}
.l3d-tags li{margin:0;padding:0}
.l3d-tags li::before{content:none}
.l3d-note{margin:4px 0 0;font-size:12.5px;line-height:1.55;color:rgba(220,223,231,.75);max-width:52ch}
.l3d-note a{color:#BAA5C0}