/* Energy Academy Project — "The Descent" (home only)
   Fixed WebGL water column behind the document; each stage lives at a depth. */

body.home{background:#05101c}

/* ---------- backdrop layers ---------- */
#scene{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;display:block;
  touch-action:pan-y;
}
.sea-gradient{
  position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,#0f3a63 0%,#0d2b4c 22%,#0a1e36 48%,#071627 72%,#040d18 100%);
}
.vignette{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 78% at 50% 46%,transparent 38%,rgba(2,7,13,.62) 100%);
}
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;
  background-image:radial-gradient(circle at 1px 1px,#9fc4e6 1px,transparent 0);
  background-size:3px 3px;mix-blend-mode:overlay;
}

/* ---------- depth HUD ---------- */
.hud{
  position:fixed;z-index:30;pointer-events:none;
  left:max(16px,calc((100vw - 1500px)/2));
  top:50%;transform:translateY(-50%);
  display:grid;grid-template-columns:auto auto;gap:0 14px;align-items:center;
  color:var(--ink);
}
.hud__ruler{
  position:relative;width:78px;height:320px;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 16%,#000 84%,transparent);
}
.hud__ticks{position:absolute;left:0;top:0;width:100%;will-change:transform}
.hud__tick{
  position:absolute;left:0;height:1px;background:var(--line-strong);
}
.hud__tick--minor{width:11px;opacity:.55}
.hud__tick--major{width:22px;background:rgba(212,170,90,.75)}
.hud__tick span{
  position:absolute;left:28px;top:-.62em;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.04em;
  color:var(--ink-dim);white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.9);
}
.hud__ruler::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;
  background:rgba(160,196,230,.22);
}
.hud__needle{
  position:absolute;left:0;top:50%;width:36px;height:1px;
  background:var(--gold-hot);box-shadow:0 0 10px rgba(242,172,42,.8);
}
.hud__needle::after{
  content:"";position:absolute;right:-4px;top:-3px;
  width:7px;height:7px;background:var(--gold-hot);transform:rotate(45deg);
}
.hud__read{display:flex;align-items:baseline;gap:4px}
.hud__num{
  font-family:var(--font-mono);font-weight:500;
  font-size:clamp(1.3rem,2.1vw,1.75rem);
  letter-spacing:-.02em;
  color:var(--ink);
  text-shadow:0 2px 18px rgba(0,0,0,.8);
  font-variant-numeric:tabular-nums;
}
.hud__unit{font-family:var(--font-mono);font-size:.82rem;color:var(--gold)}
.hud__label{
  grid-column:2;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:2px;
}
@media (max-width:1100px){
  .hud{left:14px;gap:0 10px}
  .hud__ruler{width:40px;height:200px}
  .hud__tick span{left:24px;font-size:.55rem}
}
@media (max-width:1200px){
  /* below this width the vertical ruler would sit on the content column, so
     the HUD becomes an instrument strip across the bottom:
     opaque chrome instead of a floating chip landing on top of headings.
     The ruler is the same element, rotated a quarter turn. */
  .hud{
    left:0;right:0;bottom:0;top:auto;transform:none;
    display:flex;align-items:center;gap:10px;
    height:calc(52px + env(safe-area-inset-bottom,0px));
    padding:0 14px env(safe-area-inset-bottom,0px);
    background:rgba(4,11,20,.94);
    border-top:1px solid var(--line-strong);
    backdrop-filter:blur(10px);
  }
  .hud__ruler{
    width:18px;height:132px;flex:0 0 auto;
    margin:0 57px;                 /* reserves the rotated footprint */
    transform:rotate(-90deg);transform-origin:center;
  }
  .hud__ruler::before{display:none}
  .hud__tick span{display:none}
  .hud__tick--major{width:13px}
  .hud__tick--minor{width:7px}
  .hud__needle{width:14px;box-shadow:none}
  .hud__read{margin-left:auto}
  .hud__num{font-size:1.05rem}
  .hud__label{font-size:.52rem;letter-spacing:.14em;margin:0;grid-column:auto}
}
@media (max-width:1200px){
  body.home{padding-bottom:52px}
}

/* On a phone the hero card used to cover the whole screen and the footage
   only showed at the edges. The card now starts transparent at the top, so
   the film reads, and the type carries its own shadow instead of a slab. */
