/* Home page — hero, headline HUD and the clients & collaborators strip. */

/* ---- hero scene ----
   #portal-hero is a full-viewport still. hero-parallax.js draws that same
   image on a WebGL quad and offsets each pixel by a radial depth value times
   the eased cursor position, so the flat frame reads as 2.5D; the CSS
   background below is the fallback when WebGL is unavailable. */
#portal-hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #000 url("../img/hero.webp") center center / cover no-repeat;
}
#portal-hero #hero-parallax {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}
/* gentle darken plus a faint emerald cast: lifts the contrast of the copy */
#portal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 14, 8, 0.2), rgba(0, 0, 0, 0.17));
}

/* Narrow viewports need more than that. `cover` crops hard: a 390px phone shows
   only the middle 26% of hero.webp - the bright mouth of the tunnel - where a
   1440px desktop also gets the dark edges either side. Measured per pixel
   against the image, 44% of the body-copy area on that phone sits over
   background too bright for rgba(255,255,255,0.62) to clear WCAG AA, against
   1.1% at 1440px.

   Row luminance peaks at 55% of viewport height, directly beneath the copy, so
   this scrim stays fully transparent over the headline and ramps in only below
   it: the frame reads unchanged where it was already dark, and the tunnel keeps
   its shape.

   Two tiers, split on measurement rather than on the nav breakpoint. Up to
   800px (phones, and 768px tablets, which crop just as hard) the wash is severe
   and needs the full 0.44. From 801 to 1024 (820/834/1024 tablets) it is
   already mild - 16%, 14%, 9% - so 0.32 brings those to roughly desktop parity
   while leaving the glow intact. Above 1024 nothing is applied: at 1180px and
   up the page already measures the same as 1440px, so desktop is untouched. */
@media (max-width: 800px) {
  #portal-hero::after {
    background:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 32%,
        rgba(0, 0, 0, 0.44) 52%,
        rgba(0, 0, 0, 0.44) 100%),
      linear-gradient(180deg, rgba(2, 14, 8, 0.2), rgba(0, 0, 0, 0.17));
  }
}
@media (min-width: 801px) and (max-width: 1024px) {
  #portal-hero::after {
    background:
      linear-gradient(180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 32%,
        rgba(0, 0, 0, 0.32) 52%,
        rgba(0, 0, 0, 0.32) 100%),
      linear-gradient(180deg, rgba(2, 14, 8, 0.2), rgba(0, 0, 0, 0.17));
  }
}
/* interactive node network over the still, below the hero copy */
#portal-hero #hero-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* ---- hero content ----
   Scoped to #portal-hero on purpose: the hero fills the full viewport at every
   width, so this has to outrank the `.hm-hero { height: 64vh }` in the mobile
   block below. Without the id the rail (which is bottom-anchored inside this
   box) rides up over the headline on small screens. */
#portal-hero .hm-hero {
  position: absolute;
  inset: 0;
  height: 100vh;
  min-height: 0;
  z-index: 3;
}
/* --- editorial hero: statement (left) + meta rail (right) --- */
:root { --hm-font: Figtree, "Figtree Fallback", system-ui, sans-serif; }

.hm-topline {
  position: absolute;
  top: 24vh; left: 9vw; right: 9vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--hm-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.hm-avail { display: inline-flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.9); }
.hm-avail i {
  font-style: normal;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #35E07F;
  box-shadow: 0 0 10px rgba(53, 224, 127, 0.9);
  animation: hmPulse 2.2s ease-in-out infinite;
}
.hm-copyr { color: rgba(255, 255, 255, 0.5); }
@keyframes hmPulse { 50% { opacity: 0.35; } }

.hm-hero-inner {
  position: absolute;
  top: 30vh; left: 9vw; right: 9vw; bottom: 11vh;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6vw;
}

/* ---- left: statement ---- */
.hm-lead { max-width: 42rem; }
.hm-head {
  margin: 0;
  font-family: var(--hm-font);
  font-weight: 600;
  font-size: clamp(42px, 5.9vw, 90px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--title-on-dark);
}
.hm-hline { display: block; }
.hm-dot { color: #35E07F; }

/* rotating middle word — per-character blur-focus reveal (letters snap in l->r) */
.hm-rotor { display: block; position: relative; height: 0.98em; overflow: visible; }
.hm-word { position: absolute; left: 0; top: 0; white-space: nowrap; }
.hm-ch {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0.1em);
  transition: opacity 0.75s ease, filter 0.75s ease, transform 0.75s ease;
  will-change: opacity, filter, transform;
}
.hm-word.is-in  .hm-ch { opacity: 1; filter: blur(0);    transform: translateY(0); }
.hm-word.is-out .hm-ch { opacity: 0; filter: blur(8px);  transform: translateY(-0.08em); }

