/* ==========================================================================
   NovaSky — coming soon page
   Figma: XF6Fy3GnOwPjijCNYVIogr · frame 1:2 "NOVASKY1" (1920×1080)
   The file has no variables: tokens are derived from node fills / text styles.
   ========================================================================== */

:root {
  /* Colors */
  --color-black: #000000;     /* Figma: frame fill */
  --color-white: #ffffff;     /* Figma: text + "Nova" fill */
  --color-sky-500: #62a0d7;   /* Figma: logo gradient, stop 0 */
  --color-sky-300: #86cedf;   /* Figma: logo gradient, stop 1 */
  --color-beam: #1c9bff;      /* derived: core blue of the STRISCE light streaks */

  /* Typography */
  --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;

  /* 1 Figma px of the 1920×1080 frame, scaled to fit the viewport */
  --u: min(calc(100vw / 1920), calc(100vh / 1080));

  --text-eyebrow: clamp(0.875rem, calc(20 * var(--u)), 1.5rem);  /* Figma: Instrument Sans Regular 20 */
  --text-title: clamp(1.375rem, calc(40 * var(--u)), 3.5rem);    /* Figma: Instrument Sans SemiBold 40 */
  --text-body: clamp(0.9375rem, calc(20 * var(--u)), 1.5rem);    /* Figma: Instrument Sans Regular 20 */
  --leading: 1.22;                                               /* Figma: line-height "normal" */

  /* Layout — Figma rhythm: 87px between blocks, 17px title → lead */
  --logo-width: clamp(15.5rem, calc(819.38 * var(--u)), 75rem);
  --lead-width: min(100%, 35.8em); /* Figma: 716px at 20px → same wrap at any size */
  --gap-xl: clamp(2rem, calc(87 * var(--u)), 7.5rem);
  --gap-sm: clamp(0.625rem, calc(17 * var(--u)), 1.5rem);
}

@supports (height: 100svh) {
  :root { --u: min(calc(100vw / 1920), calc(100svh / 1080)); }
}

/* Portrait tablets (no Figma frame): scale from a narrower 1250px reference */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  :root { --u: min(calc(100vw / 1250), calc(100svh / 1080)); }
}

@media (max-width: 767px) {
  :root {
    --logo-width: min(86vw, 26rem);
    --gap-xl: clamp(2.25rem, 9vw, 3.5rem);
  }
}

/* Base
   ========================================================================== */

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

html {
  color-scheme: dark;
  background: var(--color-black);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--color-sky-300);
  outline-offset: 0.35em;
  border-radius: 2px;
}

/* Hidden only until GSAP sets the intro's start state (removed if GSAP fails) */
.js [data-stage] { visibility: hidden; }

/* Scene — Figma 1:72 "STRISCE"
   The 1920×1080 stage always covers the viewport; 1 design px = 100cqw / 1920.
   ========================================================================== */

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.scene__stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, calc(100vh * 16 / 9));
  height: max(56.25vw, 100vh);
  translate: -50% -50%;
  container-type: size;
}

/* Portrait (no Figma frame): slide the crop window left so both streaks stay in shot */
@media (orientation: portrait) {
  .scene__stage { translate: -31% -50%; }
}

.scene__layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* Wrapper carries the Figma geometry; GSAP only ever animates the inner image */
.streak {
  --px: calc(100cqw / 1920);
  position: absolute;
  width: calc(2504 * var(--px));
  height: calc(1762 * var(--px));
  translate: -50% -50%;
}

