/* =====================================================================
   NOVA SPORTS — Standalone HTML5 build
   style.css — base, layout and component styles
   (Animation keyframes live in animations.css; media queries in
    responsive.css.)
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --nova-magenta: #b9007b;
  --nova-magenta-bright: #ff2fb0;
  --nova-plum: #50004d;
  --nova-periwinkle: #6a77db;
  --nova-blush: #ffd8fa;
  --nova-lime: #b7e000;
  --nova-gold: #ffd301;
  --nova-void: #05010a;
  --nova-reveal-bg: #050005;

  --font-body: "Outfit", system-ui, -apple-system, sans-serif;
  --font-display: "Saira Condensed", "Outfit", sans-serif;
  --font-script: "Kaushan Script", cursive;

  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%;
  height: 100%;
  background: var(--nova-void);
  color: #fff;
  font-family: var(--font-body);
  overflow: hidden;                 /* single screen, no scroll */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--nova-magenta); color: #fff; }

/* Shared grain overlay */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* =====================================================================
   HERO  (destination "This Is Her Playground")
   ===================================================================== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--nova-void);
  color: #fff;
}

/* --- Background gradient layers --- */
.bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bg-blue    { background: radial-gradient(60% 55% at 0% 0%, rgba(37,53,150,0.55), transparent 60%); }
.bg-magenta { background: radial-gradient(75% 90% at 100% 22%, rgba(255,20,140,0.55), rgba(120,0,90,0.35) 45%, transparent 72%); }
.bg-vignette{ background: radial-gradient(120% 120% at 30% 60%, transparent 40%, rgba(5,1,10,0.85) 100%); }

/* --- Official monogram watermark --- */
.monogram-watermark {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  width: 72vmin;
  height: 72vmin;
  opacity: 0.16;
  pointer-events: none;
  display: none;                    /* shown from md up (responsive.css) */
  background: linear-gradient(135deg, #ff2fb0, #b9007b 55%, #50004d);
  -webkit-mask: url("../images/monogram-official.png") no-repeat center / contain;
  mask: url("../images/monogram-official.png") no-repeat center / contain;
  filter: blur(1px);
}

/* --- Player photograph --- */
.player {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 2;
  height: 78%;
  width: auto;
  object-fit: contain;
  object-position: bottom;
  pointer-events: none;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
}

/* --- Motion streaks --- */
.streaks {
  position: absolute;
  right: 0;
  top: 50%;
  z-index: 3;
  height: 10rem;
  width: 50%;
  transform: translateY(-1.5rem);
  pointer-events: none;
  display: none;                    /* shown from md up */
}
.streak { position: absolute; height: 2px; }
.streak-1 { left: 10%; top: 1.5rem; width: 10rem; opacity: 0.7; background: linear-gradient(90deg, transparent, var(--nova-magenta-bright), transparent); }
.streak-2 { left: 18%; top: 4rem;   width: 16rem; opacity: 0.5; background: linear-gradient(90deg, transparent, var(--nova-blush), transparent); }
.streak-3 { left: 6%;  top: 7rem;   width: 13rem; opacity: 0.4; background: linear-gradient(90deg, transparent, var(--nova-lime), transparent); }

.hero .grain { z-index: 4; }

/* --- Foreground content shell --- */
.hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 3vh 5vw;
}

/* Chevron accents */
.chev { width: 9px; height: 12px; flex: none; }