.hm-rule {
  display: block; width: 56px; height: 1px;
  margin: 34px 0 26px;
  background: rgba(255, 255, 255, 0.28);
}
.hm-copy {
  margin: 0; max-width: 22rem;
  font-family: var(--hm-font);
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.62);
}
.hm-cta {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 38px; padding-bottom: 10px;
  font-family: var(--hm-font);
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.35s ease;
}
.hm-cta .hm-arrow { font-style: normal; transition: transform 0.35s ease, color 0.35s ease; }
.hm-cta:hover { border-color: #35E07F; }
.hm-cta:hover .hm-arrow { transform: translateX(6px); color: #35E07F; }

/* ---- right: meta rail ---- */
.hm-rail {
  position: absolute; right: 9vw; bottom: 10vh;
  display: flex; flex-direction: column; gap: 20px;
  text-align: right;
}
.hm-rail-grp { display: flex; flex-direction: column; gap: 7px; }
.hm-rail-k {
  font-family: var(--hm-font);
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.4);
}
.hm-rail-v {
  font-family: var(--hm-font);
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.9);
}
.hm-rail-sep { width: 34px; height: 1px; align-self: flex-end; background: rgba(255, 255, 255, 0.16); }
.hm-clock {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.hm-clock .hm-clock-i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #35E07F; box-shadow: 0 0 8px rgba(53, 224, 127, 0.8);
  animation: hmPulse 2.2s ease-in-out infinite;
}
.hm-clock em { font-style: normal; color: rgba(255, 255, 255, 0.45); }

/* ---- centered scroll mouse (bottom middle) ---- */
/* The scroll indicator now lives in base.css — the Work hero uses the same
   component, and one copy of it is the point. What stays here is only what is
   specific to this hero (the mobile `bottom` override further down). */
@media (prefers-reduced-motion: reduce) {
  .hm-ch { transition: none; }
}

/* ---- brands & partners ---- */
.hm-brands {
  position: relative;
  z-index: 1;
  background: #050505;
  padding: 13vh 9vw;
}
.hm-brands-label {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.64);
  margin-bottom: 8vh;
}
/* bordered grid: each logo sits in its own boxed cell (people I've worked with).
   Container carries the top+left lines; each cell the right+bottom — so the
   shared edges stay a single hairline with no doubling. */
.hm-brands-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin-top: 6vh;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}
.hm-brand-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.hm-brands-grid img {
  max-width: 150px;
  max-height: 58px;
  opacity: 0.78;
  transition: opacity 0.35s ease;
}
.hm-brand-cell:hover img { opacity: 1; }
/* per-logo size normalization: the square/icon marks hit the height cap and read
   small next to the wide wordmarks — give them a taller cap so every logo carries
   roughly the same optical weight inside its box. */
.hm-brands-grid img[alt="EConstellation"]  { max-height: 82px; }
.hm-brands-grid img[alt="Sunti"]           { max-height: 82px; }
.hm-brands-grid img[alt="SG"]              { max-height: 76px; }
.hm-brands-grid img[alt="Yellowpanther"]   { max-height: 72px; }

@media (max-width: 900px) {
  .hm-topline { top: 15vh; left: 7vw; right: 7vw; font-size: 10px; letter-spacing: 0.12em; }
  .hm-hero-inner {
    top: 22vh; left: 7vw; right: 7vw; bottom: auto;
    flex-direction: column; align-items: flex-start; gap: 7vh;
  }
  .hm-head { font-size: clamp(40px, 11vw, 66px); }
  .hm-rail { right: 7vw; bottom: 13vh; gap: 16px; }
  .hm-rail-v { font-size: 13px; }
  .hm-mouse { bottom: 4vh; }
  .hm-brands { padding: 10vh 7vw; }
  .hm-brands-grid { grid-template-columns: repeat(2, 1fr); }
  .hm-brand-cell { min-height: 104px; padding: 14px; min-width: 0; }
  .hm-brands-grid img { max-width: 104px; max-height: 38px; }
  .hm-brands-grid img[alt="EConstellation"], .hm-brands-grid img[alt="Sunti"] { max-width: 94px; max-height: 52px; }
  .hm-brands-grid img[alt="SG"], .hm-brands-grid img[alt="Yellowpanther"] { max-width: 90px; max-height: 48px; }
}