/* OUR LINKS: a cinematic black and white space scene with four link pills.
   Layers, back to front: Higgsfield space plate, light rays, warp stars, drifting fog,
   cursor light, vignette, film grain, then the page itself. */
:root {
  --bg: #000;
  --fg: #fff;
  --muted: rgba(255, 255, 255, .66);
  --line: rgba(255, 255, 255, .2);
  --xbox: #19ff5a;
  --ps: #2b7bff;
  --switch: #ff2a3a;
  --pill-w: min(560px, calc(100vw - 32px));
  --display: Unbounded, "Arial Black", Inter, sans-serif;
  --body: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  /* where the bright star sits in the space plate (light rays start there) */
  --star-x: 9%;
  --star-y: 10%;
  color-scheme: dark;
}
@media (orientation: portrait) {
  :root { --star-x: 87%; --star-y: 5%; }
}

@property --ray-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }

/* =========================================================
   Cinematic scene
   ========================================================= */
.scene {
  --px: 0px; --py: 0px; --cx: 50%; --cy: 40%;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
  pointer-events: none;
}
.scene > * { position: absolute; inset: 0; }

/* Higgsfield space plate with slow camera push and mouse/scroll parallax */
.scene__space {
  inset: -7%;
  transform: translate3d(var(--px), var(--py), 0);
  transition: transform 1.4s var(--ease-out);
}
.scene__space::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/space.webp") center 42% / cover no-repeat;
  filter: brightness(.82) contrast(1.08);
  animation: spaceIntro 2.6s var(--ease-out) both, spacePush 70s ease-in-out 2.6s infinite alternate;
}
/* The video sits over the still plate and fades in once it is actually playing */
.scene__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: 0;
  filter: brightness(.82) contrast(1.1);
  transition: opacity 2.5s ease;
  animation: spacePush 70s ease-in-out 2.6s infinite alternate;
}
.scene__video.is-playing { opacity: 1; }
@media (orientation: portrait) {
  .scene__video { display: none; }
  .scene__space::before { background-image: url("assets/space-tall.webp"); background-position: center 70%; }
}
@keyframes spaceIntro {
  from { transform: scale(1.4); filter: blur(22px) brightness(0); }
  60% { filter: blur(0) brightness(1.15) contrast(1.08); }
}
@keyframes spacePush { to { transform: scale(1.14) translate(-1.6%, 1.2%); } }

/* Light rays falling from the bright star */
.scene__rays {
  background: repeating-conic-gradient(from var(--ray-angle) at var(--star-x) var(--star-y),
    rgba(255, 255, 255, .07) 0deg 1.4deg, transparent 1.4deg 7deg);
  -webkit-mask-image: radial-gradient(circle at var(--star-x) var(--star-y), #000 0, rgba(0, 0, 0, .5) 22%, transparent 62%);
  mask-image: radial-gradient(circle at var(--star-x) var(--star-y), #000 0, rgba(0, 0, 0, .5) 22%, transparent 62%);
  opacity: 0;
  animation: raysIn 3s ease 1.6s forwards, raysTurn 90s linear infinite;
}
@keyframes raysIn { to { opacity: 1; } }
@keyframes raysTurn { to { --ray-angle: 360deg; } }

#stars { width: 100%; height: 100%; }

/* Drifting fog: two mirrored copies side by side so the loop never shows a seam */
.scene__fog {
  inset: auto;
  left: 0;
  width: 200%;
  display: flex;
  animation: fogMove 110s linear infinite;
}
.scene__fog span { flex: 0 0 50%; background: url("assets/fog.webp") center / 100% 100% no-repeat; }
.scene__fog span:nth-child(2) { transform: scaleX(-1); }
.scene__fog--far { top: 14%; height: 46%; opacity: .22; filter: blur(2px); animation-duration: 170s; animation-direction: reverse; }
.scene__fog--near { bottom: -12%; height: 58%; opacity: .5; }
@keyframes fogMove { to { transform: translateX(-50%); } }

/* Soft light that follows the cursor through the haze */
.scene__light {
  background:
    radial-gradient(520px circle at var(--cx) var(--cy), rgba(255, 255, 255, .075), transparent 62%),
    radial-gradient(120px circle at var(--star-x) var(--star-y), rgba(255, 255, 255, .35), transparent 70%);
  animation: starPulse 5s ease-in-out infinite;
}
@keyframes starPulse { 50% { opacity: .75; } }

.scene__vignette {
  background:
    radial-gradient(ellipse 75% 70% at 50% 42%, transparent 30%, rgba(0, 0, 0, .55) 75%, rgba(0, 0, 0, .92) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, .45), transparent 22%, transparent 75%, rgba(0, 0, 0, .55));
}

.scene__grain {
  inset: -50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity: .07;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-6%, 4%); }
  40% { transform: translate(5%, -7%); }
  60% { transform: translate(-3%, 8%); }
  80% { transform: translate(7%, 2%); }
  100% { transform: translate(-4%, -5%); }
}

