/* Home-page-specific styles — enqueued only on is_front_page() */

.hero-grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,243,0,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,243,0,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 0%, transparent 100%);
}

.featured-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.latest-match-teaser {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  background: var(--bg3);
  clip-path: var(--blade-lg);
  padding: 24px 32px;
  border-left: 3px solid var(--acc15);
}

@media (max-width: 600px) {
  .featured-strip        { grid-template-columns: 1fr; }
  .latest-match-teaser   { grid-template-columns: 1fr; }
}

/* ── Mobile app teaser phone mockup ─────────────────────────────────────────── */

.phone-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,243,0,.07) 0%, transparent 70%);
  padding-top: 60px;
  overflow: hidden;
  max-height: 420px;
}

.phone-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 50%, var(--bg) 95%);
  z-index: 3;
  pointer-events: none;
}

.phone-mockup {
  width: 265px;
  background: #080808;
  border-radius: 44px;
  border: 7px solid #252525;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 -20px 60px rgba(255,243,0,.06),
    0 40px 80px rgba(0,0,0,.8),
    inset 0 1px 0 rgba(255,255,255,.07);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.phone-notch-bar {
  display: flex;
  justify-content: center;
  padding: 10px 0 0;
}

.phone-notch {
  width: 90px;
  height: 22px;
  background: #080808;
  border-radius: 0 0 14px 14px;
  border: 1px solid #252525;
  border-top: none;
}

.phone-content { padding: 12px 14px 20px; }

.phone-coming-soon {
  position: absolute;
  inset: 0;
  border-radius: 38px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  z-index: 10;
}

.phone-cs-eyebrow {
  font-family: var(--font-ui);
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text3);
}

.phone-cs-text {
  font-family: var(--font-h);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: .08em;
  text-align: center;
  line-height: 1.2;
}

.phone-cs-line {
  width: 32px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.phone-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.phone-logo {
  font-family: var(--font-h);
  font-size: .6rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: .15em;
}

.phone-icons {
  display: flex;
  gap: 6px;
  font-size: .75rem;
}

.phone-rank-card {
  background: linear-gradient(135deg, rgba(255,243,0,.08) 0%, rgba(255,243,0,.02) 100%);
  border: 1px solid rgba(255,243,0,.18);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}

.phone-rank-label {
  font-family: var(--font-ui);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 4px;
}

.phone-rank-name {
  font-family: var(--font-h);
  font-size: .85rem;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 8px;
}

.phone-xp-bar-track {
  height: 4px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.phone-xp-bar-fill {
  height: 100%;
  width: 83%;
  background: linear-gradient(90deg, var(--accent), rgba(255,243,0,.6));
  border-radius: 2px;
}

.phone-xp-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: .48rem;
  color: var(--text3);
}

.phone-stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.phone-stat {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 6px;
  text-align: center;
}

.phone-stat-val {
  font-family: var(--font-h);
  font-size: .82rem;
  font-weight: 900;
  color: var(--text);
  display: block;
}

.phone-stat-lbl {
  font-family: var(--font-ui);
  font-size: .44rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-top: 2px;
  display: block;
}

.phone-match-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
}

