/* w9w6.com — "one shape, two digits"
   ---------------------------------------------------------------
   Constraints (repo, not negotiable):
   - Animations touch transform and opacity only. Nothing else —
     that keeps every moving layer on the compositor.
   - No width media queries. One fluid layout; every size is a
     min()/clamp() expression that also respects viewport height,
     so short landscape windows shrink the brand instead of
     pushing the motto off screen.
   - No client-side JS, no font fetch, no image backgrounds.
*/

:root {
  --bg: #05070c;
  --ink: #e9eef7;
  --muted: rgba(233, 238, 247, 0.58);
  --faint: rgba(233, 238, 247, 0.14);
  --accent: #6c8cff;
  --teal: #2ee6c8;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, Menlo, monospace;
  --brand: "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", Inter, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--brand);
  background:
    radial-gradient(120% 90% at 50% 0%, #0a1020 0%, var(--bg) 58%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(108, 140, 255, 0.32); }

/* ------------------------------------------------------------
   The field: two drifting auroras, a hairline grid, orbit rings
   around the brand, a static vignette. Everything fixed, all
   motion transform/opacity.
   ------------------------------------------------------------ */
.field { position: fixed; inset: 0; overflow: hidden; }
.field > * { position: absolute; }

.aurora {
  width: 130vmin;
  height: 130vmin;
  border-radius: 50%;
  pointer-events: none;
}
.aurora-a {
  top: -40vmin;
  left: -30vmin;
  background: radial-gradient(circle, rgba(108, 140, 255, 0.20) 0%, transparent 62%);
  animation: drift-a 46s ease-in-out infinite alternate;
}
.aurora-b {
  right: -45vmin;
  bottom: -50vmin;
  background: radial-gradient(circle, rgba(46, 230, 200, 0.13) 0%, transparent 62%);
  animation: drift-b 58s ease-in-out infinite alternate;
}

@keyframes drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(9vmin, 6vmin, 0) scale(1.12); }
}
@keyframes drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to   { transform: translate3d(-8vmin, -5vmin, 0) scale(1); }
}

.grid {
  inset: -260px;
  background:
    repeating-linear-gradient(90deg,  rgba(233, 238, 247, 0.032) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(0deg,   rgba(233, 238, 247, 0.032) 0 1px, transparent 1px 88px);
  -webkit-mask-image: radial-gradient(ellipse 62% 56% at 50% 46%, black 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 62% 56% at 50% 46%, black 0%, transparent 78%);
  animation: grid-drift 44s ease-in-out infinite alternate;
}
@keyframes grid-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(44px, 26px, 0); }
}

/* Three concentric rings, each carrying one dot; the ring spins,
   the dot orbits. Radii in vmin so they scale with the brand. */
.orbit {
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid var(--faint);
  border-radius: 50%;
  opacity: 0.55;
}
.ring i {
  position: absolute;
  top: -2px;
  left: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
}
.ring-1 { width: 54vmin; height: 54vmin; margin: -27vmin 0 0 -27vmin; animation: spin 34s linear infinite; }
.ring-2 { width: 76vmin; height: 76vmin; margin: -38vmin 0 0 -38vmin; animation: spin 54s linear infinite reverse; opacity: 0.4; }
.ring-2 i { background: var(--teal); }
.ring-3 { width: 102vmin; height: 102vmin; margin: -51vmin 0 0 -51vmin; animation: spin 76s linear infinite; opacity: 0.28; }
.ring-3 i { background: var(--ink); opacity: 0.6; }

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.vignette {
  inset: 0;
  background: radial-gradient(115% 90% at 50% 50%, transparent 44%, rgba(3, 5, 9, 0.72) 100%);
}

/* ------------------------------------------------------------
   Layout: one centered column, no scroll, footer pinned.
   ------------------------------------------------------------ */
main {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 3vh, 2.2rem);
  gap: clamp(0.9rem, 3svh, 2.2rem);
  padding: clamp(1rem, 4vmin, 3rem);
}

