/* Octatail v3 — cinematic hero + layered protection stack (loads after v2 + pages css) */

/* ---- floating nav ---- */
.nav3{position:fixed;top:0;left:0;right:0;z-index:50;border-bottom:1px solid transparent;
  transition:background .25s,border-color .25s,backdrop-filter .25s;}
.nav3.scrolled{background:color-mix(in srgb,var(--ink) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom-color:var(--line);}

/* ---- full-bleed hero ---- */
.hero3{position:relative;height:92vh;min-height:620px;display:flex;align-items:flex-end;
  overflow:hidden;border-bottom:1px solid var(--line);background:#000;}
.hero3 image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* Cinematic background video over solid black — fades in once it starts playing.
   The clip opens on pure black with organic motion entering from the right, so the
   black hero background carries the load until the video decodes (no still flash),
   and the lower-left stays clear for the headline. */
.hero3 .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:right center;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.1s ease;}
.hero3 .hero-vid.is-playing{opacity:1;}

.hero3 .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,11,10,.45) 0%,rgba(11,11,10,.08) 34%,rgba(11,11,10,.22) 58%,rgba(11,11,10,.92) 100%),
  linear-gradient(90deg,rgba(11,11,10,.55) 0%,rgba(11,11,10,.1) 45%,rgba(11,11,10,0) 70%);}
.hero3-in{position:relative;z-index:2;width:100%;padding-bottom:76px;pointer-events:none;}
.hero3-in .k{color:rgba(244,242,236,.75);}
.hero3 h1{font-size:clamp(42px,5.4vw,76px);line-height:1.0;margin:20px 0 0;max-width:13em;
  text-shadow:0 2px 28px rgba(0,0,0,.45);}
.hero3 h1 em{font-style:normal;color:var(--sig);}
.hero3 .lede{color:rgba(244,242,236,.82);font-size:19px;margin-top:24px;max-width:540px;
  text-shadow:0 1px 18px rgba(0,0,0,.5);}
.hero3 .hero-cta{pointer-events:auto;}

/* ---- layers of protection ---- */
.layers-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:center;}
.lpills{display:flex;flex-direction:column;gap:10px;}
.lpill{appearance:none;text-align:left;cursor:pointer;font-family:var(--sans);
  border:1px solid var(--line-2);border-radius:7px;background:transparent;color:var(--text-2);
  padding:14px 18px;
  transition:background .2s,border-color .2s,color .2s,opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);}
.lpill .t{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;}
.lpill .t .n{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.1em;}
.lpill .body{display:none;font-size:14px;line-height:1.55;color:var(--text-2);margin:10px 0 2px;}
.lpill:hover{border-color:var(--line-3);color:var(--text);}
.lpill.active{background:var(--panel);border-color:var(--line-3);color:var(--text);}
.lpill.active .t .n{color:var(--sig);}
.lpill.active .body{display:block;}

.lstage{height:540px;display:flex;align-items:center;justify-content:center;perspective:1300px;}
.lstack{position:relative;width:330px;height:330px;transform-style:preserve-3d;
  transform:rotateX(57deg) rotateZ(45deg);}
.plate{position:absolute;inset:0;border-radius:20px;
  border:1px solid rgba(244,242,236,.26);
  background:linear-gradient(135deg,rgba(244,242,236,.15),rgba(244,242,236,.04) 55%,rgba(244,242,236,.09));
  box-shadow:inset 0 0 32px rgba(244,242,236,.05);
  opacity:1;
  transform:translateZ(calc(var(--i) * 38px));
  will-change:transform,opacity;
  transition:transform .72s cubic-bezier(.22,.61,.36,1),
             opacity .5s ease,border-color .4s ease,box-shadow .45s ease;}
.plate .lab{position:absolute;top:22px;left:24px;font-family:var(--mono);font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(244,242,236,.55);transition:color .35s ease;}
.plate.active{
  border-color:rgba(236,233,227,.85);
  box-shadow:inset 0 0 32px rgba(236,233,227,.06),0 0 0 1px rgba(236,233,227,.28),0 34px 56px -20px rgba(0,0,0,.65);}
.plate.active .lab{color:var(--sig);}

@media (prefers-reduced-motion: reduce){
  .plate{transition:none;}
  .lpill{transition:background .2s,border-color .2s,color .2s;}
  .hero3 .hero-vid{display:none;}        /* no autoplay video — hero rests on black */
}

/* ---- analyst strip (managed band) ---- */
.analysts{display:flex;align-items:center;gap:14px;margin-top:34px;}
.analysts image-slot{width:64px;height:64px;flex:none;}
.analysts .who-k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);line-height:1.7;margin-left:8px;}

/* ---- responsive ---- */
@media(max-width:1000px){
  .layers-in{grid-template-columns:1fr;gap:40px;}
  .lstage{height:440px;}
  .lstack{width:270px;height:270px;}
  .hero3{height:86vh;}
}
@media(max-width:640px){
  .lstage{height:380px;}
  .lstack{width:220px;height:220px;}
  .hero3-in{padding-bottom:56px;}
}