.phone-match-head {
  font-family: var(--font-ui);
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

.phone-match-name {
  font-family: var(--font-h);
  font-size: .7rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.phone-match-time {
  font-family: var(--font-ui);
  font-size: .5rem;
  color: var(--text3);
}

.phone-activity-head {
  font-family: var(--font-ui);
  font-size: .48rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 6px;
}

.phone-activity-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: .52rem;
  color: var(--text2);
}

/* ── Signup strip ─────────────────────────────────────────────────────────── */
.signup-strip {
  background: rgba(255,243,0,.03);
  border: 1px solid rgba(255,243,0,.2);
  border-radius: 16px;
  padding: clamp(32px,5vw,52px) clamp(28px,5vw,52px);
  position: relative;
  overflow: hidden;
}
.signup-strip::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(255,243,0,.06) 0%, transparent 65%);
  pointer-events: none;
}
.signup-strip-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 48px;
  position: relative;
}
.signup-strip-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 24px;
}
.signup-perks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 220px;
}
.signup-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
  color: var(--text2);
}
.signup-perk-icon {
  width: 28px;
  text-align: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
@media (max-width: 700px) {
  .signup-strip-inner { grid-template-columns: 1fr; }
  .signup-perks { display: none; }
}

.phone-activity-item:last-child { border-bottom: none; }

/* ── Discord Booster Section ──────────────────────────────────────────────── */

.booster-sect {
  position: relative;
  overflow: hidden;
}

/* Left: Discord blurple glow */
.booster-sect::before {
  content: '';
  position: absolute;
  top: 0; left: -10%;
  width: 60%;
  height: 100%;
  background: radial-gradient(ellipse at 25% 50%, rgba(88,101,242,.10) 0%, transparent 65%);
  pointer-events: none;
}

/* Right: boost-pink glow */
.booster-sect::after {
  content: '';
  position: absolute;
  top: -20%;
  right: -5%;
  width: 52%;
  height: 120%;
  background: radial-gradient(ellipse at 80% 35%, rgba(235,69,158,.08) 0%, transparent 60%);
  pointer-events: none;
}

.booster-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Boost-pink eyebrow override */
.booster-eyebrow {
  background: rgba(235,69,158,.10) !important;
  border: 1px solid rgba(235,69,158,.22) !important;
  color: #ff73fa !important;
}
.booster-eyebrow::before {
  background: #ff73fa !important;
}

/* Gradient heading text */
.booster-grad {
  background: linear-gradient(120deg, #ff73fa 0%, #5865F2 75%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.booster-highlight {
  font-style: normal;
  font-weight: 700;
  color: #ff73fa;
}

/* Perks list */
.booster-perks {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.booster-perks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .84rem;
  color: var(--text2);
  font-family: var(--font-ui);
  font-weight: 500;
}

.bp-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff73fa, #5865F2);
  flex-shrink: 0;
}

/* Boost CTA button */
.btn--boost {
  background: linear-gradient(135deg, #EB459E 0%, #5865F2 100%);
  color: #fff !important;
  position: relative;
  overflow: hidden;
}

.btn--boost::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 55%);
  clip-path: var(--blade-sm);
  pointer-events: none;
}

.btn--boost:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(88,101,242,.28), 0 4px 12px rgba(235,69,158,.2);
  color: #fff !important;
}

/* ── Preview card ──────────────────────────── */

.booster-preview {
  position: relative;
}

.booster-preview::before {
  content: '';
  position: absolute;
  inset: -48px;
  background: radial-gradient(ellipse at 50% 50%, rgba(88,101,242,.14) 0%, transparent 65%);
  pointer-events: none;
}

.booster-card {
  background: var(--bg2);
  border: 1px solid rgba(88,101,242,.3);
  border-radius: 16px;
  overflow: hidden;
  clip-path: var(--blade-md);
  box-shadow:
    0 0 0 1px rgba(235,69,158,.06),
    0 24px 64px rgba(88,101,242,.14),
    0 4px 16px rgba(0,0,0,.45);
  position: relative;
}

