/* ==========================================================
   ES TRAINERS — Homepage stylesheet (index.css)
   Self-contained: this is the ONLY stylesheet index.html loads.
   Plain CSS, no framework. Order matters and is unchanged from
   the approved build:
     1. Core (tokens, reset, components, sections)
     2. Responsive overrides (breakpoints)
     3. Animations (reveal, hero, ambient motion)
   ========================================================== */

/* ==========================================================
   1. CORE
   ========================================================== */

:root {
  /* ---- Color ---- */
  --white: #ffffff;
  --surface: #f5f7fb;
  --surface-alt: #eceff5;
  --ink: #0b0f17;
  --ink-soft: #565e6d;
  --ink-faint: #8891a0;
  --line: #e1e5ed;

  --blue: #1652f0;
  --blue-deep: #09267a;
  --blue-bright: #5a8dff;
  --blue-wash: #eaf0ff;

  --bgmi: #1f6e5c;
  --bgmi-deep: #0c2b24;
  --ffmax: #e6572b;
  --ffmax-deep: #2b1208;

  --success: #1f8a4c;

  /* ---- Type ---- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;

  /* ---- Spacing scale ---- */
  --space-1: 0.4rem;
  --space-2: 0.8rem;
  --space-3: 1.2rem;
  --space-4: 1.6rem;
  --space-5: 2.4rem;
  --space-6: 3.2rem;
  --space-7: 4.8rem;
  --space-8: 6.4rem;
  --space-9: 9.6rem;

  /* ---- Radius / shadow ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(11, 15, 23, 0.06), 0 1px 1px rgba(11, 15, 23, 0.04);
  --shadow-md: 0 8px 24px rgba(11, 15, 23, 0.08);
  --shadow-lg: 0 20px 48px rgba(11, 15, 23, 0.14);
  --shadow-blue: 0 12px 32px rgba(22, 82, 240, 0.22);

  --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --container: 1180px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  font-size: 16px;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.no-scroll { overflow: hidden; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.section {
  padding: var(--space-8) 0;
}

.section--tight { padding: var(--space-7) 0; }

.section-head {
  max-width: 620px;
  margin-bottom: var(--space-6);
}

.section-head h2 {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.section-head p {
  margin-top: var(--space-3);
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.section--dark {
  background: var(--ink);
  color: var(--white);
}
.section--dark .section-head p { color: rgba(255,255,255,0.68); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
  min-height: 48px;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
/* .btn sets display:inline-flex, which would otherwise beat the [hidden] attribute (e.g. a Retry button that must be hidden). */
.btn[hidden] { display: none; }

.btn--primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-blue);
}
.btn--primary:hover { background: #0f45d6; box-shadow: 0 16px 36px rgba(22, 82, 240, 0.3); }

.btn--outline {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--ink);
}
.btn--outline:hover { border-color: var(--ink); }

.btn--on-dark {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.28);
  color: var(--white);
}
.btn--on-dark:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.5); }

.btn--ghost-blue {
  background: var(--blue-wash);
  color: var(--blue-deep);
}
.btn--ghost-blue:hover { background: #dde8ff; }

.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ==========================================================
   NAVBAR
   ========================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-3) 0;
  background: rgba(255, 255, 255, 0.85);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav--scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding: var(--space-2) 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.brand__mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: contain;
  flex-shrink: 0;
}

.brand__name { line-height: 1; }

.nav__links {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.nav__links a {
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color var(--transition);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--blue);
  transition: width var(--transition);
}
.nav__links a:hover::after { width: 100%; }
/* Current page: visible without hover. Hover keeps its own colour change. */
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a[aria-current="page"]::after { width: 100%; }

.nav__actions { display: flex; align-items: center; gap: var(--space-3); }
.nav__actions .btn--primary { display: none; padding: 0.65rem 1.3rem; min-height: 42px; }

.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
}
.nav__toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--ink);
  margin: 0 auto;
  transition: transform var(--transition), opacity var(--transition);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Mobile menu ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(11, 15, 23, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition);
}
.mobile-menu--open { opacity: 1; visibility: visible; }

.mobile-menu__panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(86vw, 360px);
  background: var(--white);
  padding: var(--space-8) var(--space-5) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -20px 0 48px rgba(11,15,23,0.18);
}
.mobile-menu--open .mobile-menu__panel { transform: translateX(0); }

