/* ============================================================
   OCEANS — deep-sea bioluminescent design system
   Light is the only accent. Everything glows, or it doesn't.
   ============================================================ */

:root{
  /* Water column */
  --abyss:  #02070C;   /* the void — page floor */
  --trench: #06131C;   /* raised panel */
  --hull:   #0C2434;   /* hairline / border */

  /* Light */
  --bio:    #02A3D9;   /* brand blue, straight from the mark */
  --glow:   #7DF9FF;   /* bioluminescence */
  --pale:   #E8F6FB;   /* text */
  --drift:  #7E9CAB;   /* muted text */
  --chum:   #FF4A3D;   /* live indicator only. Red vanishes at depth. */

  /* Type */
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:    "IBM Plex Sans", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Space */
  --pad: clamp(1.25rem, 5vw, 6rem);
  --gap: clamp(2rem, 5vw, 4.5rem);
  --rule: 1px solid var(--hull);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }

body{
  background:var(--abyss);
  color:var(--pale);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg,canvas{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }

::selection{ background:var(--bio); color:var(--abyss) }

:focus-visible{
  outline:2px solid var(--glow);
  outline-offset:3px;
  border-radius:2px;
}

.sr{
  position:absolute; width:1px; height:1px; padding:0;
  margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

.skip{
  position:fixed; top:.5rem; left:.5rem; z-index:200;
  transform:translateY(-200%);
  padding:.65rem 1rem; background:var(--glow); color:var(--abyss);
  font:600 .85rem/1 var(--mono); border-radius:2px;
}
.skip:focus{ transform:none }

/* ── The descent: page darkens as you go down ───────────────── */
.descent{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(2,163,217,.10), transparent 60%),
    linear-gradient(180deg, #061D2B 0%, #04101A 35%, #02070C 100%);
}
.descent::after{
  content:""; position:absolute; inset:0;
  background:#000;
  opacity:var(--dark,0);       /* driven by scroll in main.js */
  transition:opacity .3s linear;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.bar{
  position:fixed; inset:0 0 auto; z-index:100;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:.85rem var(--pad);
  border-bottom:1px solid transparent;
  transition:background .35s, border-color .35s, backdrop-filter .35s;
}
.bar[data-stuck="true"]{
  background:rgba(2,7,12,.72);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--hull);
}

.bar__brand{ display:flex; align-items:center; gap:.6rem; flex:0 0 auto }
.bar__mark{
  width:30px; height:30px; fill:var(--pale);
  filter:drop-shadow(0 0 8px rgba(125,249,255,.45));
  transition:fill .3s, filter .3s;
}
.bar__brand:hover .bar__mark{
  fill:var(--glow);
  filter:drop-shadow(0 0 16px rgba(125,249,255,.9));
}
.bar__name{
  font:900 1.5rem/1 var(--display);
  letter-spacing:.06em; text-transform:uppercase;
}

.bar__nav{ display:flex; gap:1.6rem; margin-left:auto }
.bar__nav a{
  font:500 .78rem/1 var(--mono);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--drift); position:relative; padding:.4rem 0;
  transition:color .25s;
}
.bar__nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--glow); box-shadow:0 0 8px var(--glow);
  transition:width .3s cubic-bezier(.2,.8,.2,1);
}
.bar__nav a:hover{ color:var(--pale) }
.bar__nav a:hover::after{ width:100% }

.bar__right{ display:flex; align-items:center; gap:1rem }

.live{ display:none; align-items:center; gap:.45rem }
.live[data-live="true"]{ display:flex }
.live__dot{
  width:7px; height:7px; border-radius:50%; background:var(--chum);
  box-shadow:0 0 10px var(--chum);
  animation:pulse 1.8s ease-in-out infinite;
}
.live__label{
  font:500 .72rem/1 var(--mono); letter-spacing:.16em;
  text-transform:uppercase; color:var(--chum);
}
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.bar__toggle{
  display:none; width:40px; height:40px; background:none; border:0;
  cursor:pointer; flex-direction:column; justify-content:center; gap:6px;
}
.bar__toggle span{
  display:block; height:1.5px; background:var(--pale);
  transition:transform .3s, opacity .3s;
}
.bar__toggle span:first-child{ width:22px }
.bar__toggle span:last-child{ width:14px; align-self:flex-start }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font:500 .78rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  padding:.85rem 1.4rem; border:1px solid var(--hull);
  position:relative; overflow:hidden; cursor:pointer;
  transition:color .3s, border-color .3s, box-shadow .35s, background .3s;
  background:transparent; color:var(--pale);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.btn--lg{ padding:1.05rem 1.9rem }