.booster-card-head {
  padding: 14px 18px;
  background: linear-gradient(120deg, rgba(235,69,158,.16) 0%, rgba(88,101,242,.18) 100%);
  border-bottom: 1px solid rgba(88,101,242,.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bc-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ff73fa;
}

.bc-lock {
  font-family: var(--font-ui);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,115,250,.45);
  background: rgba(235,69,158,.08);
  border: 1px solid rgba(235,69,158,.14);
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.booster-card-body {
  padding: 14px;
  position: relative;
}

.booster-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.btile {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 13px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.btile-icon { font-size: 1.25rem; }

.btile-name {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text2);
  margin-top: 2px;
}

.btile-count {
  font-family: var(--font-ui);
  font-size: .62rem;
  color: var(--text3);
  font-weight: 500;
}

/* Frosted lock overlay */
.booster-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(8,8,8,.68);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blo-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.blo-inner svg {
  width: 30px;
  height: 30px;
  color: rgba(255,115,250,.55);
}

.blo-inner span {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

/* Card footer */
.booster-card-foot {
  padding: 12px 18px;
  border-top: 1px solid rgba(88,101,242,.14);
  background: rgba(88,101,242,.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.bcf-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,115,250,.38);
}

.bcf-link {
  font-family: var(--font-ui);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(255,115,250,.45);
  transition: color .15s;
}

.bcf-link:hover { color: rgba(255,115,250,.75); }

/* Responsive */
@media (max-width: 960px) {
  .booster-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .booster-preview { max-width: 440px; }
}

@media (max-width: 500px) {
  .booster-tiles { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile hero: shrink to content ──────────────────────────────────────────
   Desktop keeps the full-screen bottom-anchored hero. On mobile that leaves a
   huge empty stretch between the nav and the text (with the Discord badge
   floating in it), so the hero collapses to its content instead:
   nav → badge → heading with no dead space. */
@media (max-width: 820px) {
  .hero {
    min-height: 0;
    justify-content: flex-start;
    padding-top: 118px;
  }
}

/* ── Hero rotating word ──────────────────────────────────────────────────────
   Second heading line cycles AMBITIOUS. → GROWING. → THE FUTURE.; only the
   accent-classed word (THE FUTURE.) is yellow, the rest inherit the heading
   colour. Each word slides in fast from the right edge of the page and
   "knocks" the current word off the left edge (.hero has overflow:hidden,
   so nothing causes horizontal scroll). Words stack absolutely; the
   container reserves one heading line. */
.hero-rotate {
  position: relative;
  display: block;
  height: 1.12em;
}
.hero-rot-word {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  transform: translateX(-120vw); /* parked off the left edge */
}
.hero-rot-word.is-in { transform: translateX(0); }

/* Incoming: accelerate across from the left, slam into place, push through
   slightly on impact, then recoil and settle. */
@keyframes heroRotIn {
  0%   { transform: translateX(-120vw); animation-timing-function: cubic-bezier(.55,.05,.85,.5); }
  58%  { transform: translateX(0);      animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  70%  { transform: translateX(.07em) skewX(4deg); }
  84%  { transform: translateX(-.035em) skewX(-1.5deg); }
  100% { transform: translateX(0); }
}
.hero-rot-word.is-enter {
  animation: heroRotIn .84s forwards;
}

/* Outgoing: hit at full speed — flies off the right edge with a bit of spin,
   easing out like a launched object. */
@keyframes heroRotOut {
  0%   { transform: translateX(0) rotate(0); }
  100% { transform: translateX(130vw) rotate(7deg); }
}
.hero-rot-word.is-knocked {
  animation: heroRotOut .58s cubic-bezier(.18,.65,.4,1) forwards;
}

/* THE FUTURE. — glare/shimmer: a brighter band sweeps across the accent
   text (background-clip:text; user-requested effect). The accent word must
   re-list the shine alongside the enter/knock animations because the
   animation shorthand would otherwise replace it. */
@keyframes heroShine {
  0%   { background-position: 210% 0; }
  100% { background-position: -110% 0; }
}
.hero-rot-word.accent {
  background: linear-gradient(110deg, var(--accent) 42%, #fffdd6 50%, var(--accent) 58%) 0 0/240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: heroShine 2.8s linear infinite;
}
.hero-rot-word.accent.is-enter {
  animation: heroRotIn .84s forwards, heroShine 2.8s linear infinite;
}
.hero-rot-word.accent.is-knocked {
  animation: heroRotOut .58s cubic-bezier(.18,.65,.4,1) forwards, heroShine 2.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-rot-word.accent,
  .hero-rot-word.accent.is-enter,
  .hero-rot-word.accent.is-knocked { animation: none; background-position: 50% 0; }
}