/* Opening letterbox bars that pull away like a film starting */
.letterbox { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.letterbox span {
  position: absolute;
  left: 0; right: 0;
  height: 12vh;
  background: #000;
  animation: barsOut 1.1s var(--ease-out) .9s forwards;
}
.letterbox span:first-child { top: 0; }
.letterbox span:last-child { bottom: 0; }
@keyframes barsOut { to { height: 0; } }

/* =========================================================
   Page
   ========================================================= */
.page {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 16px 40px;
  overflow-x: clip;
}

.hero { text-align: center; margin-bottom: 30px; }
.logo-wrap { position: relative; width: 132px; height: 132px; margin: 0 auto 10px; }
.logo-wrap::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(255, 255, 255, .32), transparent 62%);
  filter: blur(12px);
  animation: pulse 4s ease-in-out 2s infinite;
}
.flare {
  position: absolute;
  left: 50%; top: 52%;
  width: 520%;
  height: 2px;
  translate: -50% -50%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .15) 30%, #fff 50%, rgba(255, 255, 255, .15) 70%, transparent);
  box-shadow: 0 0 12px 1px rgba(255, 255, 255, .6);
  border-radius: 50%;
  opacity: .55;
  animation: flareIn 1.4s var(--ease-out) 1.1s both, flare 7s ease-in-out 2.5s infinite;
  pointer-events: none;
}
@keyframes flareIn { from { opacity: 0; transform: scaleX(0); } 40% { opacity: 1; } }
@keyframes flare { 50% { transform: scaleX(.6); opacity: .3; } }
.logo {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, .6));
  animation: logoIn 1.3s var(--ease-out) 1s both, float 6s ease-in-out 2.3s infinite;
}
@keyframes logoIn {
  from { opacity: 0; transform: scale(.3) rotate(-25deg); filter: blur(14px) brightness(3); }
  55% { filter: drop-shadow(0 0 40px #fff) brightness(1.8); }
}
@keyframes float { 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes pulse { 50% { opacity: .45; transform: scale(.9); } }

.title {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 11vw, 96px);
  letter-spacing: .05em;
  line-height: 1;
  display: flex;
  gap: .3em;
  justify-content: center;
}
.title__word {
  display: inline-block;
  background: linear-gradient(100deg, #8a8a8a 0%, #fff 30%, #fff 45%, #bdbdbd 55%, #fff 70%, #8a8a8a 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, .4)) drop-shadow(0 4px 18px rgba(0, 0, 0, .9));
  animation: wordIn 1.2s var(--ease-out) 1.25s both, sheen 6s linear 2.6s infinite;
}
.title__word:nth-child(2) { animation-delay: 1.4s, 2.8s; }
@keyframes wordIn { from { opacity: 0; transform: translateY(40px) scale(.9); filter: blur(16px); letter-spacing: .4em; } }
@keyframes sheen { to { background-position: -250% 0; } }

/* =========================================================
   Socials
   ========================================================= */
.socials {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 20;
  animation: fadeDown .8s var(--ease-out) 1.6s both;
}
@keyframes fadeDown { from { opacity: 0; transform: translateY(-16px); } }
.socials__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(8, 8, 8, .5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--fg);
  font: 600 14px/1 var(--body);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 255, 255, .08);
  transition: box-shadow .3s, border-color .3s;
}
.socials__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.socials__toggle .chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .45s var(--ease-spring); }
.socials:hover .socials__toggle, .socials.open .socials__toggle { border-color: rgba(255, 255, 255, .5); box-shadow: 0 0 30px rgba(255, 255, 255, .22); }
.socials:hover .chev, .socials.open .chev { transform: rotate(180deg); }