.mobile-menu__links { display: flex; flex-direction: column; gap: var(--space-2); }
.mobile-menu__links a {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
.mobile-menu__links a[aria-current="page"] { color: var(--blue); }

/* ==========================================================
   HERO
   ========================================================== */
.hero {
  position: relative;
  padding: calc(var(--space-9) + 2rem) 0 var(--space-8);
  background: var(--ink);
  color: var(--white);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  gap: var(--space-7);
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  color: var(--blue-bright);
  margin-bottom: var(--space-3);
}

.hero h1 {
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  line-height: 1.02;
}

.hero__tagline {
  margin-top: var(--space-4);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  color: rgba(255,255,255,0.85);
}

.hero__desc {
  margin-top: var(--space-4);
  max-width: 46ch;
  color: rgba(255,255,255,0.68);
  font-size: 1.08rem;
}

.hero__actions { margin-top: var(--space-6); }

.hero__visual {
  position: relative;
  min-height: 280px;
}

.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(0);
}

.hero__bg-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.65;
  pointer-events: none;
}

.hero__technical {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero__streaks {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.7;
}

.hero__particles {
  position: absolute;
  right: 0;
  top: 0;
  width: 60%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero__particle {
  fill: #5a8dff;
  opacity: 0.5;
}

.hero__logo-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__logo {
  width: 42%;
  max-width: 190px;
  border-radius: 50%;
  filter: drop-shadow(0 0 28px rgba(90, 141, 255, 0.55)) drop-shadow(0 12px 40px rgba(0,0,0,0.5));
}

.hero__rings { position: absolute; inset: 0; }

.hero__chip {
  position: absolute;
  display: block;
  width: 16px; height: 16px;
  background: var(--blue-bright);
  opacity: 0.5;
  border-radius: 3px;
}
.hero__chip--1 { top: 14%; left: 10%; transform: rotate(18deg); }
.hero__chip--2 { bottom: 12%; right: 14%; width: 12px; height: 12px; opacity: 0.4; transform: rotate(-14deg); }

/* ==========================================================
   GAME SELECTION
   ========================================================== */
.games { padding: var(--space-8) 0; }

.games__grid {
  display: grid;
  gap: var(--space-5);
}

.game-card {
  --mx: 0;
  --my: 0;
  --lift: 0px;
  --lift-scale: 1;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
  isolation: isolate;
  border: 1px solid rgba(255,255,255,0.08);
  transform: translateY(var(--lift)) perspective(1000px)
    rotateX(calc(var(--my) * -6deg)) rotateY(calc(var(--mx) * 8deg))
    scale(var(--lift-scale));
  transform-style: preserve-3d;
  transition: transform 450ms cubic-bezier(0.16,1,0.3,1), box-shadow var(--transition), border-color var(--transition);
  box-shadow: var(--shadow-md);
}
.game-card:hover, .game-card:focus-within {
  --lift: -6px;
  --lift-scale: 1.015;
  box-shadow: var(--shadow-lg);
  transition: transform 120ms linear, box-shadow var(--transition), border-color var(--transition);
}
.game-card--bgmi:hover, .game-card--bgmi:focus-within { border-color: rgba(63, 214, 174, 0.45); box-shadow: var(--shadow-lg), 0 0 44px rgba(63,214,174,0.2); }
.game-card--ffmax:hover, .game-card--ffmax:focus-within { border-color: rgba(255, 138, 76, 0.45); box-shadow: var(--shadow-lg), 0 0 44px rgba(255,138,76,0.2); }

/* Layer 1: background atmosphere wash */
.game-card__atmosphere {
  position: absolute;
  inset: 0;
  z-index: -3;
  transform: translate(calc(var(--mx) * -6px), calc(var(--my) * -4px));
  transition: transform 450ms cubic-bezier(0.16,1,0.3,1);
}
.game-card--bgmi .game-card__atmosphere { background:
  radial-gradient(120% 90% at 82% 8%, rgba(31,110,92,0.5), transparent 58%),
  linear-gradient(200deg, var(--bgmi-deep), #030a08 72%); }

.game-card--ffmax .game-card__atmosphere { background:
  radial-gradient(120% 90% at 78% 62%, rgba(230,87,43,0.48), transparent 58%),
  linear-gradient(200deg, var(--ffmax-deep), #0a0201 72%); }

/* Optional licensed key art. Empty by default — nothing loads unless
   --card-art is set, e.g.
     .game-card--bgmi { --card-art: url("assets/bgmi/key-art.jpg"); }
   It sits UNDER the readability gradient, so white text stays legible. */
.game-card__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--card-art, none);
  background-size: cover;
  background-position: center;
  opacity: var(--card-art-opacity, 0.5);
  transform: translate(calc(var(--mx) * -12px), calc(var(--my) * -9px)) scale(1.06);
  transition: transform 500ms cubic-bezier(0.16,1,0.3,1);
}

/* Layers 2 + 3: technical geometry + main graphic, combined for perf.
   Original artwork only — see HTML comment. Moves opposite the pointer
   for a controlled parallax feel; scales in on hover. */
.game-card__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  transform: translate(calc(var(--mx) * -16px), calc(var(--my) * -12px)) scale(1);
  transition: transform 500ms cubic-bezier(0.16,1,0.3,1);
}
.game-card:hover .game-card__art, .game-card:focus-within .game-card__art { transform: translate(calc(var(--mx) * -16px), calc(var(--my) * -12px)) scale(1.08); }

/* Layer 4: gradient readability overlay so text always sits on a clean base */
.game-card__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(3,6,10,0.94) 0%, rgba(3,6,10,0.7) 30%, rgba(3,6,10,0.24) 60%, transparent 86%);
}

.game-card__content {
  position: relative;
  padding: var(--space-6);
  transform: translate(calc(var(--mx) * 5px), calc(var(--my) * 3px));
  transition: transform 450ms cubic-bezier(0.16,1,0.3,1);
}

.game-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.06);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-3);
  width: fit-content;
}
.game-card__badge svg { width: 15px; height: 15px; flex-shrink: 0; }