/* --- Header --- */
.hero-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}
.header-dots { display: flex; align-items: center; gap: 0.375rem; }
.header-dots span { width: 4px; height: 4px; border-radius: 9999px; background: var(--nova-lime); }
.header-logo { display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.header-accent { display: none; align-items: center; gap: 0.375rem; }
.header-accent .dash { width: 2rem; height: 2px; background: var(--nova-lime); }
.logo { height: 5.2vh; max-height: 62px; min-height: 34px; width: auto; user-select: none; }
.header-chevrons { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; }

/* --- Main copy --- */
.hero-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 100%;
}
.eyebrow {
  margin-bottom: 0.5rem;
  font-size: clamp(0.7rem, 1.4vw, 0.95rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--nova-lime);
}
.headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: -0.02em;
}
.headline span { display: block; }
.headline-white {
  font-size: clamp(2.6rem, 8.2vw, 7rem);
  background-image: linear-gradient(180deg, #ffffff, #d7d2df);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 3px 24px rgba(0,0,0,0.5));
}
.headline-grad {
  font-size: clamp(3rem, 9.4vw, 8rem);
  background-image: linear-gradient(95deg, #b7e000 0%, #d4e600 24%, #ff8fc4 62%, #ff2fb0 82%, #b9007b 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.divider { display: flex; align-items: center; gap: 0.375rem; margin: 1rem 0; }
.divider span { height: 3px; background: var(--nova-lime); }
.lede {
  max-width: 28rem;
  font-size: clamp(0.82rem, 1.5vw, 1.05rem);
  line-height: 1.625;
  color: rgba(231, 220, 237, 0.85);
}
.building {
  margin-top: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: clamp(0.68rem, 1.3vw, 0.9rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--nova-lime);
}
.building-chevs { display: flex; align-items: center; gap: 2px; }
.building-chevs-right { display: none; }
.launching {
  margin-top: 0.25rem;
  font-family: var(--font-script);
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  line-height: 1;
}
.launching-lime { color: var(--nova-lime); }
.launching-grad {
  background-image: linear-gradient(90deg, #ff8fc4, #ff2fb0, #b9007b);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* --- Loader --- */
.loader { position: relative; margin-top: 1rem; display: flex; align-items: center; height: 1.5rem; max-width: 32rem; }
.loader-track {
  height: 6px; width: 100%; border-radius: 9999px;
  background: repeating-linear-gradient(90deg, rgba(255,216,250,0.25) 0 14px, transparent 14px 22px);
}
.loader-fill {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 6px; width: 3%; border-radius: 9999px;
  background: linear-gradient(90deg, #b7e000, #ff2fb0, #ffd301);
  box-shadow: 0 0 14px 1px rgba(255,47,176,0.55);
}
.loader-ball { position: absolute; top: 50%; left: 1%; transform: translateY(-50%); line-height: 0; }
.loader-ball svg { filter: drop-shadow(0 0 8px rgba(183,224,0,0.9)); }

/* --- Footer --- */
.hero-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 0.5rem;
}
.footer-social { display: flex; align-items: center; gap: 0.75rem; }
.social-icons { display: flex; align-items: center; gap: 0.625rem; }
.ic { transition: color 0.3s var(--ease-expo); line-height: 0; }
.ic-insta { color: var(--nova-blush); }
.ic-tw    { color: var(--nova-periwinkle); }
.ic-yt    { color: var(--nova-magenta-bright); }
.ic:hover, .ic:focus-visible { color: #fff; outline: none; }
.footer-sep { color: rgba(255,255,255,0.25); }
.footer-handle { font-size: clamp(0.72rem, 1.3vw, 0.9rem); color: rgba(255,255,255,0.8); }
.footer-center {
  display: none;
  text-align: center;
  font-size: clamp(0.68rem, 1.2vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 0.34em;
  color: rgba(255,255,255,0.7);
}
.footer-tag {
  display: flex; flex-direction: column; align-items: flex-end; justify-self: end;
  text-align: right;
  font-size: clamp(0.7rem, 1.2vw, 0.9rem);
  font-weight: 600; text-transform: uppercase; line-height: 1.25; letter-spacing: 0.14em;
}
.footer-tag-more { display: flex; align-items: center; gap: 0.375rem; }

/* =====================================================================
   REVEAL  (cinematic intro overlay)
   Initial states below mirror the GSAP set() values so there is no
   flash of content before the timeline starts.
   ===================================================================== */
.reveal {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: var(--nova-reveal-bg);
}
.reveal--done { display: none; }

.nv-bg {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(120% 100% at 50% 120%, #b9007b 0%, #50004d 38%, #12001a 70%, #050005 100%);
}
.nv-glow {
  position: absolute; left: 50%; top: 50%;
  width: 70vmin; height: 70vmin;
  margin-left: -35vmin; margin-top: -35vmin;   /* centered without transform */
  border-radius: 9999px; opacity: 0;
  background: radial-gradient(circle, rgba(185,0,123,0.55) 0%, rgba(80,0,77,0.25) 40%, transparent 70%);
  filter: blur(20px);
}

.nv-lights { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.nv-light { position: absolute; height: 70%; width: 45%; top: -15%; filter: blur(8px); }
.nv-light-l { left: -10%;  background: conic-gradient(from 200deg at 20% 0%, transparent 0deg, rgba(185,0,123,0.28) 20deg, transparent 55deg); }
.nv-light-r { right: -10%; background: conic-gradient(from 105deg at 80% 0%, transparent 0deg, rgba(106,119,219,0.24) 22deg, transparent 55deg); }

.nv-pitch { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }

.nv-particles { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.nv-particle { position: absolute; border-radius: 9999px; will-change: transform, opacity; }

/* Center stage */
.nv-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.nv-stage-inner { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nv-mono-area { position: relative; display: flex; align-items: center; justify-content: center; width: 46vmin; height: 46vmin; max-width: 420px; max-height: 420px; }
.nv-blueprint { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.nv-mono-wrap {
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transform: rotate(-6deg) scale(0.92);
}
.nv-mono-img { height: auto; width: 40vmin; max-width: 320px; user-select: none; filter: drop-shadow(0 0 24px rgba(185,0,123,0.45)); }
.nv-shine {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transform: translateX(-160%);
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.75) 50%, transparent 65%);
  mix-blend-mode: screen;
}

.nv-streak {
  position: absolute; left: 0; top: calc(50% - 1.5px);
  height: 3px; width: 80%; opacity: 0;
  transform: translateX(-140%);
  background: linear-gradient(90deg, transparent, #ffd8fa, #ffffff, #b9007b, transparent);
  filter: blur(1px);
  box-shadow: 0 0 18px 3px rgba(255,216,250,0.7);
  pointer-events: none;
}

.nv-logo-wrap {
  position: relative; margin-top: -4vmin;
  opacity: 0;
  clip-path: inset(0 50% 0 50%);
  transform: translateY(10px);
  will-change: clip-path, opacity, transform;
}
.nv-logo-img { height: auto; width: 64vw; max-width: 420px; user-select: none; filter: drop-shadow(0 0 30px rgba(185,0,123,0.4)); }
.nv-flare {
  position: absolute; left: calc(46% - 20px); top: -8%;
  width: 40px; height: 40px; border-radius: 9999px; opacity: 0;
  transform: scale(0.4);
  background: radial-gradient(circle, rgba(255,255,255,0.95), rgba(255,216,250,0.5) 35%, transparent 70%);
  pointer-events: none;
}

.nv-tags { position: relative; margin-top: 6vmin; height: 1.5rem; width: 100%; text-align: center; }
.nv-tag-1, .nv-tag-2 {
  position: absolute; inset: 0; display: block;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 2px; opacity: 0;
}
.nv-tag-1 { color: var(--nova-blush); }
.nv-tag-2 { color: #fff; }

.reveal .grain { z-index: 5; }

.nv-skip {
  position: absolute; bottom: 1.5rem; right: 1.5rem; z-index: 10;
  border: 0; background: transparent; border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-body); font-size: 10px; text-transform: uppercase; letter-spacing: 0.35em;
  color: rgba(255,255,255,0.6); transition: color 0.3s var(--ease-expo);
}
.nv-skip:hover { color: #fff; }
.nv-skip:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255,216,250,0.7); }