.btn--block{ width:100%; padding-inline:1rem }

.btn--solid{
  background:var(--bio);
  border-color:var(--bio);
  color:#02070C;
  font-weight:500;
}
.btn--solid:hover{
  background:var(--glow); border-color:var(--glow);
  box-shadow:0 0 28px rgba(125,249,255,.55), inset 0 0 20px rgba(255,255,255,.35);
}

.btn--ghost{ color:var(--pale) }
.btn--ghost:hover{
  border-color:var(--glow); color:var(--glow);
  box-shadow:0 0 24px rgba(125,249,255,.22), inset 0 0 20px rgba(125,249,255,.06);
}

.btn[disabled]{ opacity:.5; pointer-events:none }

/* ============================================================
   DEPTH GAUGE
   ============================================================ */
.gauge{
  position:fixed; z-index:90; right:1.5rem; top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.85rem;
  font:400 .62rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--drift); mix-blend-mode:screen; pointer-events:none;
}
.gauge__zone{ writing-mode:vertical-rl; color:var(--drift) }
.gauge__rail{
  position:relative; width:1px; height:34vh;
  background:linear-gradient(180deg,var(--hull),rgba(125,249,255,.35),var(--hull));
}
.gauge__tick{
  position:absolute; left:50%; top:0;
  width:11px; height:1px; background:var(--glow);
  box-shadow:0 0 10px var(--glow);
  transform:translate(-50%,0);
  transition:top .18s linear;
}
.gauge__read{ color:var(--glow); text-shadow:0 0 10px rgba(125,249,255,.6) }

/* ============================================================
   HERO — the signature
   ============================================================ */
.hero{
  position:relative; z-index:2;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:0 var(--pad) clamp(4rem,9vh,7rem);
  isolation:isolate;
}
.hero__canvas{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%;
}
.hero__fade{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(2,7,12,.55) 0%, rgba(2,7,12,0) 24%, rgba(2,7,12,0) 54%, rgba(2,7,12,.45) 84%, var(--abyss) 100%),
    linear-gradient(90deg, rgba(2,7,12,.9) 0%, rgba(2,7,12,.5) 30%, rgba(2,7,12,0) 60%, rgba(2,7,12,0) 100%);
}

.hero__inner{ max-width:56rem; will-change:transform,opacity }

.eyebrow{
  display:flex; align-items:center; flex-wrap:wrap; gap:.7rem;
  font:400 .68rem/1 var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--drift); margin-bottom:1.5rem;
}
.eyebrow i{ width:14px; height:1px; background:var(--hull); flex:0 0 auto }
.eyebrow span:first-child{ color:var(--glow) }
.eyebrow--hero span:first-child{ text-shadow:0 0 12px rgba(125,249,255,.7) }

.hero__h1{ margin-bottom:1.75rem }
.hero__word{
  display:block;
  font:900 clamp(1.6rem,2.4vw,2.2rem)/1 var(--display);
  letter-spacing:.55em; text-transform:uppercase;
  color:var(--glow);
  text-shadow:0 0 30px rgba(125,249,255,.55);
  margin-bottom:.6rem;
  animation:surface 1.2s cubic-bezier(.2,.8,.2,1) both;
}
.hero__claim{
  display:block;
  font:900 clamp(3.6rem,12.5vw,11rem)/.82 var(--display);
  letter-spacing:-.01em; text-transform:uppercase;
  color:var(--pale);
  text-shadow:0 0 60px rgba(2,163,217,.35);
  animation:surface 1.4s .12s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes surface{
  from{ opacity:0; transform:translateY(28px); filter:blur(10px) }
  to  { opacity:1; transform:none;             filter:blur(0) }
}

.hero__lede{
  max-width:34rem; color:var(--drift); margin-bottom:2.25rem;
  animation:surface 1.4s .32s cubic-bezier(.2,.8,.2,1) both;
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:.85rem;
  animation:surface 1.4s .46s cubic-bezier(.2,.8,.2,1) both;
}

.hero__scroll{
  position:absolute; right:var(--pad); bottom:clamp(4rem,9vh,7rem);
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  font:400 .62rem/1 var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--drift);
}
.hero__scroll span:first-child{ writing-mode:vertical-rl }
.hero__scrollLine{
  width:1px; height:60px; background:var(--hull); position:relative; overflow:hidden;
}
.hero__scrollLine::after{
  content:""; position:absolute; inset:0 auto auto 0; width:1px; height:20px;
  background:var(--glow); box-shadow:0 0 8px var(--glow);
  animation:sink 2.4s ease-in-out infinite;
}
@keyframes sink{
  0%{ transform:translateY(-24px) } 100%{ transform:translateY(64px) }
}