.socials__menu {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  position: absolute;
  right: 0;
  top: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  pointer-events: none;
}
.socials__menu li {
  opacity: 0;
  transform: translateY(-28px) scale(.6) rotateX(-70deg);
  transform-origin: top center;
  transition: opacity .25s, transform .5s var(--ease-spring);
  transition-delay: calc((3 - var(--i)) * 40ms);
}
.socials:hover .socials__menu, .socials.open .socials__menu, .socials:focus-within .socials__menu { pointer-events: auto; }
.socials:hover .socials__menu li, .socials.open .socials__menu li, .socials:focus-within .socials__menu li {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 70ms);
}

.social {
  --brand: #fff;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(8, 8, 8, .7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font: 600 14px/1 var(--body);
  white-space: nowrap;
  transition: transform .3s var(--ease-spring), border-color .3s, box-shadow .3s;
}
.social svg { width: 22px; height: 22px; fill: currentColor; flex: none; transition: fill .3s, filter .3s; }
.social[data-brand="discord"] { --brand: #5865f2; }
.social[data-brand="instagram"] { --brand: #e1306c; }
.social[data-brand="youtube"] { --brand: #ff0033; }
.social[data-brand="tiktok"] { --brand: #25f4ee; }
.social:hover, .social:focus-visible {
  transform: translateX(-6px) scale(1.06);
  border-color: var(--brand);
  box-shadow: 0 0 22px color-mix(in srgb, var(--brand) 55%, transparent);
  outline: none;
}
.social:hover svg, .social:focus-visible svg { fill: var(--brand); filter: drop-shadow(0 0 6px var(--brand)); }

/* Phones and touch screens: socials already dropped down, big tap targets */
@media (hover: none), (max-width: 640px) {
  .socials { left: 0; right: 0; top: 0; padding: max(12px, env(safe-area-inset-top)) 16px 0; display: flex; justify-content: center; }
  .socials__toggle { display: none; }
  .socials__menu { position: static; flex-direction: row; padding: 0; gap: 10px; pointer-events: auto; }
  .socials__menu li { opacity: 1; transform: none; animation: dropIn .7s var(--ease-spring) both; animation-delay: calc(1.7s + var(--i) * 90ms); }
  .social { width: 52px; height: 52px; padding: 0; justify-content: center; }
  .social__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .social:hover, .social:focus-visible { transform: scale(1.06); }
  .page { padding-top: 88px; }
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-40px) rotateX(-80deg); } }

/* =========================================================
   Link pills
   ========================================================= */
.links {
  width: var(--pill-w);
  display: flex;
  flex-direction: column;
  gap: 36px;
  perspective: 1200px;
}
.card-wrap {
  position: relative;
  animation: cardIn 1s var(--ease-out) both;
}
.card-wrap--pc { animation-delay: 1.5s; }
.card-wrap--console { animation-delay: 1.62s; }
.card-wrap--coach { animation-delay: 1.86s; }
.card-wrap--sponsor { animation-delay: 1.98s; }
@keyframes cardIn { from { opacity: 0; transform: translateY(60px) scale(.92); filter: blur(12px); } }

.fx { position: absolute; left: -70px; top: -70px; width: calc(100% + 140px); height: calc(100% + 180px); pointer-events: none; z-index: 0; }

.pill {
  --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .02)), rgba(6, 6, 6, .5);
  border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 14px 44px rgba(0, 0, 0, .7), 0 0 30px rgba(255, 255, 255, .07);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ease-out), box-shadow .4s, border-color .4s;
  will-change: transform;
}
.pill::after { /* spotlight that follows the cursor */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 255, 255, .2), transparent 60%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.pill:hover::after, .pill:focus-visible::after { opacity: 1; }
.pill:hover, .pill:focus-visible {
  border-color: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 18px 54px rgba(0, 0, 0, .8), 0 0 48px rgba(255, 255, 255, .22);
  outline: none;
}
.pill:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.pill:active { transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(.97); transition-duration: .12s; }