.game-card h3 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
}

.game-card p {
  margin-top: var(--space-2);
  color: rgba(255,255,255,0.72);
  max-width: 40ch;
}

.game-card__cta {
  margin-top: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  width: fit-content;
  transition: background var(--transition), transform var(--transition);
}
.game-card__cta svg { width: 16px; height: 16px; transition: transform var(--transition); }
.game-card:hover .game-card__cta, .game-card:focus-within .game-card__cta { background: rgba(255,255,255,0.22); }
.game-card:hover .game-card__cta svg, .game-card:focus-within .game-card__cta svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .game-card, .game-card__art, .game-card__atmosphere,
  .game-card__photo, .game-card__content {
    transition: none;
    transform: none !important;
  }
}

/* ==========================================================
   TOURNAMENTS
   ========================================================== */
.tournaments { background: var(--surface); }

.tournaments__grid {
  display: grid;
  gap: var(--space-4);
}

/* Card accent: BGMI green / FF MAX orange. --tc is the accent, --tc-strong a
   darker shade used behind white text, --tc-tint a soft wash for the header. */
.tcard {
  --tc: var(--bgmi);
  --tc-strong: #1a5e4e;
  --tc-tint: rgba(31, 110, 92, 0.1);
  --tc-glow: rgba(31, 110, 92, 0.22);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, var(--tc-tint) 0%, rgba(255,255,255,0) 150px),
    var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.tcard--ffmax {
  --tc: var(--ffmax);
  --tc-strong: #c4431a;
  --tc-tint: rgba(230, 87, 43, 0.1);
  --tc-glow: rgba(230, 87, 43, 0.24);
}
.tcard::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tc), var(--tc-strong));
}
.tcard:hover {
  transform: translateY(-4px);
  border-color: var(--tc);
  box-shadow: var(--shadow-md), 0 14px 34px var(--tc-glow);
}

.tcard__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.tcard__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--tc-strong);
  background: var(--white);
  border: 1px solid var(--tc);
  padding: 0.28rem 0.7rem 0.28rem 0.6rem;
  border-radius: 999px;
}
.tcard__badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tc);
}

.tcard__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  background: var(--surface-alt);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  text-transform: capitalize;
  white-space: nowrap;
}
.tcard__status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.tcard__status[hidden] { display: none; }
.tcard__status--open { color: #146c39; background: #e3f6ea; }
.tcard__status--upcoming { color: var(--blue-deep); background: var(--blue-wash); }
.tcard__status--live {
  color: #c2122b;
  background: #ffe9ec;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}
.tcard__status--live::before { animation: livePulse 2.4s ease-out infinite; }

.tcard__title {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  line-height: 1.2;
  margin-bottom: var(--space-4);
  overflow-wrap: anywhere;
}

.tcard__meta {
  display: grid;
  margin: 0 0 var(--space-5);
  padding: var(--space-1) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.tcard__meta > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.7rem 0;
}
.tcard__meta > div + div { border-top: 1px solid var(--line); }
/* display:flex above would otherwise beat the [hidden] attribute, so a row
   with no value in Firebase would show up empty. */
.tcard__meta > div[hidden] { display: none; }
.tcard__meta dt { display: flex; align-items: center; gap: 0.45rem; color: var(--ink-soft); font-size: 0.85rem; flex-shrink: 0; }
.tcard__meta dt svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--tc); }
.tcard__meta dd { margin: 0; font-weight: 600; font-size: 0.94rem; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.tcard__meta [data-row="prize"] dd {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tc-strong);
}

.tcard__cta {
  display: block;
  margin-top: auto;
  text-align: center;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--tc), var(--tc-strong));
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 22px var(--tc-glow);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.tcard__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px var(--tc-glow); filter: brightness(1.06); }
.tcard__cta:active { transform: translateY(0); }
.tcard__cta:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
/* display:block above would otherwise beat the [hidden] attribute, so a
   non-open tournament would show a dead "Register Now". Keeps a non-open
   tournament from showing a dead button. */
