/* Orionix — hero
   Colours sampled from hero-UFO.mp4 and lifted a little to undo the clip's
   low-bitrate dimming. */

:root {
  --ink:     #05060B;   /* deep space in the clip reads #010509 */
  --white:   #F4F4F6;
  --pink:    #F062A8;   /* sampled #D276A5 on the headline's left edge */
  --coral:   #FF7A4D;   /* sampled #DE7080 on its right edge, and on the X */
  --violet:  #A78BFA;
  --blue:    #8AA4FF;
  --rose:    #C79BB0;   /* the eyebrow */
  --muted:   rgba(244, 244, 246, .62);
  --hair:    rgba(244, 244, 246, .14);

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter:  clamp(1.5rem, 5vw, 5rem);
  --ease:    cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 4px; }

/* ---------- stage ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: clamp(1.4rem, 3.2vh, 2.3rem) var(--gutter) clamp(1.2rem, 2.6vh, 1.9rem);
}

/* ---------- footage ---------- */

/* ufo-hero.mp4 is the plate: the clip's burnt-in copy and watermark were
   cleared in ffmpeg, so nothing has to be hidden and no scrim is needed. */
.hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* cover crops the sides on anything squarer than 16:9; biasing left keeps
     the dark strip the copy sits on, and gives up sky on the right instead */
  object-position: 38% center;
  display: block;
}

/* ---------- wordmark ---------- */

.brand {
  position: relative;
  z-index: 2;
  justify-self: start;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.45rem);
  letter-spacing: .14em;
  text-indent: .14em;
  text-transform: uppercase;
}

.brand__x { color: var(--coral); }

/* ---------- copy ---------- */

/* The plate is dark where the copy sits (luma 25-46 across the loop), so no
   scrim goes over the footage — this shadow rides on the glyphs alone, for the
   few frames where the beam's glow creeps under the third feature. */
.hero__copy,
.features,
.scroll { text-shadow: 0 1px 14px rgba(5, 6, 11, .72); }

/* the gradient line is clipped to the text, so a shadow behind it only muddies
   the sweep — it is big enough not to need one */
.title__line--grad { text-shadow: none; }

.hero__copy {
  position: relative;
  z-index: 2;
  align-self: center;
  min-width: 0;
  max-width: 34rem;
  /* the block sits high in the source design so the lede clears the saucer —
     the bottom pad lifts it back up there */
  padding-block: 0 clamp(1.5rem, 12vh, 7rem);
}

.eyebrow {
  margin: 0 0 clamp(.8rem, 1.8vh, 1.2rem);
  font-size: clamp(.68rem, .9vw, .8rem);
  font-weight: 500;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--rose);
}