/* ============================================================
   ZONES
   ============================================================ */
.zone{
  position:relative; z-index:2;
  padding:clamp(6rem,14vh,11rem) var(--pad);
  border-top:var(--rule);
}
.zone__h2{
  font:900 clamp(2.6rem,7vw,6rem)/.9 var(--display);
  letter-spacing:-.005em; text-transform:uppercase;
  margin-bottom:1rem; max-width:18ch;
}
.zone__lede{ color:var(--drift); max-width:46ch; margin-bottom:var(--gap) }

/* Reveal on scroll */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1);
}
.reveal.in{ opacity:1; transform:none }

/* ── Manifesto ─────────────────────────────────────────────── */
.creed{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));
  margin-top:var(--gap);
}
.creed__item{ position:relative; padding-top:1.75rem; border-top:1px solid var(--hull) }
.creed__item::before{
  content:""; position:absolute; top:-1px; left:0; width:34%; height:1px;
  background:var(--glow); box-shadow:0 0 12px var(--glow);
  transform:scaleX(0); transform-origin:left;
  transition:transform .9s cubic-bezier(.2,.8,.2,1) .15s;
}
.creed__item.in::before{ transform:scaleX(1) }
.creed__item h3{
  font:900 clamp(1.7rem,3vw,2.4rem)/1 var(--display);
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--glow); text-shadow:0 0 24px rgba(125,249,255,.35);
  margin-bottom:.85rem;
}
.creed__item p{ color:var(--drift) }

/* ── Roster ────────────────────────────────────────────────── */
.roster{
  list-style:none; display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  background:var(--hull);
  border:var(--rule);
}
.player{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--trench);
  padding:1.75rem 1.5rem 1.5rem;
  display:flex; flex-direction:column;
  min-height:15rem;
  transition:background .4s;
}
.player:hover{ background:#08202E }

.player__num{
  font:400 .68rem/1 var(--mono); letter-spacing:.2em; color:var(--drift);
  margin-bottom:auto;
}
.player__body{ display:flex; flex-direction:column; gap:.35rem }
.player__tag{
  font:900 clamp(1.9rem,3.4vw,2.6rem)/1 var(--display);
  letter-spacing:.02em; text-transform:uppercase;
  transition:color .35s, text-shadow .35s;
}
.player:hover .player__tag{
  color:var(--glow); text-shadow:0 0 26px rgba(125,249,255,.6);
}
.player__role{
  font:400 .7rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--bio);
}
.player__pitch{ font-size:.9rem; color:var(--drift); margin-top:.5rem }

.player__stats{ display:flex; gap:1.5rem; margin-top:.9rem }
.player__stats div{ display:flex; flex-direction:column; gap:.15rem }
.player__stats dt{
  font:400 .6rem/1 var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--drift);
}
.player__stats dd{ font:500 .95rem/1 var(--mono); color:var(--pale) }

.player__x{
  margin-top:1.1rem;
  font:400 .7rem/1 var(--mono); letter-spacing:.1em; color:var(--drift);
  align-self:flex-start; border-bottom:1px solid transparent;
  transition:color .3s, border-color .3s;
}
.player__x:hover{ color:var(--glow); border-bottom-color:var(--glow) }
.player__x--cta{ color:var(--glow); border-bottom-color:rgba(125,249,255,.4) }