@media (max-width:700px){
  /* The card has to clear the HUD strip, so it stays centred and the type
     shrinks instead of being pushed down — a clipped CTA is worse than a
     covered sea. The footage reads through a card that starts fully
     transparent and only gains weight under the headline. */
  /* the short lead frees up ~2 lines, which go to the footage at the top.
     The offset is capped against viewport height so a shorter phone falls
     back to a smaller push instead of clipping the CTA again. */
  .stage--hero .stage__inner{
    align-items:flex-start;
    padding-top:clamp(72px,calc(100vh - 700px),150px);
    padding-bottom:84px;
  }
  /* two-class selectors on purpose: the base .hero-lead--brief{display:none}
     sits LATER in this file than this media query, so a single-class rule
     here would lose to it on order and hide both leads */
  .panel--hero .hero-lead--full{display:none}
  .panel--hero .hero-lead--brief{display:block}
  .panel--hero{
    background:linear-gradient(180deg,
      rgba(4,12,22,0) 0%,
      rgba(4,12,22,.26) 20%,
      rgba(3,10,20,.70) 46%,
      rgba(3,9,18,.88) 100%);
    border-color:transparent;
    box-shadow:none;
    backdrop-filter:blur(2px) saturate(115%);
    padding:18px 20px 22px;
  }
  .panel--hero::before{display:none}
  .panel--hero h1{font-size:clamp(1.95rem,8.2vw,2.45rem)}
  .panel--hero .hero-lead{font-size:.97rem}
  .panel--hero h1,
  .panel--hero .hero-lead,
  .panel--hero .hero-tagline,
  .panel--hero .scroll-cue{
    text-shadow:0 2px 16px rgba(0,0,0,.92), 0 1px 3px rgba(0,0,0,.85);
  }
  .hero-logo{width:116px;margin-bottom:12px}
  .hero-cta{gap:10px;margin-top:20px}
  .hero-cta .btn{padding:11px 18px;font-size:.88rem}
  .scroll-cue{margin-top:18px}
}

/* ---------- stages ---------- */
.stage{
  position:relative;z-index:3;
  min-height:185vh;
  padding-inline:var(--pad);
}
.stage--hero{min-height:135vh}
.stage__inner{
  position:sticky;top:0;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  min-height:100vh;
  display:flex;align-items:center;
  padding-block:clamp(90px,14vh,150px);
}
.stage--right .stage__inner{justify-content:flex-end}
.stage--center .stage__inner{justify-content:center}

.panel{
  position:relative;
  width:100%;max-width:580px;
  background:linear-gradient(165deg,rgba(11,27,46,.74),rgba(5,13,24,.82));
  border:1px solid var(--line);
  border-radius:18px;
  padding:clamp(24px,3.2vw,38px);
  backdrop-filter:blur(14px) saturate(125%);
  box-shadow:0 40px 80px -50px rgba(0,0,0,.95);
  will-change:transform,opacity;
}
.panel--wide{max-width:820px}
.panel--hero{
  max-width:700px;
  background:linear-gradient(165deg,rgba(11,27,46,.6),rgba(5,13,24,.72));
}
.panel::before{
  content:"";position:absolute;left:0;top:26px;width:2px;height:46px;
  background:linear-gradient(180deg,var(--gold-hot),transparent);
  border-radius:2px;
}
.panel p{color:var(--ink-dim)}
.panel h2{margin-bottom:.35em}