.pill__text {
  position: relative;
  z-index: 3;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(18px, 4.8vw, 26px);
  letter-spacing: .03em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 255, 255, .45), 0 2px 12px rgba(0, 0, 0, .95);
  white-space: nowrap;
}
.pill__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .26) 48%, transparent 62%);
  transform: translateX(-120%);
  animation: shine 5.5s ease-in-out 2.4s infinite;
  pointer-events: none;
}
.card-wrap--console .pill__shine { animation-delay: 3.7s; }
.card-wrap--coach .pill__shine { animation-delay: 5s; }
.card-wrap--sponsor .pill__shine { animation-delay: 6.3s; }
@keyframes shine { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }

.ripple {
  position: absolute;
  z-index: 4;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  pointer-events: none;
  animation: ripple .7s ease-out forwards;
}
@keyframes ripple { to { transform: scale(40); opacity: 0; } }

/* ----- 1. PC Tweaks: the utility breaking out of glass ----- */
.card-wrap--pc { margin-top: 160px; }
.pill--pc { height: 96px; align-items: flex-end; padding-bottom: 20px; }
.cracks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.cracks path { fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; animation: crack 1s var(--ease-out) 2.2s forwards; filter: drop-shadow(0 0 3px #fff); }
@keyframes crack { to { stroke-dashoffset: 0; } }

.breakout {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 26px);
  width: min(280px, 54%);
  aspect-ratio: 1200 / 683;
  transform: translateX(-50%);
  z-index: 3;
  perspective: 900px;
  pointer-events: none;
}
/* Higgsfield shattered glass, centred on the hole the screen bursts through.
   It sits behind the pill so the frosted glass and the label stay on top. */
.burst {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 26px);
  width: min(280px, 54%);
  aspect-ratio: 1200 / 683;
  translate: -50% 0;
  z-index: 1;
  pointer-events: none;
}
.burst::before {
  content: "";
  position: absolute;
  left: 50%; top: 52%;
  width: 230%;
  aspect-ratio: 1600 / 905;
  translate: -50% -50%;
  background: url("assets/glass.webp") center / cover no-repeat;
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 50%, transparent 100%);
  animation: burst 1.3s var(--ease-out) 2.1s both, burstDrift 9s ease-in-out 3.4s infinite alternate;
}
@keyframes burst { from { opacity: 0; transform: scale(.35) rotate(-8deg); filter: brightness(3); } }
@keyframes burstDrift { to { transform: scale(1.08) rotate(3deg); } }
.breakout__screen {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .8), 0 0 50px rgba(255, 255, 255, .3), 0 -10px 40px rgba(0, 0, 0, .6);
  transform: rotateX(24deg) translateY(18px) scale(.94);
  transform-origin: 50% 100%;
  animation: emerge 1.1s var(--ease-spring) 2.15s both, hover3d 6s ease-in-out 3.3s infinite;
  transition: transform .6s var(--ease-spring);
}
.breakout__screen img { width: 100%; height: 100%; object-fit: cover; }
.breakout__glare { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 255, 255, .35), transparent 40%, transparent 70%, rgba(255, 255, 255, .12)); mix-blend-mode: screen; }
@keyframes emerge { from { opacity: 0; transform: rotateX(70deg) translateY(90px) scale(.6); filter: blur(6px) brightness(2); } }
@keyframes hover3d { 50% { transform: rotateX(16deg) rotateY(-4deg) translateY(10px) scale(.96); } }
.card-wrap--pc:hover .breakout__screen { animation-play-state: paused; transform: rotateX(8deg) translateY(-6px) scale(1.04); }

