/* ===== HeYYou base (hand-built shell) ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{background:#0a0a0c;color:#f4f4f5;font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:#c8ff00;color:#000}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #c8ff00;outline-offset:2px}

/* reveal — JS-gated so content still shows if JS fails */
.js .reveal{opacity:0;transform:translateY(28px)}
.reveal.is-in{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion: reduce){ .js .reveal{opacity:1;transform:none} }

/* nav scrolled state */
#nav.is-stuck{background:rgba(6,6,8,.8);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.10)}

/* animated aurora / mesh background (plain-CSS stand-in for salty's WebGL plasma) */
.aurora{position:absolute;inset:0;overflow:hidden;
  background:radial-gradient(55% 55% at 70% 82%, rgba(39,211,255,.10), transparent 60%), #0a0a0c}
.aurora::before,.aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);will-change:transform}
.aurora::before{width:62vw;height:62vw;left:-12%;top:-24%;
  background:radial-gradient(circle, rgba(200,255,0,.42), transparent 62%);
  animation:auroraA 20s ease-in-out infinite alternate}
.aurora::after{width:58vw;height:58vw;right:-14%;top:4%;
  background:radial-gradient(circle, rgba(47,107,255,.5), transparent 62%);
  animation:auroraB 26s ease-in-out infinite alternate}
@keyframes auroraA{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(12%,10%,0) scale(1.15)}}
@keyframes auroraB{from{transform:translate3d(0,0,0) scale(1.05)}to{transform:translate3d(-10%,8%,0) scale(.92)}}
@media (prefers-reduced-motion: reduce){ .aurora::before,.aurora::after{animation:none} }


/* ===== section styles ===== */
/* Hero scroll cue: a lime segment travelling down a faint rail */
#hero .hero-scroll-run{
  transform: translateY(-0.75rem);
  animation: heroScrollRun 2.4s cubic-bezier(0.16,1,0.3,1) infinite;
}
@keyframes heroScrollRun{
  0%   { transform: translateY(-0.75rem); opacity:0; }
  20%  { opacity:1; }
  80%  { opacity:1; }
  100% { transform: translateY(2.5rem); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  #hero .hero-scroll-run{ animation:none; transform:translateY(0.5rem); opacity:1; }
}

/* HERO — diagonal video wall.
   Real trick clips as vertical panels; the wall is clipped on a diagonal so the
   lower-left sinks to solid dark (headline legibility) with a lime hairline on the seam. */
#hero{ --cut: clamp(40px, 9vw, 150px); }
#hero .hero-wall{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--cut)));
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--cut)));
}
#hero .hero-wall-grid{
  position: absolute; inset: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;   /* panels sit flush, no seams */
}
#hero .hero-vid{ width: 100%; height: 100%; object-fit: cover; }
/* lime hairline riding the diagonal cut */
#hero .hero-cut{
  background: #c8ff00;
  clip-path: polygon(0 calc(100% - var(--cut)), 100% 100%, 100% calc(100% + 5px), 0 calc(100% - var(--cut) + 5px));
  -webkit-clip-path: polygon(0 calc(100% - var(--cut)), 100% 100%, 100% calc(100% + 5px), 0 calc(100% - var(--cut) + 5px));
}
@media (max-width: 767px){
  #hero{ --cut: clamp(28px, 13vw, 84px); }
  #hero .hero-wall-grid{ grid-template-columns: 1fr; gap: 0; }
  #hero .hero-vid:not(:first-child){ display: none; }
}

/* THE CRAFT — sticky stacking cards, adapted from saltycodestudio-parts/motion/sticky-stacking-cards
   Pinning is pure CSS (position: sticky); GSAP only scrubs scale/brightness of the covered card. */
#craft .craft-stack {
  position: relative;
  padding-bottom: 6vh;
  --stack-top: 8vh;
}
#craft .craft-card {
  position: sticky;
  top: var(--stack-top);
  margin: 0 auto 12vh;
  width: 100%;
  overflow: hidden;
  transform-origin: center top;
  /* Only promote transform. Animating `filter` here caused a black-flash flicker
     as the layer re-rasterized mid-scroll; the dim is now a composited overlay. */
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.7);
}
/* Dim overlay scrubbed by GSAP (via --dim) instead of a filter — opacity composites
   cleanly, so covered cards darken without flickering or flashing black. */
#craft .craft-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: #06060a;
  opacity: var(--dim, 0);
}
#craft .craft-card:last-child {
  margin-bottom: 0;
}
#craft .craft-card-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
#craft .craft-card-media {
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.10);
  aspect-ratio: 16 / 10;
}
#craft .craft-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 768px) {
  #craft .craft-card-inner {
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
  }
  #craft .craft-card-media {
    aspect-ratio: 4 / 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  #craft .craft-card { transition: none; }
}

/* --- RIG section: reveal + stagger (safe no-op if shell already defines these) --- */
#rig .reveal{opacity:0;transform:translateY(38px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);will-change:opacity,transform}
#rig .reveal.is-in{opacity:1;transform:none}
/* staggered children reveal in sequence once the grid enters view */
#rig [data-stagger].is-in > [data-bento]{opacity:1;transform:none}
#rig [data-stagger] > [data-bento]:nth-child(1){transition-delay:.00s}
#rig [data-stagger] > [data-bento]:nth-child(2){transition-delay:.08s}
#rig [data-stagger] > [data-bento]:nth-child(3){transition-delay:.16s}
#rig [data-stagger] > [data-bento]:nth-child(4){transition-delay:.24s}
#rig [data-stagger] > [data-bento]:nth-child(5){transition-delay:.32s}
@media (prefers-reduced-motion: reduce){
  #rig .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  #rig .group img{transition:none !important}
}

/* Limited Edition: kill background film motion when reduced-motion is requested */
@media (prefers-reduced-motion: reduce) {
  #limited video { display: none; }
}