/* hero.css — shared hero effects (background layers, entrance, spotlight) for every page's hero.
   Hero types: .hero-wrapper (index slider), .cs-hero-section (game pages), .vps-hero-section (vps, dedicated),
   .legal-hero (terms). The dot grid ::before lives in layout.css; the layers below are injected by hero.js
   (all aria-hidden, pointer-events: none). The entrance animation is pure CSS, so content never stays hidden
   if JS fails, and it replays automatically when an index .hero-slide becomes .active (display none -> block).
   Animations intentionally ignore prefers-reduced-motion (client request). */

/* ------------------------------------------------------------------ palette per hero type */
.hero-wrapper, .vps-hero-section, .legal-hero {
  --hx-c1: var(--primary);
  --hx-c2: #06b6d4;
  --hx-c3: var(--game-accent);
  --hx-glow: .62;
}
.cs-hero-section {
  --hx-c1: var(--game-accent);
  --hx-c2: var(--primary);
  --hx-c3: var(--accent-orange);
  --hx-glow: .62;
}
.legal-hero { --hx-glow: .32; }
html[data-theme="light"] .hero-wrapper, html[data-theme="light"] .vps-hero-section,
html[data-theme="light"] .cs-hero-section { --hx-glow: .26; }
html[data-theme="light"] .legal-hero { --hx-glow: .18; }

/* ------------------------------------------------------------------ ambient layer (under the dot grid) */
.hx-fx {
  position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  contain: strict;
}
.hx-par { position: absolute; inset: -8%; will-change: transform; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.hx-blob {
  position: absolute; display: block; border-radius: 50%;
  opacity: var(--hx-glow);
  will-change: transform;
  animation: hxDrift1 22s ease-in-out infinite alternate;
}
.hx-b1 {
  width: 52vw; height: 52vw; max-width: 760px; max-height: 760px; left: 4%; top: -18%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hx-c1) 55%, transparent), transparent);
}
.hx-b2 {
  width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; right: 2%; top: 8%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hx-c2) 42%, transparent), transparent);
  animation-name: hxDrift2; animation-duration: 27s;
}
.hx-b3 {
  width: 34vw; height: 34vw; max-width: 500px; max-height: 500px; left: 38%; bottom: -26%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hx-c3) 34%, transparent), transparent);
  animation-name: hxDrift3; animation-duration: 31s;
}
/* centred heroes: keep the light balanced around the text */
.vps-hero-section .hx-b1, .legal-hero .hx-b1 { left: 18%; top: -40%; }
.vps-hero-section .hx-b2 { right: 10%; top: -10%; }
.legal-hero .hx-b2 { right: 0; top: -30%; }
.legal-hero .hx-b3 { display: none; }

@keyframes hxDrift1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6%, 8%, 0) scale(1.08); }
  100% { transform: translate3d(-4%, 3%, 0) scale(.96); }
}
@keyframes hxDrift2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-8%, 6%, 0) scale(.94); }
  100% { transform: translate3d(4%, -6%, 0) scale(1.06); }
}
@keyframes hxDrift3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(10%, -10%, 0) scale(1.1); }
  100% { transform: translate3d(-6%, -4%, 0) scale(1); }
}

/* cursor light (moved with transform by hero.js) */
.hx-spot {
  position: absolute; left: 0; top: 0; width: 640px; height: 640px; margin: -320px 0 0 -320px;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--hx-c1) 22%, transparent), transparent);
  opacity: 0; transition: opacity .5s ease;
  will-change: transform, opacity;
}
html[data-theme="light"] .hx-spot { background: radial-gradient(closest-side, color-mix(in srgb, var(--hx-c1) 9%, transparent), transparent); }

/* dots that light up near the cursor (sits above the base dot grid) */
.hx-dots {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--hx-c1) 70%, #fff) 1.4px, transparent 1.8px);
  background-size: 22px 22px;
  --mx: -999px; --my: -999px;
  -webkit-mask-image: radial-gradient(220px circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%);
  mask-image: radial-gradient(220px circle at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%);
  opacity: 0; transition: opacity .5s ease;
}
html[data-theme="light"] .hx-dots { background-image: radial-gradient(color-mix(in srgb, var(--hx-c1) 75%, transparent) 1.15px, transparent 1.5px); }
.hx-hot .hx-spot { opacity: 1; }
.hx-hot .hx-dots { opacity: 1; }