/* the gill-light that swells behind a player on hover */
.player__glow{
  position:absolute; z-index:-1; inset:auto -20% -60% -20%; height:70%;
  background:radial-gradient(60% 100% at 50% 100%, rgba(2,163,217,.55), transparent 70%);
  opacity:0; transform:translateY(30%);
  transition:opacity .55s, transform .55s cubic-bezier(.2,.8,.2,1);
}
.player:hover .player__glow{ opacity:1; transform:none }

.player--open{ background:#04121B }
.player--open .player__tag{ color:var(--drift) }
.player--open:hover .player__tag{ color:var(--glow) }

/* ── Film ──────────────────────────────────────────────────── */
.film{ display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fit,minmax(20rem,1fr)) }
.vod__frame{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  border:var(--rule); background:var(--trench) center/cover no-repeat;
  cursor:pointer; overflow:hidden; padding:0;
  transition:border-color .35s, box-shadow .35s;
}
.vod__frame::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(2,7,12,.25), rgba(2,7,12,.75));
  transition:background .35s;
}
.vod__frame:hover{
  border-color:var(--bio);
  box-shadow:0 0 40px rgba(2,163,217,.28);
}
.vod__frame:hover::after{ background:linear-gradient(180deg, rgba(2,7,12,.1), rgba(2,7,12,.6)) }

.vod__play{
  position:absolute; z-index:2; top:50%; left:50%;
  width:66px; height:66px; transform:translate(-50%,-50%);
  border:1px solid var(--glow); border-radius:50%;
  box-shadow:0 0 30px rgba(125,249,255,.35), inset 0 0 20px rgba(125,249,255,.12);
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, background .4s;
}
.vod__play::before{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border:9px solid transparent; border-left:14px solid var(--glow);
}
.vod__frame:hover .vod__play{
  transform:translate(-50%,-50%) scale(1.1);
  background:rgba(125,249,255,.1);
  box-shadow:0 0 55px rgba(125,249,255,.6), inset 0 0 26px rgba(125,249,255,.2);
}
.vod iframe{ width:100%; aspect-ratio:16/9; border:0; display:block }
.vod figcaption{ padding-top:1.1rem }
.vod figcaption h3{
  font:700 1.5rem/1.1 var(--display); letter-spacing:.05em; text-transform:uppercase;
  margin-bottom:.35rem;
}
.vod figcaption p{ color:var(--drift); font-size:.95rem }

