/* ==================================================================
   01 — Hero: headline, download block, announcement pill and the
   animated diagonal light-bars background (WebGL, see js/01-hero.js).
   Everything is scoped under #hero.
   ================================================================== */

#hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s-10);
}

/* ---------- background ---------- */
#hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--grey-900);
  pointer-events: none;
}
#hero .hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.25s linear;
}
#hero.hero--gl .hero-canvas { opacity: 1; }

/* soft fades: the bottom 10% melts into the page,
   the outer 5% on each side melts into the page */
#hero .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 8, 10, 0) 0%, rgba(7, 8, 10, 0) 90%, var(--grey-900) 100%),
    linear-gradient(90deg, var(--grey-900) 0%, rgba(7, 8, 10, 0) 5%, rgba(7, 8, 10, 0) 95%, var(--grey-900) 100%);
}

/* Static fallback (no WebGL): striped red block with a cool halo.
   Hidden as soon as the WebGL renderer is live. */
#hero .hero-bg-fallback {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#hero.hero--static .hero-bg-fallback { opacity: 1; }
#hero .hero-bg-fallback::before,
#hero .hero-bg-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* red bars */
#hero .hero-bg-fallback::before {
  background:
    repeating-linear-gradient(48deg,
      rgba(7, 8, 10, 0) 0 14px,
      rgba(200, 22, 44, 0.55) 30px,
      #d81c33 50px,
      #d0182e 84px,
      #8e0e1e 92px,
      rgba(7, 8, 10, 0) 93px);
  -webkit-mask-image: radial-gradient(290px 320px at 54.5% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(290px 320px at 54.5% 50%, #000 58%, transparent 100%);
}
/* cool steel-blue halo + faint rims on the outer bars */
#hero .hero-bg-fallback::after {
  background:
    repeating-linear-gradient(48deg,
      rgba(7, 8, 10, 0) 0 14px,
      rgba(34, 78, 104, 0.55) 44px,
      rgba(26, 60, 84, 0.3) 80px,
      rgba(200, 30, 50, 0.55) 90px,
      rgba(7, 8, 10, 0) 93px);
  -webkit-mask-image: radial-gradient(430px 460px at 54.5% 48%, transparent 52%, #000 70%, transparent 100%);
  mask-image: radial-gradient(430px 460px at 54.5% 48%, transparent 52%, #000 70%, transparent 100%);
  opacity: 0.8;
}

/* ---------- headline ---------- */
#hero .hero-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 818px;
  padding: 260px var(--s-2) 137px;
}
#hero .hero-title {
  max-width: 440px;
  color: var(--white);
  font-size: 36px;
  font-weight: 600;
  line-height: 110%;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
  font-feature-settings: "ss08" on, "ss02" on, "liga" off;
  opacity: 0;
  transform: translateY(20px);
  animation: hero-rise 1s ease forwards;
}
#hero .hero-lead {
  color: var(--white);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.2px;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(20px);
  animation: hero-rise 1s ease 1s forwards;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- download block ---------- */
#hero .hero-download {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#hero .hero-download-row { display: none; gap: var(--s-2); }
#hero .hero-download-btn svg { width: 16px; height: 16px; }
#hero .hero-req {
  display: none;
  margin: var(--s-2) 0 0;
  font-family: var(--mono-geist);
  font-size: 12px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: 0.2px;
  color: var(--white);
  opacity: 0.4;
  mix-blend-mode: plus-lighter;
}
#hero .hero-sub {
  display: none;
  gap: 25px;
  margin-top: var(--s-1);
  font-family: var(--mono-geist);
  font-size: 12px;
  line-height: 160%;
  letter-spacing: 0.2px;
  color: var(--grey-200);
}
#hero .hero-sub-link {
  position: relative;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  border-radius: 4px;
  transition: color 0.2s;
}
#hero .hero-sub-link:hover { color: var(--white); }
#hero .hero-sub-link:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }
#hero .hero-sub-link + .hero-sub-link::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -12px;
  height: 10px;
  border-right: 1px solid var(--grey-200);
}

/* ---------- announcement pill ---------- */
@property --hero-glint-x {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 18px;
}
@property --hero-glint-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
#hero .hero-announce {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: var(--s-3);
}
#hero .hero-pill {
  --hero-glint-x: 18px;
  --hero-glint-a: 0deg;
  display: block;
  padding: 1px;
  border-radius: 43px;
  background:
    conic-gradient(from calc(var(--hero-glint-a) - 80deg) at var(--hero-glint-x) 50%,
      rgba(236, 165, 167, 0) 0deg,
      rgba(236, 165, 167, 0.95) 70deg,
      rgba(236, 165, 167, 0) 92deg),
    #452324;
  box-shadow: 0 0 20px rgba(245, 48, 107, 0.1);
  transform: translateZ(0);
  transition: background-color 0.2s, box-shadow 0.2s;
  animation:
    hero-glint-slide 3s linear -0.64s infinite,
    hero-glint-turn 3s linear -0.64s infinite;
}
/* the glint animates registered custom properties (main-thread style work):
   pause it while the hero is off-screen */
#hero.hero--off .hero-pill { animation-play-state: paused; }
#hero .hero-pill:hover {
  background-color: #833637;
  box-shadow: 0 0 20px 3px rgba(245, 49, 108, 0.25);
}
#hero .hero-pill:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.5); outline-offset: 2px; }
#hero .hero-pill-inner {
  display: flex;
  align-items: center;
  gap: var(--s-1);
  height: 30px;
  padding: 4px 12px;
  border-radius: 1000px;
  background: #130d0e;
  color: var(--white);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
#hero .hero-pill-arrow {
  display: flex;
  color: var(--grey-200);
  transition: transform 0.2s var(--ease-out), color 0.2s;
}
#hero .hero-pill-arrow svg { width: 16px; height: 16px; }
#hero .hero-pill:hover .hero-pill-arrow { transform: translateX(2px); color: var(--white); }

/* the glint slides along the top edge, swings round the right cap,
   slides back along the bottom edge and swings round the left cap */
@keyframes hero-glint-slide {
  0% { --hero-glint-x: 18px; }
  33% { --hero-glint-x: calc(100% - 16px); }
  50% { --hero-glint-x: calc(100% - 16px); }
  83% { --hero-glint-x: 18px; }
  100% { --hero-glint-x: 18px; }
}
@keyframes hero-glint-turn {
  0% { --hero-glint-a: 0deg; }
  33% { --hero-glint-a: 0deg; }
  50% { --hero-glint-a: 180deg; }
  83% { --hero-glint-a: 180deg; }
  100% { --hero-glint-a: 360deg; }
}

/* ---------- breakpoints ---------- */
@media (min-width: 420px) {
  #hero .hero-title { font-size: 48px; }
}
@media (min-width: 720px) {
  #hero { margin-bottom: var(--s-13); }
  #hero .hero-text { padding-top: 370px; padding-bottom: 212px; }
  #hero .hero-title { max-width: 540px; font-size: 64px; }
  #hero .hero-lead { font-size: 18px; }
  #hero .hero-download-row,
  #hero .hero-req,
  #hero .hero-sub { display: flex; }
  #hero .hero-announce { padding-top: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  #hero .hero-title,
  #hero .hero-lead { opacity: 1; transform: none; animation: none; }
  #hero .hero-pill { animation: none; }
  #hero .hero-canvas { transition: none; }
}