.tcard__cta[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .tcard:hover, .tcard__cta:hover { transform: none; }
  .tcard__status--live::before { animation: none; }
}

.tempty {
  grid-column: 1 / -1;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--ink-faint);
  background: var(--white);
}
.tempty__icon { width: 40px; height: 40px; margin: 0 auto var(--space-3); color: var(--ink-faint); }
.tempty--error { color: #a3402b; border-color: #f0cdbf; background: #fff6f2; }

/* Quiet connection line. Never replaces tournament cards that are
   already on screen — it sits under them (see spec 17). */
.tnotice {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  color: var(--ink-faint);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
}

/* ==========================================================
   INSTAGRAM UPDATES
   Link-out + Firebase tournament status only. No feed, no embed,
   no post data. Instagram's gradient is used as a restrained
   accent on ES Trainers' own dark surface, not as a theme.
   ========================================================== */
.ig { background: var(--ink); color: var(--white); }

.ig__panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(193, 53, 132, 0.18), transparent 58%),
    radial-gradient(90% 110% at 0% 100%, rgba(252, 175, 69, 0.10), transparent 60%),
    linear-gradient(180deg, #141824, #0b0f17);
  transition: border-color var(--transition);
}
.ig--live .ig__panel { border-color: rgba(225, 48, 108, 0.42); }

/* Gradient rail: the Instagram cue, kept to a 3px edge. */
.ig__rail {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #f9ce34, #ee2a7b 55%, #6228d7);
}

.ig__body { display: grid; gap: var(--space-5); }

.ig__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #f486b4;
  margin-bottom: var(--space-3);
}
.ig__eyebrow svg { width: 20px; height: 20px; }

.ig__intro h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
.ig__grad {
  background: linear-gradient(95deg, #f9ce34, #ee2a7b 45%, #a44cf0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ig__intro > p {
  margin-top: var(--space-3);
  max-width: 56ch;
  color: rgba(255,255,255,0.72);
}

/* ---- Firebase status area ---- */
.ig__status-list { display: grid; gap: var(--space-3); }

.ig-card {
  border: 1px solid rgba(255,255,255,0.14);
  border-left: 3px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  background: rgba(255,255,255,0.04);
}
.ig-card--bgmi { border-left-color: #3fd6ae; }
.ig-card--ffmax { border-left-color: var(--ffmax); }

.ig-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.26rem 0.7rem;
  border-radius: 999px;
  color: rgba(255,255,255,0.78);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
}
.ig-card--registration .ig-card__badge {
  color: #7ce3ad;
  background: rgba(31, 138, 76, 0.16);
  border-color: rgba(124, 227, 173, 0.34);
}
.ig-card--live .ig-card__badge {
  color: #ff8fb6;
  background: rgba(225, 48, 108, 0.16);
  border-color: rgba(225, 48, 108, 0.4);
}

.ig-card__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ee2a7b;
  flex-shrink: 0;
  display: none;
}
.ig-card--live .ig-card__dot { display: block; }

.ig-card__game {
  margin-top: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.52);
}
.ig-card__title {
  margin-top: 0.25rem;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}
.ig-card__note {
  margin-top: var(--space-2);
  font-size: 0.92rem;
  color: rgba(255,255,255,0.66);
  max-width: 52ch;
}

/* ---- Handle + CTA ---- */
.ig__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.ig__handle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.78);
  transition: color var(--transition);
}
.ig__handle svg { width: 18px; height: 18px; }
.ig__handle:hover { color: var(--white); }

.btn--instagram {
  position: relative;
  color: var(--white);
  gap: 0.55rem;
  background: linear-gradient(95deg, #f9ce34, #ee2a7b 45%, #6228d7);
  background-size: 160% 100%;
  background-position: 0% 50%;
  transition: background-position var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn--instagram:hover {
  background-position: 100% 50%;
  box-shadow: 0 16px 36px rgba(225, 48, 108, 0.32);
}
.btn--instagram svg { width: 20px; height: 20px; flex-shrink: 0; }

.ig__note {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.45);
  max-width: 60ch;
}

/* ==========================================================
   FEATURES ("Why ES Trainers")
   ========================================================== */
.features__grid {
  display: grid;
  gap: var(--space-4);
}

.feature {
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.feature:hover { border-color: #c9d3e6; box-shadow: var(--shadow-sm); }

.feature {
  position: relative;
  overflow: hidden;
}
.feature::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(var(--blue-bright), var(--blue));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--transition);
}
.feature:hover::before { transform: scaleY(1); }
.feature:hover { transform: translateY(-3px); }

.feature__icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--blue-wash);
  color: var(--blue-deep);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
  transition: transform var(--transition), background var(--transition);
}
.feature__icon svg { width: 22px; height: 22px; }
.feature:hover .feature__icon { background: var(--blue); color: var(--white); transform: scale(1.08) rotate(-4deg); }

