/* ============================================================
   Novara — hero section

   A cleaned 16:9 orbital vista with the wordmark and nav across
   the top and one line of type in the middle. The plate's luma,
   measured across the whole loop (out of 255):

     top strip      y 0.00-0.10   12-45     top bar
     upper third    y 0.10-0.35   11-62
     horizon        y 0.42-0.70   119-235   the sunrise
     lower earth    y 0.83-1.00   11-38

   The headline is centred, which puts it on the near side of the
   sunrise, so it carries a two-stage shadow of its own rather
   than a scrim going down over the footage.

   The clip is a boomerang: it plays forward, then back, so the
   loop point is a real frame step instead of the 40-frame jump
   the raw plate cut on. The 9:16 cut is built the same way.
   ============================================================ */

:root {
  --ink:     #04070E;   /* deep space in the clip reads #0A131B */
  --white:   #F2F5F8;
  --ice:     #8FD3FF;   /* the atmosphere rim, sampled #4C657F and lifted */
  --gold:    #FFCB8C;   /* the horizon glow, sampled #ECDDCD and warmed */
  --hair:    rgba(242, 245, 248, .18);
  --display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --gutter:  clamp(1.5rem, 5vw, 5rem);
  --ease:    cubic-bezier(.22, .61, .36, 1);
}

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

html, body { margin: 0; }

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

a { color: inherit; text-decoration: none; }

/* ---------- shell ----------
   The top bar is taken out of flow so the headline centres on the whole
   viewport rather than on the space left under the bar. */

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------- top bar ---------- */

.topbar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.3rem, 3.2vh, 2.2rem) var(--gutter);
  /* Near 16:9 and narrow, the crop brings the planet's lit crescent under the
     wordmark (luma 146 at the 95th percentile). A tight shadow under the wide
     one holds the glyph edges there without anything covering the footage. */
  text-shadow: 0 1px 3px rgba(4, 7, 14, .92), 0 1px 14px rgba(4, 7, 14, .75);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 800;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* a planet inside its orbit: a filled disc in a ring, drawn in one box */
.brand__mark {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid var(--ice);
  position: relative;
  flex: none;
}
.brand__mark::after {
  content: "";
  position: absolute;
  inset: 3.5px;
  border-radius: 50%;
  background: var(--ice);
}

/* the wordmark is one flex item: split across two, the .brand gap would open
   a hole between "Nova" and "ra" */
.brand__word { white-space: nowrap; }
.brand__ra { color: var(--ice); }

/* ---------- nav ---------- */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.2rem);
}

.nav__link,
.nav__cta {
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__link {
  color: rgba(242, 245, 248, .78);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .35s var(--ease), border-color .35s var(--ease);
}
.nav__link:hover, .nav__link:focus-visible {
  color: var(--white);
  border-color: var(--hair);
}

/* the one nav item that has to read over the galaxy on square windows, so it
   brings its own ground the way a button does */
.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--hair);
  background: rgba(4, 7, 14, .55);
  color: var(--white);
  text-shadow: none;
  transition: background .35s var(--ease), border-color .35s var(--ease);
}
.nav__cta:hover, .nav__cta:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

/* ---------- burger (narrow only) ---------- */

.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  margin: 5px auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- the headline ---------- */

.title {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 20ch;
  text-align: center;
  font-weight: 800;
  /* the dark band runs from a quarter to three quarters of the plate's width,
     and cover crops the sides, so this is sized to that strip, not the window */
  font-size: clamp(2.1rem, 4.6vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -.02em;
  /* Dead centre puts the type straight across the sunrise — luma 141 at the
     95th percentile, 235 at its worst pixels. Three shadows carry it there:
     a hairline that keeps the stroke edges crisp, a short one that seats the
     glyphs, and a wide one that darkens the plate immediately around them.
     All of it rides on the glyphs — the footage itself is never covered. */
  text-shadow: 0 0 2px rgba(4, 7, 14, .95),
               0 1px 4px rgba(4, 7, 14, .92),
               0 2px 22px rgba(4, 7, 14, .8);
}

.title__line { display: block; }

.title__line--grad {
  /* Line 1 is solid white and reads over the same band, so the ramp has to
     keep a comparable luminance: it runs ice to near-white and only turns
     warm at the very end, instead of dipping through a mid grey-blue. */
  background: linear-gradient(96deg, #A6DCFF 0%, #F2F8FF 46%, var(--gold) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  /* the glyphs are transparent here, so an inherited text-shadow paints
     straight through them and turns the gradient to mud — it has to go, and
     the dark edge comes from the drop-shadow below instead */
  text-shadow: none;
  /* keeps the gradient continuous if the line ever wraps */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  /* background-clip: text erases a text-shadow, so this line gets its dark
     edge from a drop-shadow instead, matching the three the white line has */
  filter: drop-shadow(0 0 2px rgba(4, 7, 14, .95))
          drop-shadow(0 1px 5px rgba(4, 7, 14, .9))
          drop-shadow(0 2px 20px rgba(4, 7, 14, .7));
}

/* ---------- square desktops ----------
   Cover crops the sides, and the squarer the window the more it takes. Past
   4:3 it has eaten far enough in that the planet's lit crescent — luma 218 at
   the 95th percentile — sits right under the wordmark, so the frame is biased
   right and the crescent goes back off the edge. Wider windows crop so little
   that this would barely move them, which is why it is scoped by aspect. */

@media (min-width: 861px) and (max-aspect-ratio: 4 / 3) {
  .hero__video { object-position: 88% center; }
}

/* ============================================================
   Narrow and portrait: the nav folds into a panel, and a phone
   held upright swaps in the 9:16 cut of the scene (see the source
   picker in index.html) rather than a keyhole crop of the 16:9
   plate. Held sideways it keeps the small landscape encode.

   Luma under the type on the portrait cut, across the loop:
     wordmark / burger   8-21    near black the whole way
     headline           mean 48, 95th 84
   ============================================================ */

@media (max-width: 860px),
       (max-width: 1200px) and (orientation: portrait) {

  .burger { display: block; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 3;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    /* only while the menu is open, and it replaces the view rather than
       tinting it — the footage is never sitting under a permanent scrim, and
       at anything short of opaque the headline ghosts through the links */
    background: var(--ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .nav[data-open] { opacity: 1; visibility: visible; }

  .nav__link, .nav__cta { font-size: .95rem; letter-spacing: .2em; }
  .nav__cta { min-height: 44px; padding: .8rem 1.6rem; }

  /* the burger sits above the panel so it can close it again */
  .burger { position: relative; z-index: 4; }

  .title { font-size: clamp(2rem, 8.4vw, 3rem); }
}

@media (max-width: 380px) {
  .title { font-size: clamp(1.8rem, 8.6vw, 2.15rem); }
}

/* ---------- short viewports (phone held sideways) ----------
   Wider than 16:9, so cover crops top and bottom and what is left is the
   middle of the plate. */

@media (max-height: 560px) and (min-width: 561px) {
    .title { font-size: clamp(1.6rem, 4.4vw, 2.3rem); }
  .nav   { gap: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; }
}