/* thin animated light running along the bottom edge */
.hx-line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hx-c1) 35%, transparent) 50%, transparent);
}
.hx-line::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
  background: linear-gradient(90deg, transparent, var(--hx-c1), color-mix(in srgb, var(--accent-orange) 85%, transparent), transparent);
  transform: translateX(-100%);
  animation: hxLine 7s cubic-bezier(.55, 0, .45, 1) infinite;
  will-change: transform;
}
@keyframes hxLine { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(300%); } }

/* pause the ambient loops while the hero is off screen (class set by hero.js) */
.hx-off .hx-blob, .hx-off .hx-line::before { animation-play-state: paused; }

/* ------------------------------------------------------------------ entrance (pure CSS, replays on slide change) */
.hero-wrapper .hero-slide.active .hero-grid > :first-child > *,
.cs-hero-section .hero-grid > :first-child > *,
.vps-hero-inner > *,
.legal-hero .wrap > * {
  animation: hxRise .8s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-wrapper .hero-slide.active .hero-grid > :first-child > :nth-child(2),
.cs-hero-section .hero-grid > :first-child > :nth-child(2),
.vps-hero-inner > :nth-child(2),
.legal-hero .wrap > :nth-child(2) { animation-delay: .1s; }
.hero-wrapper .hero-slide.active .hero-grid > :first-child > :nth-child(3),
.cs-hero-section .hero-grid > :first-child > :nth-child(3),
.vps-hero-inner > :nth-child(3),
.legal-hero .wrap > :nth-child(3) { animation-delay: .22s; }
.hero-wrapper .hero-slide.active .hero-grid > :first-child > :nth-child(n+4),
.cs-hero-section .hero-grid > :first-child > :nth-child(n+4),
.vps-hero-inner > :nth-child(n+4),
.legal-hero .wrap > :nth-child(n+4) { animation-delay: .34s; }
.legal-hero .wrap > :nth-child(n+5) { animation-delay: .44s; }

@keyframes hxRise {
  from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); }
  60%  { filter: blur(0); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* orange underline draws itself from left to right after the title lands */
.hero-wrapper .hero-slide.active .curved-highlight svg,
.cs-hero-section .curved-highlight svg,
.vps-hero-section .curved-highlight svg,
.legal-hero .curved-highlight svg {
  animation: hxDraw .9s cubic-bezier(.65, 0, .35, 1) .55s both;
}
@keyframes hxDraw {
  from { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
  to   { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); }
}
/* soft glow pass over the highlighted words once the line is drawn (dark only) */
html:not([data-theme="light"]) .hero-wrapper .hero-slide.active .curved-highlight > span,
html:not([data-theme="light"]) .cs-hero-section .curved-highlight > span,
html:not([data-theme="light"]) .vps-hero-section .curved-highlight > span {
  animation: hxGlow 1.6s ease-out 1.05s both;
}
@keyframes hxGlow {
  0%   { text-shadow: 0 0 0 transparent; }
  35%  { text-shadow: 0 0 22px color-mix(in srgb, var(--accent-orange) 55%, transparent); }
  100% { text-shadow: 0 0 0 transparent; }
}

/* ------------------------------------------------------------------ client: one colour, no cursor light */
.hero-wrapper, .cs-hero-section, .vps-hero-section, .legal-hero {
  --hx-c1: var(--primary); --hx-c2: var(--primary); --hx-c3: var(--primary);
}
.hx-line::before { background: linear-gradient(90deg, transparent, var(--primary), transparent); }
.hx-spot, .hx-dots { display: none !important; }
.hero-wrapper .curved-highlight > span, .cs-hero-section .curved-highlight > span,
.vps-hero-section .curved-highlight > span { animation: none !important; }

/* ------------------------------------------------------------------ mobile: lighter */
@media (max-width: 768px) {
  .hx-b1 { width: 110vw; height: 110vw; left: -30%; top: -20%; }
  .hx-b2 { width: 90vw; height: 90vw; right: -40%; top: 20%; }
  .hx-b3 { display: none; }
  .hx-spot, .hx-dots { display: none; }
}

/* client: calmer hero — no coloured lights behind the content, no running light line (dot grid stays) */
.hx-fx, .hx-line { display: none !important; }
/* game pages: the original purple corner tint becomes a very soft blue (one colour everywhere) */
.cs-hero-section { background: radial-gradient(circle at 75% 20%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 60%); }