.brand {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.9rem, 3vh, 2rem);
  gap: clamp(0.9rem, 3svh, 2rem);
}

/* ------------------------------------------------------------
   The sigil: a framed glyph that is a 9 upright and a 6 turned.
   The turn pauses on each digit so both read cleanly.
   transform-origin is coupled to the glyph's translate() in
   index.html — move one, move the other.
   ------------------------------------------------------------ */
.sigil {
  display: block;
  width: min(40vw, 34vh, 240px);
  width: min(40vw, 34svh, 240px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 26px rgba(108, 140, 255, 0.22));
  animation: sigil-in 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both;
}
.sigil-frame {
  fill: none;
  stroke: var(--faint);
  stroke-width: 1.5;
}
.flip, .ghost {
  fill: none;
  stroke: url(#sigil-stroke);
  stroke-width: 7;
  stroke-linecap: round;
}
.flip {
  transform-box: view-box;
  transform-origin: 100px 104px;
  animation: sigil-turn 14s infinite;
}
.ghost { opacity: 0; }

@keyframes sigil-turn {
  0%, 28%  { transform: rotate(0deg);   animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  43%, 78% { transform: rotate(180deg); animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1); }
  93%, 100% { transform: rotate(360deg); }
}

.satellite {
  transform-box: view-box;
  transform-origin: 100px 100px;
  animation: spin 24s linear infinite;
}
.satellite circle { fill: var(--teal); }

@keyframes sigil-in {
  from { opacity: 0; transform: scale(0.9) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ------------------------------------------------------------
   The wordmark: four staggered letters, one stroke weight.
   ------------------------------------------------------------ */
.word {
  display: block;
  width: min(74vw, 60vh, 540px);
  width: min(74vw, 60svh, 540px);
  height: auto;
  overflow: visible;
}
.word .l {
  fill: none;
  stroke: url(#word-stroke);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.word .l1 { animation-delay: 0.4s; }
.word .l2 { animation-delay: 0.52s; }
.word .l3 { animation-delay: 0.64s; }
.word .l4 { animation-delay: 0.76s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------
   Motto and footer.
   ------------------------------------------------------------ */
.motto {
  margin: 0;
  font-size: clamp(0.95rem, 1vw + 0.55rem, 1.3rem);
  font-weight: 300;
  letter-spacing: 0.045em;
  color: var(--muted);
  animation: fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.95s both;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(12px, 3.5vh, 30px);
  margin: 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: rgba(233, 238, 247, 0.34);
  animation: fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.25s both;
}

/* ------------------------------------------------------------
   Reduced motion: travel is replaced with sequence, nothing is
   frozen mid-slide. The sigil stops turning and instead the 9
   dims while the 6 (already rotated, always present) brightens —
   the identity still flips, on opacity alone. Rings stop
   orbiting and brighten in turn; entrances become plain fades.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .aurora-a, .aurora-b {
    animation: breathe 16s ease-in-out infinite alternate;
  }
  .grid { animation: none; }

  .ring-1 { animation: ring-glow 9s ease-in-out infinite; }
  .ring-2 { animation: ring-glow 9s ease-in-out 3s infinite; }
  .ring-3 { animation: ring-glow 9s ease-in-out 6s infinite; }

  .satellite { animation: breathe 6s ease-in-out infinite alternate; }

  .flip  { animation: nine-out 10s ease-in-out infinite alternate; }
  .ghost { animation: six-in 10s ease-in-out infinite alternate; }

  .sigil, .word .l, .motto, footer {
    animation-name: enter-fade;
    animation-duration: 0.8s;
    animation-fill-mode: both;
  }

  @keyframes breathe {
    from { opacity: 0.35; }
    to   { opacity: 1; }
  }
  @keyframes ring-glow {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.85; }
  }
  @keyframes nine-out {
    from { opacity: 1; }
    to   { opacity: 0.18; }
  }
  @keyframes six-in {
    from { opacity: 0; }
    to   { opacity: 0.9; }
  }
  @keyframes enter-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}