.feature h3 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.feature p { color: var(--ink-soft); font-size: 0.95rem; }

/* ==========================================================
   HOW IT WORKS
   ========================================================== */
.steps {
  display: grid;
  gap: var(--space-5);
  counter-reset: step;
  position: relative;
}

/* Connecting line between step numbers — desktop only, see RESPONSIVE section */
.steps::before {
  content: "";
  display: none;
  position: absolute;
  top: 1.3rem;
  left: calc(12.5% + 1.3rem);
  right: calc(12.5% + 1.3rem);
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px);
  z-index: 0;
}

.step { position: relative; padding-left: 3.6rem; z-index: 1; }

.step__num {
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--blue);
  width: 2.6rem; height: 2.6rem;
  background: var(--white);
  border: 1.5px solid var(--blue-wash);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.step h3 { font-size: 1.05rem; margin-bottom: var(--space-1); }
.step p { color: var(--ink-soft); font-size: 0.93rem; }

/* ==========================================================
   HISTORY PREVIEW
   ========================================================== */
.history {
  background: linear-gradient(160deg, var(--blue-deep), var(--ink) 70%);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5);
  display: grid;
  gap: var(--space-6);
  align-items: center;
  overflow: hidden;
  position: relative;
}

.history__visual { max-width: 340px; margin: 0 auto; }
.history__copy { text-align: center; }

.history h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); }
.history p { margin-top: var(--space-3); color: rgba(255,255,255,0.7); max-width: 44ch; margin-left: auto; margin-right: auto; }
.history .btn-row { justify-content: center; margin-top: var(--space-5); }

@media (min-width: 768px) {
  .history { grid-template-columns: 0.9fr 1.1fr; padding: var(--space-8); text-align: left; }
  .history__visual { max-width: none; order: 2; }
  .history__copy { text-align: left; order: 1; }
  .history .btn-row, .history p { margin-left: 0; margin-right: 0; justify-content: flex-start; }
}

/* ==========================================================
   WHATSAPP CTA
   ========================================================== */
.whatsapp {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.whatsapp__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: #e9fbf1;
  color: #1f8a4c;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}

.whatsapp h2 { font-size: clamp(1.5rem, 3.6vw, 2rem); }
.whatsapp p { margin-top: var(--space-3); color: var(--ink-soft); max-width: 52ch; }
.whatsapp__actions { margin-top: var(--space-5); }

/* ---- Message/update stack (original UI concept, not real chat data) ---- */
.whatsapp__stack {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
}
.wa-chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  width: fit-content;
  max-width: 90%;
  white-space: nowrap;
}
.wa-chip--in { margin-left: 8%; }
.wa-chip--in-2 { margin-left: 14%; }
.wa-chip--in-3 { margin-left: 4%; }
.wa-chip__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #1f8a4c;
  flex-shrink: 0;
}

/* ==========================================================
   FINAL CTA
   ========================================================== */
.final-cta {
  background: radial-gradient(120% 100% at 50% 0%, #0d1420 0%, var(--ink) 55%), var(--ink);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding: var(--space-8) 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* Ambient background scenery — sits behind the copy and never
   competes with it for attention (see final-cta__grid-layout z-index). */
.final-cta__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 1200ms cubic-bezier(0.16,1,0.3,1), transform 1200ms cubic-bezier(0.16,1,0.3,1);
}
.final-cta:has(.final-cta__copy.is-revealed) .final-cta__field { opacity: 1; transform: scale(1); }

.final-cta__orbit {
  width: min(120vw, 1000px);
  height: auto;
  opacity: 0.6;
}

.final-cta__ring { transform-origin: 500px 500px; transform-box: fill-box; }
.final-cta__ring--a { animation: ctaOrbitSpin 46s linear infinite; }
.final-cta__ring--b { animation: ctaOrbitSpin 70s linear infinite reverse; }
.final-cta__ring--c { animation: ctaOrbitSpin 32s linear infinite; }

.final-cta__mark { opacity: 0.85; }

.final-cta__sweep {
  stroke-dasharray: 260 1400;
  stroke-dashoffset: 0;
  opacity: 0.5;
  animation: ctaBeamSweep 7s ease-in-out infinite;
}

.final-cta__mote { animation: emberDrift 6s ease-in-out infinite; }
.final-cta__mote--2 { animation-duration: 8s; animation-delay: 1.4s; }
.final-cta__mote--3 { animation-duration: 5.5s; animation-delay: 2.6s; }

.final-cta__grid-layout {
  position: relative;
  z-index: 1;
}

.final-cta__copy { max-width: 640px; }

.final-cta__eyebrow {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue-bright);
  margin-bottom: var(--space-3);
}