.streak__img {
  --mask-a: 100%;
  --mask-b: 140%;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, #000 var(--mask-a), transparent var(--mask-b));
  mask-image: linear-gradient(90deg, #000 var(--mask-a), transparent var(--mask-b));
  will-change: transform, opacity;
  user-select: none;
}

/* Figma 1:52 — centre (717.5, 790), rotated −148.61° */
.streak--a {
  left: calc(717.5 * var(--px));
  top: calc(790 * var(--px));
  rotate: -148.61deg;
}

/* Figma 1:53 — centre (1227.1, 221.3), rotated 25.59° */
.streak--b {
  left: calc(1227.1 * var(--px));
  top: calc(221.3 * var(--px));
  rotate: 25.59deg;
}

.scene__gl,
.scene__stars,
.scene__particles,
.scene__trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* WebGL takes over the streaks once its texture is live; the <img> layer is the fallback */
.scene__gl { visibility: hidden; }
.scene.is-gl .scene__gl { visibility: visible; }
.scene.is-gl .streak { visibility: hidden; }

.scene__particles {
  opacity: 0;
  visibility: hidden;
}

.scene__grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: 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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Cursor light (fine pointers only)
   ========================================================================== */

.cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 44vmax;
  aspect-ratio: 1;
  margin: -22vmax 0 0 -22vmax;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-sky-500) 17%, transparent),
    color-mix(in srgb, var(--color-beam) 6%, transparent) 45%,
    transparent
  );
  mix-blend-mode: screen;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
  .cursor-glow { display: none; }
}

/* Page — Figma 1:2
   ========================================================================== */

.page {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 7vh, 4rem) 1rem;
  overflow-x: clip; /* orbit + flash may bleed past the viewport edges */
  text-align: center;
}

/* Figma 1:75 */
.eyebrow {
  margin: 0;
  font-size: var(--text-eyebrow);
}

/* Logo — Figma 1:71
   ========================================================================== */

.logo {
  position: relative;
  width: var(--logo-width);
  margin-top: var(--gap-xl);
  perspective: 900px;
}

.logo__tilt { transform-style: preserve-3d; }

.logo__title {
  margin: 0;
  font-size: inherit;
  line-height: 0;
}

.logo__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.logo__flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 2px;
  translate: -50% -50%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-sky-300) 30%,
    var(--color-white) 50%,
    var(--color-sky-300) 70%,
    transparent
  );
  box-shadow: 0 0 24px 3px color-mix(in srgb, var(--color-beam) 70%, transparent);
  opacity: 0;
  pointer-events: none;
}

.logo__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  aspect-ratio: 2.4;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--color-beam) 38%, transparent),
    color-mix(in srgb, var(--color-sky-500) 10%, transparent) 55%,
    transparent
  );
  opacity: 0;
  pointer-events: none;
}

/* Pitch — Figma 1:79
   ========================================================================== */

.pitch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-sm);
  margin-top: var(--gap-xl);
}

/* Figma 1:73 */
.pitch__title {
  margin: 0;
  font-size: var(--text-title);
  font-weight: 600;
  line-height: var(--leading);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Light sweep across the title (added after the intro) */
.pitch__title.is-shimmering {
  background: linear-gradient(
    100deg,
    var(--color-white) 40%,
    var(--color-sky-300) 47%,
    var(--color-white) 50%,
    var(--color-sky-300) 53%,
    var(--color-white) 60%
  ) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: title-shimmer 8s cubic-bezier(0.6, 0, 0.3, 1) 1.5s infinite;
}

@keyframes title-shimmer {
  0%, 70% { background-position: 100% 0; }
  100%    { background-position: 0% 0; }
}

/* Figma 1:76 */
.pitch__lead {
  width: var(--lead-width);
  margin: 0;
  font-size: var(--text-body);
  text-wrap: pretty;
}

/* Contacts — Figma 1:74
   ========================================================================== */

.contacts {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--gap-xl);
  font-size: var(--text-body);
  font-style: normal;
  text-wrap: balance;
}

.contacts__item {
  display: inline-block;
  text-decoration: none;
  transition: color 0.4s ease;
}

a.contacts__item:hover { color: var(--color-sky-300); }

/* Underline drawn as a background so it can wipe on hover */
.contacts__item--mail {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - 0.1em) / 100% 1px;
}

.contacts__item--mail:hover {
  animation: underline-wipe 0.9s cubic-bezier(0.7, 0, 0.2, 1);
}

@keyframes underline-wipe {
  0%     { background-size: 100% 1px; background-position: 100% calc(100% - 0.1em); }
  45%    { background-size: 0% 1px;   background-position: 100% calc(100% - 0.1em); }
  45.01% { background-size: 0% 1px;   background-position: 0 calc(100% - 0.1em); }
  100%   { background-size: 100% 1px; background-position: 0 calc(100% - 0.1em); }
}

@media (prefers-reduced-motion: reduce) {
  .contacts__item--mail:hover,
  .pitch__title.is-shimmering { animation: none; }
}