.depth-chip{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(212,170,90,.35);border-radius:999px;
  padding:5px 12px;margin-bottom:16px;
}
.depth-chip b{color:var(--ink);font-weight:500}
.not-to-scale{
  display:block;margin-top:14px;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* hero */
.hero-logo{width:clamp(180px,26vw,260px);margin-bottom:22px}
.hero-tagline{
  font-family:var(--font-mono);
  font-size:clamp(.66rem,1.5vw,.78rem);letter-spacing:.34em;
  color:var(--ink-dim);margin:0 0 18px;
}
.hero-tagline b{color:var(--gold);font-weight:400;margin:0 6px}
.panel--hero h1{margin-bottom:.4em}
.panel--hero h1 em{font-style:normal;color:var(--gold-hot)}
.hero-lead{font-size:1.1rem;max-width:52ch}
.hero-lead--brief{display:none}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.scroll-cue{
  display:flex;align-items:center;gap:12px;margin-top:30px;
  font-family:var(--font-mono);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);
}
.scroll-cue::before{
  content:"";width:1px;height:34px;
  background:linear-gradient(180deg,var(--gold-hot),transparent);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{opacity:0;transform:translateY(-8px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* territory grid (the hub, -300 m) */
.territories{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.territories li{
  background:rgba(8,19,33,.85);padding:16px 14px;
  flex:1 1 124px;min-width:0;
}
.territories b{
  display:block;font-family:var(--font-display);font-size:.98rem;font-weight:600;
}
.territories span{
  display:block;margin-top:5px;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}
.phases{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.phases li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.phase-tag{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line-strong);border-radius:999px;padding:4px 10px;color:var(--ink-faint);
  white-space:nowrap;
}
.phase-tag--now{border-color:rgba(242,172,42,.6);color:var(--gold-hot)}
.phases b{display:block;font-family:var(--font-display);font-size:1rem}
.phases p{margin:3px 0 0;font-size:.92rem}

/* episode card inside a panel */
.ep-inline{display:grid;gap:18px;grid-template-columns:1fr}
.panel--wide .ep-inline{grid-template-columns:1fr 1fr}
@media (max-width:760px){.panel--wide .ep-inline{grid-template-columns:1fr}}

/* ---------- seabed floor (everything at -3,000 m) ---------- */
/* the top of the floor stays clear so the seabed, manifold and trees
   are actually visible when the descent arrives */
.floor{
  position:relative;z-index:3;
  /* the clear band is the arrival: when the HUD reads "-3,000 m · SEABED"
     the visitor has to actually see the bed. The whole ramp shifts with it,
     and the content offset shifts too — moving only the first stop would
     leave the Courses heading on a thinner scrim than before. */
  background:linear-gradient(180deg,
    rgba(3,9,16,0) 0,
    rgba(3,9,16,0) 34vh,
    rgba(3,9,16,.45) 58vh,
    rgba(2,7,12,.84) 90vh,
    rgba(2,6,10,.94) 130vh,
    #020609 100%);
  padding-top:clamp(60px,38vh,430px);
}
.floor .section--alt{background:rgba(6,15,26,.7)}
.floor-mark{
  display:flex;align-items:center;gap:16px;
  max-width:var(--maxw);margin:0 auto 10px;padding-inline:var(--pad);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);
}
.floor-mark::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(212,170,90,.5),transparent)}

/* ---------- static / no-webgl fallback ---------- */
.stage__still{display:none}
html.static-mode #scene{display:none}
html.static-mode .stage__still{
  display:block;position:absolute;inset:0;overflow:hidden;z-index:-1;
}
html.static-mode .stage__still img{
  position:sticky;top:0;
  width:100%;height:100vh;object-fit:cover;object-position:58% 52%;
  opacity:.15;filter:blur(3px) saturate(.8);
  transform:scale(1.5);transform-origin:center;
}
html.static-mode .stage__still::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,var(--g1,#0d2b4c),var(--g2,#071627));
  opacity:.8;
}
html.static-mode .stage{
  background:linear-gradient(180deg,var(--g1,#0d2b4c),var(--g2,#071627));
}
/* the hero keeps its poster frame: an opaque stage background here would
   paint straight over the footage layer, which is all the fallback has */
html.static-mode .stage--hero{background:none}
html.static-mode .stage--hero .stage__still{display:none}
html.static-mode .scroll-cue::before{animation:none}
html.static-mode .hud__ticks{transition:none}
html.static-mode .vignette{background:radial-gradient(120% 78% at 50% 46%,transparent 45%,rgba(2,7,13,.5) 100%)}

@media (prefers-reduced-motion:reduce){
  .scroll-cue::before{animation:none}
  .panel{transition:none}
}

/* keep panels visible if GSAP never loads */
.panel{opacity:1}

/* ============================================================
   FOOTAGE LAYER — real film in the hero, video behind the
   seabed sections. The hero sits above the WebGL canvas and is
   handed over to the 3D dive as the descent starts.
   ============================================================ */
.hero-media{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  opacity:1;
  will-change:opacity,filter;
  transform:translateZ(0);
}
.hero-media__video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.12) contrast(1.08);
}
/* grade so the headline always reads over moving footage */
.hero-media__grade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,12,22,.62) 0%,rgba(4,12,22,.10) 32%,
                    rgba(4,12,22,.42) 68%,rgba(3,9,16,.95) 100%),
    radial-gradient(130% 85% at 26% 48%,rgba(5,14,26,.62),transparent 62%);
}
/* the waterline moment: sun through the swell. Square source (1024²),
   so it is cropped to the frame with cover, never stretched. */
.hero-media__dive{
  position:absolute;inset:0;
  background-image:
    linear-gradient(180deg,rgba(4,14,26,.20),rgba(3,12,24,.42) 58%,rgba(3,10,20,.84)),
    url(../assets/texturas/web/bg_superficie.jpg);
  background-size:cover,cover;
  background-position:center 44%,center 44%;
  background-repeat:no-repeat;
  opacity:0;
  transform-origin:center;
  will-change:opacity,transform;
}

/* section footage */
.sec-media{
  position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;
}
.sec-media video,
.sec-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.40;filter:saturate(.9) contrast(1.05);
}
.sec-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(3,10,18,.92) 0%,rgba(3,10,18,.62) 26%,
                    rgba(3,10,18,.68) 70%,rgba(2,8,14,.94) 100%),
    linear-gradient(90deg,rgba(2,8,14,.9) 0%,rgba(2,8,14,.25) 55%,rgba(2,8,14,.6) 100%);
}
.floor .section{position:relative;isolation:isolate;overflow:hidden}
.floor .section > .container{position:relative;z-index:1}

/* synthetic-footage disclosure (Veo clips) */
.ai-note{
  position:absolute;right:14px;bottom:12px;z-index:1;
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(240,245,250,.55);
  background:rgba(3,9,16,.6);border:1px solid var(--line);
  padding:4px 9px;border-radius:6px;
}

/* static / reduced-motion: poster frames only, nothing animates */
html.static-mode .hero-media__video{filter:saturate(.95) contrast(1.02)}
html.static-mode .hero-media{opacity:1!important;filter:none!important}
@media (prefers-reduced-motion:reduce){
  .hero-media{transition:none}
}