.final-cta__heading {
  font-size: clamp(2.2rem, 7vw, 3.8rem);
  line-height: 1.06;
}
.final-cta__line { display: block; overflow: hidden; }
.final-cta__line span {
  display: block;
  transform: translateY(105%);
  transition: transform 900ms cubic-bezier(0.16,1,0.3,1);
}
.final-cta__copy.is-revealed .final-cta__line:nth-child(1) span { transition-delay: 120ms; transform: translateY(0); }
.final-cta__copy.is-revealed .final-cta__line:nth-child(2) span { transition-delay: 220ms; transform: translateY(0); }

.final-cta__desc {
  margin-top: var(--space-4);
  color: rgba(255,255,255,0.72);
  max-width: 46ch;
  font-size: 1.05rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms cubic-bezier(0.16,1,0.3,1) 420ms, transform 700ms cubic-bezier(0.16,1,0.3,1) 420ms;
}
.final-cta__copy.is-revealed .final-cta__desc { opacity: 1; transform: translateY(0); }

.final-cta__actions { margin-top: var(--space-6); }
.final-cta__actions .btn {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms cubic-bezier(0.16,1,0.3,1), transform 600ms cubic-bezier(0.16,1,0.3,1), background var(--transition), box-shadow var(--transition);
}
.final-cta__copy.is-revealed .final-cta__actions .btn:nth-child(1) { transition-delay: 540ms; opacity: 1; transform: translateY(0); }
.final-cta__copy.is-revealed .final-cta__actions .btn:nth-child(2) { transition-delay: 620ms; opacity: 1; transform: translateY(0); }

@keyframes ctaOrbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes ctaBeamSweep {
  0% { stroke-dashoffset: 1400; opacity: 0; }
  15% { opacity: 0.55; }
  55% { opacity: 0.35; }
  100% { stroke-dashoffset: -260; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .final-cta__field, .final-cta__line span, .final-cta__desc, .final-cta__actions .btn {
    transition: none;
  }
  .final-cta__ring, .final-cta__sweep, .final-cta__mote { animation: none; }
  .final-cta__line span { transform: none; }
  .final-cta__desc, .final-cta__actions .btn { opacity: 1; transform: none; }
}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer { padding: var(--space-7) 0 var(--space-5); border-top: 1px solid var(--line); }

.footer__top {
  display: grid;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
}

.footer__desc { margin-top: var(--space-3); color: var(--ink-soft); max-width: 34ch; font-size: 0.95rem; }

.footer__col h4 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: var(--space-3);
}

.footer__col ul { display: grid; gap: var(--space-2); }
.footer__col a { color: var(--ink-soft); font-size: 0.95rem; transition: color var(--transition); }
.footer__col a:hover { color: var(--blue); }

.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.85rem;
}

/* ==========================================================
   Skip link (accessibility)
   ========================================================== */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -60px;
  background: var(--blue);
  color: var(--white);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-3); }

/* ==========================================================
   2. RESPONSIVE OVERRIDES
   Mobile styles are the default above; layout changes as the
   viewport grows.
   ========================================================== */

/* ---- Small phones (< 480px): keep the redesigned game cards and
   final CTA readable and free of overflow at the narrowest widths. ---- */
@media (max-width: 479px) {
  .game-card { min-height: 380px; }
  .game-card__content { padding: var(--space-5) var(--space-4); }
  .final-cta { padding: var(--space-7) 0; min-height: auto; }
  .final-cta__orbit { width: 160vw; opacity: 0.4; }
  .final-cta__desc { max-width: 100%; }
  .ig__panel { padding: var(--space-5) var(--space-4); }
  .ig-card { padding: var(--space-4); }
}

/* ---- 480px: slightly larger phones ---- */
@media (min-width: 480px) {
  .btn-row { flex-wrap: nowrap; }
}