.shard {
  position: absolute;
  width: 34px; height: 30px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .5);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6));
  animation: shardOut 1.2s var(--ease-out) 2.15s both, shardFloat 5s ease-in-out 3.3s infinite alternate;
  transition: translate .6s var(--ease-out);
}
@keyframes shardOut { from { opacity: 0; transform: translate(0, 60px) rotate(0) scale(.3); } }
@keyframes shardFloat { to { translate: 0 -8px; rotate: 12deg; } }
.s1 { left: -14%; top: 42%; clip-path: polygon(0 20%, 100% 0, 70% 100%); rotate: -20deg; }
.s2 { left: -6%; top: 2%; width: 22px; height: 26px; clip-path: polygon(50% 0, 100% 100%, 0 70%); rotate: 25deg; animation-delay: 2.2s, 3.5s; }
.s3 { right: -15%; top: 30%; clip-path: polygon(0 0, 100% 40%, 30% 100%); rotate: 15deg; animation-delay: 2.25s, 3.7s; }
.s4 { right: -5%; top: -6%; width: 20px; height: 18px; clip-path: polygon(0 100%, 60% 0, 100% 80%); animation-delay: 2.17s, 3.9s; }
.s5 { left: 18%; top: -16%; width: 18px; height: 20px; clip-path: polygon(0 0, 100% 30%, 40% 100%); animation-delay: 2.23s, 3.4s; }
.s6 { right: 20%; top: -18%; width: 26px; height: 20px; clip-path: polygon(20% 0, 100% 60%, 0 100%); animation-delay: 2.27s, 4.1s; }
.card-wrap--pc:hover .shard { translate: 0 -14px; }

/* Higgsfield PC towers either side of the pill */
.pc {
  position: absolute;
  z-index: 3;
  bottom: -18px;
  height: 178px;
  width: auto;
  max-width: none;
  filter: drop-shadow(0 0 22px rgba(255, 255, 255, .22)) drop-shadow(0 22px 26px rgba(0, 0, 0, .9));
  pointer-events: none;
  animation: pcIn 1.1s var(--ease-spring) 1.9s both, pcBob 5s ease-in-out 3s infinite;
  transition: translate .6s var(--ease-spring), rotate .6s var(--ease-spring);
}
.pc--right { animation-delay: 1.9s, 5.5s; }
.pc--left { left: -84px; rotate: -3deg; }
.pc--right { right: -84px; scale: -1 1; rotate: 3deg; }
.card-wrap--pc:hover .pc--left { translate: -8px -8px; rotate: -6deg; }
.card-wrap--pc:hover .pc--right { translate: 8px -8px; rotate: 6deg; }
@keyframes pcIn { from { opacity: 0; translate: 0 50px; filter: brightness(0); } }
@keyframes pcBob { 50% { transform: translateY(-10px); } }

