/* Inter 400 (SIL OFL 1.1), subset to the corner/label glyphs only (~3 KB). */
@font-face {
  font-family: "Inter Sub";
  src: url("/inter-400-sub.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #020202;
  --fg: #fff;
  --navy: #082b73;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: "Inter Sub", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* One scale for the whole layout: 1 unit = 1px of the 1280x720 mockup,
     driven by height on wide screens and by width on phones. */
  --s: min(calc(100vh / 720), calc(100vw / 560), 1.5px);
  --s: min(calc(100svh / 720), calc(100vw / 560), 1.5px);
  --fs: max(13px, calc(16.5 * var(--s)));
}

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

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--fs)/1 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fine static grain over the near-black, behind the content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .016'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* One vertical axis: every child is centred in the same column. */
main {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Nothing is pinned to the bottom edge any more, so less bottom room is needed. */
  padding: 64px 20px 24px;
}

.mark {
  display: block;
  width: calc(300 * var(--s));
  height: auto;
  overflow: visible;
}

.title { margin: calc(20 * var(--s)) 0 0; line-height: 0; }

.wordmark {
  display: block;
  height: calc(58 * var(--s));
  width: auto;
  fill: currentColor;
  color: var(--fg);
}

.label {
  margin: calc(36 * var(--s)) 0 0;
  padding: calc(12.75 * var(--s)) calc(18 * var(--s));
  font-size: max(12px, calc(16.5 * var(--s)));
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg);
  background: var(--navy);
}

/* Instagram handle, centred under the COMING SOON box. */
.ig {
  margin-top: calc(26 * var(--s));
  padding: 10px 8px; /* ~44px tap target without changing the look */
  color: var(--fg);
  text-decoration: none;
}
.ig:hover, .ig:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.ig:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }

.corner {
  position: fixed;
  z-index: 1;
  margin: 0;
  color: var(--fg);
  --x: max(16px, calc(27 * var(--s)));
  --y: max(16px, calc(26 * var(--s)));
}
/* Cap tops sit at --y (Inter: cap top is .137em below a line-height:1 box). */
.tr { top: calc(var(--y) - .137em); right: var(--x); }

/* Top-left: the mark as a home link, centred on the "EST. 2026" cap line,
   inside a 44px tap target. */
.tl { --mk: max(18px, calc(20 * var(--s))); top: max(0px, calc(var(--y) + .3635 * var(--fs) - 22px)); left: calc(var(--x) + var(--mk) / 2 - 22px); }
.home { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.home:focus-visible { outline: 2px solid var(--fg); outline-offset: -4px; }
.corner-mark { display: block; width: var(--mk); height: var(--mk); transition: opacity .2s; }
.home:hover .corner-mark { opacity: .75; }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Motion ---------- */

.ring, .ring-in { transform-box: fill-box; transform-origin: center; }
.ring    { animation: spin 36s linear infinite; }
.ring-in { animation: ring-in 1.6s var(--ease) both; }
.core    { animation: fade 1s ease-out .2s both; }

.bar-glow { opacity: .55; animation: ignite 1.2s ease-out .6s both, breathe 6s ease-in-out 1.8s infinite; }
.bar-core, .bar-flare { animation: flicker 7s steps(1, end) 2.4s infinite; }
.bar-fx   { opacity: 0; mix-blend-mode: screen; animation: rgb 7s steps(1, end) 2.4s infinite; }
.bar-fx.c { animation-name: rgb-c; }

.title  { animation: rise 1s var(--ease) .9s both; }
.label  { animation: rise 1s var(--ease) 1.15s both; }
.ig     { animation: fade 1.2s ease-out 1.4s both; }
.corner { animation: fade 1.2s ease-out 1.4s both; }

@keyframes spin    { to { transform: rotate(1turn); } }
@keyframes ring-in { from { opacity: 0; transform: scale(.9) rotate(-40deg); } }
@keyframes fade    { from { opacity: 0; } }
@keyframes rise    { from { opacity: 0; transform: translateY(10px); } }
@keyframes ignite  { from { opacity: 0; } }
@keyframes breathe { 50% { opacity: .55; } }

/* Short, calm static burst near the end of each 7s cycle. */
@keyframes flicker {
  0%, 90%, 91.4%, 92.6%, 94% { opacity: 1; }
  90.6% { opacity: .5; }
  92%   { opacity: .75; }
  93.2% { opacity: .4; }
}
@keyframes rgb {
  0%, 90%, 91.4%, 92.6%, 94% { opacity: 0; transform: none; }
  90.6% { opacity: .7; transform: translate(-2px, -.6px); }
  92%   { opacity: .5; transform: translate(-3px, .4px); }
  93.2% { opacity: .7; transform: translate(-1.5px, 0); }
}
@keyframes rgb-c {
  0%, 90%, 91.4%, 92.6%, 94% { opacity: 0; transform: none; }
  90.6% { opacity: .7; transform: translate(2px, .6px); }
  92%   { opacity: .5; transform: translate(3px, -.4px); }
  93.2% { opacity: .7; transform: translate(1.5px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}