.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  /* The plate stays dark out to 35% of its width in this band; cover crops the
     sides, so the headline has to fit that strip rather than the viewport. */
  font-size: clamp(2rem, 3.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

.title__line { display: block; white-space: nowrap; }

.title__line--grad {
  background: linear-gradient(95deg, var(--pink) 8%, var(--coral) 82%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  /* if it ever wraps, give each line its own sweep rather than stretching
     one gradient across both */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.lede {
  max-width: 34ch;
  margin: clamp(1rem, 2.4vh, 1.6rem) 0 0;
  font-size: clamp(.88rem, 1.15vw, 1rem);
  line-height: 1.65;
  color: var(--muted);
}

/* ---------- button ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  min-height: 44px;      /* tap-target floor, including the short-viewport size */
  margin-top: clamp(1.3rem, 3vh, 2.1rem);
  padding: .9rem 1.7rem;
  border: 1px solid rgba(255, 122, 77, .45);
  border-radius: 999px;
  background: rgba(5, 6, 11, .5);
  font-family: var(--display);
  font-size: clamp(.7rem, .88vw, .78rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: border-color .3s var(--ease), background-color .3s var(--ease),
              color .3s var(--ease);
}

.btn__arrow { width: 22px; height: 11px; flex: none; }

.btn:hover {
  border-color: var(--coral);
  background: var(--coral);
  color: #150804;
}

/* ---------- feature row ---------- */

.features {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
}

.feature {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  /* the divider belongs between items, so it hangs off the left of each one
     except the first */
  padding-left: clamp(1.2rem, 2.6vw, 2.4rem);
  border-left: 1px solid var(--hair);
}

.feature:first-child {
  padding-left: 0;
  border-left: 0;
}

.feature__icon { width: 26px; height: 26px; flex: none; margin-top: .1rem; }
.feature__icon--violet { color: var(--violet); }
.feature__icon--coral  { color: var(--coral); }
.feature__icon--blue   { color: var(--blue); }

.feature__title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(.7rem, .88vw, .8rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.feature__note {
  margin: .4rem 0 0;
  font-size: clamp(.66rem, .8vw, .74rem);
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- scroll ---------- */

.scroll {
  position: relative;
  z-index: 2;
  justify-self: center;
  font-size: clamp(.58rem, .75vw, .68rem);
  font-weight: 500;
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: rgba(244, 244, 246, .48);
  transition: color .3s var(--ease);
}

.scroll:hover { color: var(--white); }

/* ---------- narrow: stack the saucer above the copy ----------
   There is no portrait cut of this clip, and a tall viewport crops the 16:9
   plate down to the saucer itself — the dark strip the copy needs is gone —
   so the footage becomes a band instead of a backdrop. That applies to a
   portrait tablet as much as to a phone. */

@media (max-width: 860px),
       (max-width: 1200px) and (orientation: portrait) {
  .hero {
    /* the band takes the flexible row, so it absorbs the slack on a tall phone
       and gives way first on a short one — the copy below never gets pushed off */
    grid-template-rows: auto 1fr auto auto auto;
    padding-inline: 0;
    row-gap: clamp(1.2rem, 3vh, 2rem);
  }

  .brand,
  .hero__copy,
  .features,
  .scroll { padding-inline: var(--gutter); }

  .hero__media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    min-height: 20svh;
    max-height: 44svh;
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
  }

  /* Centre the saucer in the band. Its beam axis sits at 68.2% of the plate's
     width, so the video is sized to the band's height and pulled left by that
     fraction of its own width, putting the beam on the band's centre line.
     Fallback for browsers without container units: plain cover, cropped as far
     right as it will go, which is as close to centred as they can get. */
  .hero__video { object-position: 100% center; }

  @supports (width: 1cqw) {
    .hero__media { container-type: size; }

    .hero__video {
      inset: 50% auto auto 50%;
      /* Big enough to cover the band twice over from the anchor: 177.8cqh is the
         width that makes the plate exactly as tall as the band, 158cqw the width
         that still reaches both edges once the beam is pulled to the middle.
         Whichever is larger wins, so there is never a bare edge to expose. */
      width: max(158cqw, 177.8cqh);
      height: auto;
      aspect-ratio: 16 / 9;
      object-position: center;
      transform: translate(-68.2%, -50%);
    }
  }

  .brand { order: -1; }        /* wordmark above the band, not under it */

  .hero__copy { align-self: start; padding-block: 0; }

  /* there is no room to hold the headline on one line here */
  .title {
    white-space: normal;
    font-size: clamp(1.9rem, 8vw, 2.8rem);
  }
  .title__line { white-space: normal; }

  .lede { max-width: 42ch; }
  .btn  { width: 100%; }

  /* stacking these would push the button and the scroll cue off the fold, so
     they stay a single compact row: icon over a two-word label, notes dropped */
  .features {
    flex-wrap: nowrap;
    gap: clamp(.6rem, 3vw, 1.4rem);
    margin-bottom: clamp(.6rem, 1.6vh, 1rem);
  }
  .feature {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: .5rem;
    padding-left: 0;
    border-left: 0;
  }
  .feature__icon { width: 22px; height: 22px; margin-top: 0; }
  .feature__title { font-size: clamp(.6rem, 2.4vw, .72rem); letter-spacing: .08em; }
  .feature__note { display: none; }
}

/* ---------- small phones ---------- */

@media (max-width: 380px) {
  .hero { row-gap: clamp(.9rem, 2.2vh, 1.4rem); }
  .hero__media { min-height: 16svh; }
  .title { font-size: clamp(1.75rem, 8.2vw, 2.1rem); }
  .lede  { font-size: .86rem; }
}

/* ---------- short viewports (phone held sideways) ----------
   Width but almost no height, so a stacked band does not fit — go back to
   the overlay layout and drop the feature row. */

@media (max-height: 560px) and (min-width: 561px) {
  .hero {
    grid-template-rows: auto 1fr auto;
    padding-inline: var(--gutter);
    row-gap: 0;
  }

  .brand { order: 0; }
  .brand, .hero__copy, .scroll { padding-inline: 0; }

  /* undo the band: it is a backdrop again, so every constraint the narrow
     rules put on the media and the video has to come back off */
  .hero__media {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    container-type: normal;
    -webkit-mask-image: none;
            mask-image: none;
  }

  .hero__video {
    inset: 0;
    width: 100%;
    min-width: 0;
    height: 100%;
    transform: none;
    object-position: center;
  }

  .hero__copy {
    align-self: center;
    padding-block: 0 clamp(.5rem, 4vh, 1.5rem);
  }

  .title { font-size: clamp(1.6rem, 4.6vw, 2.4rem); }
  .lede  { max-width: 32ch; font-size: .82rem; }
  .btn   { width: auto; padding: .75rem 1.4rem; }

  .features { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .scroll { transition: none; }
}