/* ----- 2. Console Tweaks ----- */
.pill--console { height: 118px; background: #030303; align-items: flex-start; padding-top: 18px; }
/* Higgsfield green / blue / red smoke behind the three brands */
.console__smoke {
  position: absolute;
  inset: -25% -8%;
  z-index: 0;
  background: url("assets/smoke.webp") center / 100% 100% no-repeat;
  filter: brightness(.62) saturate(1.25);
  animation: smokeDrift 16s ease-in-out infinite alternate;
  transition: filter .5s;
}
.pill--console:hover .console__smoke { filter: brightness(.9) saturate(1.4); }
@keyframes smokeDrift { to { transform: scale(1.14) translate(1.5%, -5%); } }
.console { position: absolute; inset: 0; display: flex; z-index: 0; }
.console__seg {
  --c: #fff;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 42px;
  background: radial-gradient(42% 60% at 50% 66%, rgba(0, 0, 0, .55), transparent 75%);
  transition: flex .5s var(--ease-out);
}
.console__seg svg {
  width: 34px; height: 34px;
  fill: color-mix(in srgb, var(--c) 45%, #fff);
  filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 14px var(--c));
  animation: glow 3s ease-in-out infinite;
  transition: transform .4s var(--ease-spring);
}
.console__seg--xbox { --c: var(--xbox); }
.console__seg--ps { --c: var(--ps); }
.console__seg--ps svg { animation-delay: -1s; }
.console__seg--switch { --c: var(--switch); }
.console__seg--switch svg { animation-delay: -2s; }
@keyframes glow { 50% { filter: drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 28px var(--c)); } }
.pill--console:hover .console__seg svg { transform: scale(1.15); }
.pill--console .console__seg:hover { flex: 1.35; }
/* Sharp black divider with a blurred edge */
.console__div {
  position: relative;
  width: 4px;
  margin: -10px -2px;
  background: #000;
  transform: skewX(-14deg);
  box-shadow: 0 0 12px 7px rgba(0, 0, 0, .95);
  z-index: 1;
}
.console__div::after { content: ""; position: absolute; inset: 0 1px; background: rgba(255, 255, 255, .14); }
.pill__text--over { font-size: clamp(18px, 4.6vw, 25px); }
.pill--console {
  border-color: rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 40px rgba(0, 0, 0, .6),
    -30px 10px 40px -20px color-mix(in srgb, var(--xbox) 45%, transparent),
    30px 10px 40px -20px color-mix(in srgb, var(--switch) 45%, transparent),
    0 20px 40px -20px color-mix(in srgb, var(--ps) 60%, transparent);
}
/* The colours pour out underneath the pill and merge */
.underglow {
  position: absolute;
  left: 4%; right: 4%;
  top: 55%;
  height: 150%;
  z-index: 1;
  background: url("assets/smoke-glow.webp") center / 100% 100% no-repeat;
  filter: blur(22px) saturate(1.5);
  opacity: .6;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%, transparent 100%);
  animation: underglow 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes underglow { to { opacity: .85; transform: scaleX(1.06) translateY(8px); } }