/* ---- 640px ---- */
@media (min-width: 640px) {
  .games__grid { grid-template-columns: 1fr; }
  .features__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- 768px: tablet ---- */
@media (min-width: 768px) {
  .container { padding: 0 var(--space-5); }

  .hero__grid { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
  .hero__visual { min-height: 380px; }

  .games__grid { grid-template-columns: repeat(2, 1fr); }
  .game-card { min-height: 520px; }

  .tournaments__grid { grid-template-columns: repeat(2, 1fr); }

  .ig__panel { padding: var(--space-7) var(--space-6); }
  /* BGMI and FF MAX at the same priority: side by side, not stacked. */
  .ig__status-list--multi { grid-template-columns: repeat(2, 1fr); }

  .steps { grid-template-columns: repeat(2, 1fr); }

  .whatsapp { grid-template-columns: 1.3fr 0.7fr; text-align: left; }

  .footer__top { grid-template-columns: 1.4fr repeat(2, 1fr); }

  .footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---- 1024px: small desktop ---- */
@media (min-width: 1024px) {
  .nav__links { display: flex; }
  .nav__actions .btn--primary { display: inline-flex; }
  .nav__toggle { display: none; }
  .mobile-menu { display: none; }

  .section { padding: var(--space-9) 0; }

  .game-card { min-height: 560px; }

  .tournaments__grid { grid-template-columns: repeat(3, 1fr); }

  .features__grid { grid-template-columns: repeat(3, 1fr); }

  /* One active tournament: copy on the left, status on the right,
     so the panel stays compact instead of growing very tall. With
     two games active the panel stays full width and the two status
     cards sit side by side (rule above). */
  .ig--has-status:not(.ig--multi) .ig__body {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: var(--space-6);
    align-items: start;
  }
  .ig--has-status:not(.ig--multi) .ig__intro,
  .ig--has-status:not(.ig--multi) .ig__action,
  .ig--has-status:not(.ig--multi) .ig__note { grid-column: 1; }
  .ig--has-status:not(.ig--multi) .ig__status { grid-column: 2; grid-row: 1 / span 3; }

  .steps { grid-template-columns: repeat(4, 1fr); }
  .steps::before { display: block; }

  .history { padding: var(--space-8) var(--space-7); }

  .final-cta { min-height: 70vh; }
  .final-cta__copy { max-width: 620px; }
}

/* ---- 1280px ---- */
@media (min-width: 1280px) {
  .hero { padding-top: calc(var(--space-9) + 4rem); }
}

/* ==========================================================
   3. ANIMATIONS
   Reveal classes are toggled by the IntersectionObserver in
   index.js. Transform/opacity only, so it stays cheap on mobile.
   ========================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 640ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 640ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children of a revealed group using nth-child delays */
[data-reveal-group] > * { transition-delay: calc(var(--stagger-index, 0) * 80ms); }

/* ---- Hero entrance (single orchestrated sequence on load) ---- */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__eyebrow { animation: heroFadeUp 700ms cubic-bezier(0.16,1,0.3,1) both; }
.hero h1 { animation: heroFadeUp 800ms 90ms cubic-bezier(0.16,1,0.3,1) both; }
.hero__tagline { animation: heroFadeUp 800ms 170ms cubic-bezier(0.16,1,0.3,1) both; }
.hero__desc { animation: heroFadeUp 800ms 240ms cubic-bezier(0.16,1,0.3,1) both; }
.hero__actions { animation: heroFadeUp 800ms 320ms cubic-bezier(0.16,1,0.3,1) both; }
.hero__visual { animation: heroFadeUp 900ms 200ms cubic-bezier(0.16,1,0.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow, .hero h1, .hero__tagline, .hero__desc, .hero__actions, .hero__visual {
    animation: none;
  }
}

/* ---- Ambient hero orb drift (subtle, slow, decorative only) ---- */
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-14px, 18px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}
.hero__orb { animation: orbDrift 14s ease-in-out infinite; }
.hero__orb--slow { animation-duration: 20s; animation-direction: reverse; }

/* ---- Hero light streaks: one slow sweep on load, then a very slow ambient drift ---- */
@keyframes streakSweep {
  from { stroke-dashoffset: 1400; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 0.7; }
}
@keyframes streakDrift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}
.hero__streak {
  stroke-dasharray: 1400;
  animation: streakSweep 1600ms cubic-bezier(0.16,1,0.3,1) 200ms both,
             streakDrift 10s ease-in-out 1800ms infinite;
}
.hero__streak--2 { animation-delay: 380ms, 2000ms; }
.hero__streak--3 { animation-delay: 520ms, 2200ms; }

/* ---- Hero particles: gentle independent drift, staggered ---- */
@keyframes particleDrift {
  0%, 100% { transform: translate(0, 0); opacity: 0.4; }
  50% { transform: translate(6px, -10px); opacity: 0.75; }
}
.hero__particle { animation: particleDrift 6s ease-in-out infinite; }
.hero__particle--b { animation-duration: 8s; animation-delay: 1.2s; }
.hero__particle--c { animation-duration: 7s; animation-delay: 2.4s; }

/* ---- Hero logo entrance + soft ambient pulse ---- */
@keyframes logoReveal {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 28px rgba(90,141,255,0.55)) drop-shadow(0 12px 40px rgba(0,0,0,0.5)); }
  50% { filter: drop-shadow(0 0 40px rgba(90,141,255,0.75)) drop-shadow(0 12px 40px rgba(0,0,0,0.5)); }
}
.hero__logo {
  animation: logoReveal 900ms 260ms cubic-bezier(0.16,1,0.3,1) both,
             logoPulse 4.5s ease-in-out 1200ms infinite;
}

.hero__chip { animation: orbDrift 9s ease-in-out infinite; }
.hero__chip--2 { animation-duration: 12s; animation-direction: reverse; }