/* ── Season log ────────────────────────────────────────────── */
.log{ border:var(--rule); overflow-x:auto }
.log table{ width:100%; border-collapse:collapse; min-width:34rem }
.log th, .log td{
  text-align:left; padding:1.1rem 1.4rem;
  border-bottom:1px solid var(--hull);
  font:400 .82rem/1.4 var(--mono); letter-spacing:.04em;
}
.log thead th{
  font-size:.65rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--drift); background:#04101A;
}
.log tbody tr{ transition:background .3s }
.log tbody tr:hover{ background:#08202E }
.log tbody tr:last-child th, .log tbody tr:last-child td{ border-bottom:0 }
.log tbody th{ font-weight:500; color:var(--pale) }
.log td{ color:var(--drift) }
.log__place{ text-align:right; font-weight:500; color:var(--pale) }
.log__place--good{ color:var(--glow); text-shadow:0 0 14px rgba(125,249,255,.5) }

/* ============================================================
   JOIN
   ============================================================ */
.zone--join{ position:relative; overflow:hidden }
.zone--join::before{
  content:""; position:absolute; z-index:-1;
  left:50%; bottom:-45%; width:min(120vw,1400px); aspect-ratio:1;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(2,163,217,.16), transparent 62%);
  pointer-events:none;
}
.join{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  align-items:start;
}
.join__lede{ color:var(--drift); max-width:40ch; margin-bottom:1.25rem }
.join__note{ font:400 .7rem/1.6 var(--mono); letter-spacing:.1em; color:#4E6B7A }

.signup{
  display:flex; flex-direction:column; gap:1.25rem;
  padding:clamp(1.5rem,3vw,2.25rem);
  background:rgba(6,19,28,.75);
  border:var(--rule);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}

.field{ display:flex; flex-direction:column; gap:.5rem }
.field label, .consent span{
  font:400 .68rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--drift);
}
.field input, .field select{
  width:100%; padding:.9rem 1rem;
  background:#04101A; color:var(--pale);
  border:1px solid var(--hull); border-radius:0;
  font:400 .95rem/1.2 var(--body);
  transition:border-color .3s, box-shadow .3s;
  appearance:none;
}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--drift) 50%),
                   linear-gradient(135deg,var(--drift) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  cursor:pointer;
}
.field input::placeholder{ color:#3E5967 }
.field input:focus, .field select:focus{
  outline:0; border-color:var(--glow);
  box-shadow:0 0 0 1px var(--glow), 0 0 22px rgba(125,249,255,.2);
}
.field input[aria-invalid="true"]{ border-color:var(--chum) }
.field__error{
  font:400 .72rem/1.4 var(--mono); color:var(--chum); letter-spacing:.04em;
}

.field--tag{ animation:surface .5s cubic-bezier(.2,.8,.2,1) both }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

.consent{
  display:flex; gap:.75rem; align-items:flex-start; cursor:pointer;
}
.consent input{
  appearance:none; flex:0 0 auto;
  width:17px; height:17px; margin-top:1px;
  border:1px solid var(--hull); background:#04101A;
  cursor:pointer; position:relative;
  transition:border-color .3s, background .3s, box-shadow .3s;
}
.consent input:checked{
  background:var(--bio); border-color:var(--bio);
  box-shadow:0 0 16px rgba(2,163,217,.6);
}
.consent input:checked::after{
  content:""; position:absolute; left:5px; top:1px;
  width:4px; height:9px;
  border:solid var(--abyss); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.consent span{ text-transform:none; letter-spacing:.02em; line-height:1.5; font-size:.78rem }

.signup__status{
  font:400 .78rem/1.5 var(--mono); letter-spacing:.03em; min-height:1.2em;
}
.signup__status[data-state="error"]{ color:var(--chum) }
.signup__status[data-state="ok"]{ color:var(--glow); text-shadow:0 0 14px rgba(125,249,255,.5) }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  position:relative; z-index:2;
  padding:clamp(3rem,7vh,5rem) var(--pad) 2.5rem;
  border-top:var(--rule);
}
.foot__top{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:2rem; padding-bottom:2.5rem;
}
.foot__mark{
  width:46px; height:46px; fill:var(--hull);
  transition:fill .4s, filter .4s;
}
.foot__brand:hover .foot__mark{
  fill:var(--bio); filter:drop-shadow(0 0 18px rgba(2,163,217,.8));
}
.foot__social{ display:flex; flex-wrap:wrap; gap:1.5rem }
.foot__social a{
  font:500 .72rem/1 var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--drift); transition:color .3s, text-shadow .3s;
}
.foot__social a:hover{ color:var(--glow); text-shadow:0 0 14px rgba(125,249,255,.6) }

.foot__bottom{
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  justify-content:space-between; align-items:center;
  padding-top:2rem; border-top:var(--rule);
  font:400 .68rem/1.6 var(--mono); letter-spacing:.1em; color:#4E6B7A;
}
.foot__claim{ text-transform:uppercase; letter-spacing:.16em }
.foot__bottom a:hover{ color:var(--glow) }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .gauge{ display:none }
}

@media (max-width:860px){
  .bar__toggle{ display:flex; margin-left:auto }
  .bar__right .btn{ display:none }
  .bar__nav{
    position:fixed; inset:60px 0 auto; margin:0;
    flex-direction:column; gap:0;
    background:rgba(2,7,12,.96);
    backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
    border-bottom:var(--rule);
    padding:1rem var(--pad) 1.5rem;
    transform:translateY(-120%); opacity:0; pointer-events:none;
    transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s;
  }
  .bar[data-open="true"] .bar__nav{ transform:none; opacity:1; pointer-events:auto }
  .bar__nav a{ padding:1rem 0; border-bottom:1px solid var(--hull); font-size:.85rem }
  .bar[data-open="true"] .bar__toggle span:first-child{ transform:rotate(45deg) translate(4px,4px) }
  .bar[data-open="true"] .bar__toggle span:last-child{ width:22px; transform:rotate(-45deg) translate(3px,-4px) }

  .hero{ justify-content:flex-end; padding-bottom:5rem }
  .hero__scroll{ display:none }
  .foot__bottom{ flex-direction:column; align-items:flex-start }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none }
}