/* ----- 3. Coaching ----- */
.pill--coach { height: 104px; background: #000; }
.coach__bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background: url("assets/coaching.webp") center 22% / cover no-repeat;
  animation: kenburns 18s ease-in-out infinite alternate;
  transition: filter .4s;
  filter: saturate(1.1) brightness(.72);
}
.pill--coach::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 70%); }
.pill--coach:hover .coach__bg { filter: saturate(1.3) brightness(.9); }
@keyframes kenburns { to { transform: scale(1.12) translate(2%, -2%); } }
.pill--coach .pill__text em { font-style: normal; display: inline-block; margin-left: .2em; padding: .18em .5em; border-radius: 999px; background: #fff; color: #000; text-shadow: none; font-size: .72em; vertical-align: .14em; box-shadow: 0 0 18px rgba(255, 255, 255, .6); }

/* ----- 4. Sponsors / Get My Setup ----- */
.pill--sponsor { height: 96px; border: none; background: #070707; box-shadow: 0 10px 40px rgba(0, 0, 0, .7), 0 0 30px rgba(255, 255, 255, .1); }
.pill--sponsor::before { /* rotating light that shows only as a border */
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 200%; aspect-ratio: 1;
  translate: -50% -50%;
  z-index: 0;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(255, 255, 255, .95) 72%, transparent 82%);
  animation: rotate 4s linear infinite;
}
.pill--sponsor .pill__stack {
  position: absolute;
  inset: 2px;
  z-index: 1;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  background: #050505;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* Higgsfield desk setup behind the text */
.pill--sponsor .pill__stack::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  background:
    radial-gradient(ellipse 42% 90% at 50% 50%, rgba(0, 0, 0, .82), rgba(0, 0, 0, .3) 100%),
    url("assets/setup.webp") center 55% / cover no-repeat;
  filter: brightness(.9);
  animation: kenburns 22s ease-in-out infinite alternate;
  transition: filter .4s;
}
.pill--sponsor:hover .pill__stack::before { filter: brightness(1.3); }
.pill--sponsor::after { z-index: 2; }
.pill--sponsor .pill__shine { z-index: 3; }
.pill__sub { font: 600 12px/1 var(--body); letter-spacing: .32em; text-transform: uppercase; color: var(--muted); text-shadow: 0 1px 8px #000; }
.pill--sponsor:hover .pill__sub { color: #fff; }
@keyframes rotate { to { rotate: 360deg; } }

/* ----- Coming Soon: pills that aren't links yet ----- */
.soon {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 14px;
}
.soon__title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 -12px;
  font: 800 13px/1 var(--display);
  letter-spacing: .42em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(100deg, #7a7a7a 0%, #fff 30%, #fff 45%, #a8a8a8 55%, #fff 70%, #7a7a7a 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: soonIn 1s var(--ease-out) 1.74s both, sheen 6s linear 3s infinite;
}
.soon__title::before, .soon__title::after { /* hairlines either side of the label */
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5));
}
.soon__title::after { background: linear-gradient(90deg, rgba(255, 255, 255, .5), transparent); }
.soon__dot { /* a softly pulsing "on air" light */
  order: -1;
  width: 7px; height: 7px;
  margin-right: -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff, 0 0 22px rgba(255, 255, 255, .7);
  animation: soonDot 1.8s ease-in-out infinite;
}
.soon__title::before { order: -2; }
@keyframes soonIn { from { opacity: 0; transform: translateY(24px); filter: blur(10px); letter-spacing: .8em; } }
@keyframes soonDot { 50% { opacity: .25; transform: scale(.6); } }
.pill--soon { cursor: default; }
.pill__soon { /* shown for a moment when someone taps a Coming Soon pill */
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  font: 800 clamp(15px, 4vw, 20px)/1 var(--display);
  letter-spacing: .32em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(255, 255, 255, .6);
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .35s, transform .5s var(--ease-out);
  pointer-events: none;
}
.pill--soon.is-teased .pill__soon { opacity: 1; transform: none; }
.pill--soon .coach__bg { filter: saturate(.75) brightness(.55); }
.pill--soon.pill--coach:hover .coach__bg { filter: saturate(1.1) brightness(.75); }

.foot { margin-top: 64px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }

/* =========================================================
   Small screens
   ========================================================= */
@media (max-width: 640px) {
  .links, .soon { gap: 32px; }
  .soon__title { font-size: 11px; letter-spacing: .36em; gap: 10px; }
  .pill { height: 80px; }
  .pill--pc { height: 86px; padding-bottom: 16px; }
  .pill--coach { height: 96px; }
  .pill--sponsor { height: 88px; }
  .pill--console { height: 110px; padding-top: 16px; }
  .console__seg { padding-top: 38px; }
  .console__seg svg { width: 30px; height: 30px; }
  .card-wrap--pc { margin-top: 128px; }
  .breakout, .burst { width: 56%; bottom: calc(100% - 20px); }
  .pc { height: 104px; bottom: -8px; }
  .pc--left { left: -6px; }
  .pc--right { right: -6px; }
  .logo-wrap { width: 104px; height: 104px; }
  .scene__fog--far { display: none; }
}

/* "Reduce motion" (Windows turns this on when animation effects are off, which many
   PC tweaks do). Keep the gentle ambient motion people come here for, but skip the
   opening camera move, the zooms and the fly-ins so everything shows straight away. */
@media (prefers-reduced-motion: reduce) {
  .letterbox { display: none; }
  .scene__space::before, .scene__video { animation: spacePush 70s ease-in-out infinite alternate; }
  .scene__rays { opacity: 1; animation: raysTurn 90s linear infinite; }
  .logo { animation: float 6s ease-in-out infinite; }
  .flare { animation: flare 7s ease-in-out infinite; }
  .title__word, .title__word:nth-child(2) { animation: sheen 6s linear infinite; }
  .socials, .card-wrap { animation: none; }
  .soon__title { animation: sheen 6s linear infinite; }
  .socials__menu li { animation: none; }
  .cracks path { animation: none; stroke-dashoffset: 0; }
  .burst::before { animation: burstDrift 9s ease-in-out infinite alternate; }
  .breakout__screen { animation: hover3d 6s ease-in-out infinite; }
  .shard { animation: shardFloat 5s ease-in-out infinite alternate; }
  .pc { animation: pcBob 5s ease-in-out infinite; }
  .pc--right { animation-delay: -2.5s; }
}