@media (prefers-reduced-motion: reduce) {
  .hero__orb, .hero__streak, .hero__particle, .hero__chip { animation: none; }
  .hero__logo { animation: none; opacity: 1; transform: none; }
}

/* ---- Button micro-interaction ---- */
.btn { will-change: transform; }

/* ---- Game card ambient motion ----
   Everything here is slow, low-amplitude and transform/opacity only:
   parachutes drift down, the drop line crawls, embers rise, streaks
   breathe. Nothing blinks or flashes. All of it stops entirely under
   prefers-reduced-motion. ---- */
@keyframes chuteDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-5px, 8px); }
}
.game-card__chute { animation: chuteDrift 9s ease-in-out infinite; }
.game-card__chute:nth-of-type(2) { animation-duration: 11s; animation-delay: 1.5s; }
.game-card__chute:nth-of-type(3) { animation-duration: 13s; animation-delay: 3s; }

@keyframes dropDash {
  from { stroke-dashoffset: 26; }
  to { stroke-dashoffset: 0; }
}
.game-card__dropline { animation: dropDash 3s linear infinite; }

@keyframes emberDrift {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-10px); opacity: 0.7; }
}
.game-card__ember { animation: emberDrift 5s ease-in-out infinite; }
.game-card__ember:nth-of-type(2) { animation-delay: 1.2s; }
.game-card__ember:nth-of-type(3) { animation-delay: 2.4s; }
.game-card__ember:nth-of-type(4) { animation-delay: 3.6s; }

@keyframes streakBreathe {
  0%, 100% { opacity: 0.5; transform: translateX(0); }
  50% { opacity: 0.85; transform: translateX(-6px); }
}
.game-card__streaks { animation: streakBreathe 6s ease-in-out infinite; }

/* ---- LIVE indicator: a slow glow, deliberately NOT a blink.
   Opacity never drops far enough to read as flashing, and the dot
   itself never disappears. ---- */
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 45, 32, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(255, 45, 32, 0); }
}
.ig-card--live .ig-card__dot { animation: livePulse 2.4s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .game-card__chute, .game-card__dropline, .game-card__ember,
  .game-card__streaks, .ig-card--live .ig-card__dot { animation: none; }
}

/* ---- Staggered group reveals (transform/opacity only) ---- */
/* Game cards enter from opposite horizontal directions rather than
   the generic upward fade used elsewhere in the page. */
.games__grid > [data-reveal] { transform: translateX(-28px); }
.games__grid > [data-reveal]:nth-child(2) { transform: translateX(28px); transition-delay: 120ms; }
.games__grid > [data-reveal].is-revealed { transform: translateX(0) !important; }

.tournaments__grid > [data-reveal]:nth-child(2) { transition-delay: 100ms; }
.tournaments__grid > [data-reveal]:nth-child(3) { transition-delay: 200ms; }

.features__grid > [data-reveal]:nth-child(2) { transition-delay: 70ms; }
.features__grid > [data-reveal]:nth-child(3) { transition-delay: 140ms; }
.features__grid > [data-reveal]:nth-child(4) { transition-delay: 210ms; }
.features__grid > [data-reveal]:nth-child(5) { transition-delay: 280ms; }
.features__grid > [data-reveal]:nth-child(6) { transition-delay: 350ms; }

.steps > [data-reveal]:nth-child(2) { transition-delay: 90ms; }
.steps > [data-reveal]:nth-child(3) { transition-delay: 180ms; }
.steps > [data-reveal]:nth-child(4) { transition-delay: 270ms; }

/* ---- How it works: numbered step pops in after its card reveals ---- */
.step__num {
  transform: scale(0.4);
  opacity: 0;
  transition: transform 480ms 160ms cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 480ms 160ms ease;
}
.step.is-revealed .step__num { transform: scale(1); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .step__num { transition: none; transform: none; opacity: 1; }
}

/* ---- WhatsApp: subtle attention pulse ring on the icon, not the whole section ---- */
.whatsapp__icon { position: relative; }
.whatsapp__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid rgba(31, 138, 76, 0.45);
  animation: attentionPulse 2.6s ease-out infinite;
}
@keyframes attentionPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp__icon::after { animation: none; display: none; }
}

/* ---- Final CTA cinematic entrance sequence lives in the FINAL CTA section above,
   next to the section's own rules (background field, orbit rings,
   heading clip-reveal, staggered description/buttons) so the whole
   closing scene is defined in one place. ---- */

/* ---- Instagram section: the status swap is a state toggle, not an
   animation. Status cards never fade or slide in on a Firebase
   update — the text changes in place and the section stays still.
   The reveal-on-scroll animation applies to the panel once, on
   first scroll, and never again. ---- */
.ig__status-list > .ig-card { animation: none; transition: none; }