/* Homepage effects: stadium-lights hero, scoreboard, ticker, filmstrip, scroll reveals */

/* ---------- hero stage ---------- */
.fx-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(40px, 6vw, 84px) 0 clamp(36px, 5vw, 60px); }
.fx-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 520px at 50% 108%, rgba(84, 140, 214, .42), transparent 62%),
    radial-gradient(900px 420px at 50% -10%, #24497a 0%, transparent 70%),
    linear-gradient(180deg, #0c1f3a 0%, #0a1a30 55%, #081527 100%); }
.fx-stars { position: absolute; inset: 0 0 35% 0; opacity: .85;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 17% 32%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 29% 9%, #fff, transparent), radial-gradient(1.3px 1.3px at 41% 24%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 53% 6%, #fff, transparent), radial-gradient(1.2px 1.2px at 64% 28%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 76% 11%, #fff, transparent), radial-gradient(1.3px 1.3px at 88% 21%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 95% 7%, #fff, transparent), radial-gradient(1.4px 1.4px at 35% 40%, #fff, transparent);
  animation: fx-twinkle 4s ease-in-out infinite alternate; }
.fx-stars.s2 { transform: translate(3%, 4%); animation-delay: 2s; opacity: .55; }
@keyframes fx-twinkle { from { opacity: .35; } to { opacity: .95; } }

/* floodlight towers + sweeping beams */
.fx-tower { position: absolute; top: 3%; width: 70px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 6px;
  border-radius: 6px; background: rgba(20, 38, 64, .9); box-shadow: 0 0 0 2px rgba(199, 142, 30, .5); }
.fx-tower i { height: 12px; border-radius: 3px; background: #fffbe8; box-shadow: 0 0 10px 3px rgba(255, 240, 190, .85), 0 0 34px 10px rgba(255, 230, 160, .35); }
.fx-tower.l { left: 4%; transform: rotate(-8deg); }
.fx-tower.r { right: 4%; transform: rotate(8deg); }
.fx-beam { position: absolute; top: 10%; width: 70vw; height: 140%; opacity: .75; mix-blend-mode: screen; filter: blur(2px);
  background: conic-gradient(from 180deg at 50% 0%, transparent 0deg, rgba(255, 244, 200, .0) 158deg, rgba(255, 244, 200, .28) 172deg,
    rgba(255, 250, 225, .42) 180deg, rgba(255, 244, 200, .28) 188deg, rgba(255, 244, 200, 0) 202deg, transparent 360deg); }
.fx-beam.l { left: calc(4% + 35px - 35vw); transform-origin: 50% 0; animation: fx-sweep-l 9s ease-in-out infinite alternate; }
.fx-beam.r { right: calc(4% + 35px - 35vw); transform-origin: 50% 0; animation: fx-sweep-r 11s ease-in-out infinite alternate; }
@keyframes fx-sweep-l { from { transform: rotate(-38deg); } to { transform: rotate(-12deg); } }
@keyframes fx-sweep-r { from { transform: rotate(36deg); } to { transform: rotate(10deg); } }
/* glowing stadium bowl rim at the bottom */
.fx-bowl { position: absolute; left: -20%; right: -20%; bottom: -74%; height: 90%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(42, 74, 117, .55), rgba(8, 21, 39, .98) 58%);
  box-shadow: 0 -3px 0 rgba(170, 210, 255, .65), 0 -16px 60px rgba(120, 170, 240, .4), 0 -2px 120px rgba(244, 196, 67, .12); }

.fx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.fx-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.fx-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px;
  font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--silver);
  background: rgba(10, 26, 48, .6); box-shadow: inset 0 0 0 1.5px rgba(244, 196, 67, .5); }
.fx-badge b { padding: 5px 10px; border-radius: 999px; color: var(--night); background: linear-gradient(180deg, #ffe08a, var(--gold) 45%, var(--gold-d)); }
.fx-title { margin: 0; font-size: clamp(44px, 5.7vw, 86px); line-height: .96; font-weight: 900; letter-spacing: -.045em; }
.fx-title span { display: block; white-space: nowrap; background: linear-gradient(180deg, #fff, var(--silver) 55%, #9fb3cf); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 0 rgba(10, 26, 48, .85)); opacity: 0; transform: translateY(26px); animation: fx-rise .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.fx-title span:nth-child(2) { animation-delay: .12s; }
.fx-title span.gold { animation-delay: .24s, .24s; animation-name: fx-rise, fx-shimmer; animation-duration: .8s, 5s; animation-iteration-count: 1, infinite;
  background: linear-gradient(100deg, #c78e1e 0%, #f4c443 30%, #fff3c4 45%, #f4c443 60%, #c78e1e 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; }
@keyframes fx-rise { to { opacity: 1; transform: none; } }
@keyframes fx-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -150% 0; } }
.fx-lead { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--silver); max-width: 560px; }

/* phones: floating fan */
.fx-hero-phones { position: relative; height: 640px; perspective: 1400px; }
.fx-phone { position: absolute; top: 50%; left: 50%; aspect-ratio: 1179 / 2556; border-radius: 44px; padding: 10px;
  background: linear-gradient(180deg, #2a3c57, #0b1526); box-shadow: 0 0 0 3px var(--gold-d), 0 34px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(244, 196, 67, .18);
  transition: transform .25s ease-out; }
.fx-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 35px; display: block; }
.fx-phone.p2 { width: 290px; z-index: 3; --b: translate(-50%, -50%); animation: fx-float 6s ease-in-out infinite; }
.fx-phone.p1 { width: 236px; z-index: 2; --b: translate(-118%, -44%) rotate(-9deg); animation: fx-float 7s ease-in-out -2s infinite; opacity: .95; }
.fx-phone.p3 { width: 236px; z-index: 2; --b: translate(18%, -44%) rotate(9deg); animation: fx-float 6.5s ease-in-out -4s infinite; opacity: .95; }
@keyframes fx-float { 0%, 100% { transform: var(--b) translateY(0) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
  50% { transform: var(--b) translateY(-14px) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); } }
.fx-glow { position: absolute; left: 50%; top: 56%; width: 520px; height: 520px; transform: translate(-50%, -50%); z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 196, 67, .28), rgba(244, 196, 67, 0) 62%); filter: blur(10px); animation: fx-pulse 4s ease-in-out infinite; }
@keyframes fx-pulse { 50% { opacity: .55; transform: translate(-50%, -50%) scale(.92); } }
.fx-seal { left: 2%; bottom: 4%; width: 138px; height: 138px; font-size: 17px; animation: fx-spin-in 1s .5s cubic-bezier(.2, .8, .2, 1.2) both; }
@keyframes fx-spin-in { from { opacity: 0; transform: rotate(-120deg) scale(.4); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }

/* ---------- scoreboard ---------- */
.fx-board { margin-top: clamp(26px, 4vw, 46px); display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, #0d1c33, #07111f); box-shadow: 0 0 0 3px var(--gold-d), 0 0 0 7px rgba(10, 26, 48, .9), 0 0 0 8px rgba(244, 196, 67, .35), 0 24px 60px rgba(0, 0, 0, .5); }
.fx-board > div { position: relative; padding: 20px 10px 18px; text-align: center; border-right: 1px solid rgba(244, 196, 67, .2);
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.2px); background-size: 6px 6px; }
.fx-board > div:last-child { border-right: 0; }
.fx-board b, .fx-board span { font-family: 'Inter', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size: clamp(30px, 4.2vw, 52px); font-weight: 900; letter-spacing: -.02em;
  color: #ffd76a; text-shadow: 0 0 12px rgba(255, 200, 70, .75), 0 0 30px rgba(255, 180, 40, .35); }
.fx-board em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--silver); }

/* ---------- ticker ---------- */
.fx-ticker { position: relative; overflow: hidden; padding: 14px 0; transform: rotate(-1.4deg); margin: 22px -10px 6px;
  background: linear-gradient(180deg, #ffe08a, var(--gold) 45%, var(--gold-d)); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.fx-ticker-track { display: flex; width: max-content; gap: 26px; animation: fx-marquee 38s linear infinite; }
.fx-ticker span { font-size: 18px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--night); white-space: nowrap; }
.fx-ticker i { font-style: normal; color: rgba(10, 26, 48, .55); font-size: 16px; }
@keyframes fx-marquee { to { transform: translateX(-50%); } }

/* ---------- app filmstrip ---------- */
.fx-film { padding: clamp(30px, 5vw, 56px) 0 clamp(10px, 2vw, 20px); }
.fx-film-label { text-align: center; margin: 0 0 18px; font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.fx-film-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fx-film-track { display: flex; gap: 22px; width: max-content; padding: 16px 0 26px; animation: fx-marquee 70s linear infinite; }
.fx-film-row:hover .fx-film-track { animation-play-state: paused; }
.fx-film-phone { width: 190px; flex: none; aspect-ratio: 1179 / 2556; border-radius: 30px; padding: 7px; background: linear-gradient(180deg, #2a3c57, #0b1526);
  box-shadow: 0 0 0 2px var(--gold-d), 0 18px 40px rgba(0, 0, 0, .5); transition: transform .25s ease; }
.fx-film-phone:nth-child(odd) { transform: translateY(14px); }
.fx-film-phone:hover { transform: translateY(-6px) scale(1.04); box-shadow: 0 0 0 2px var(--gold), 0 24px 50px rgba(0, 0, 0, .55), 0 0 40px rgba(244, 196, 67, .3); }
.fx-film-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 24px; display: block; }

/* ---------- scroll reveals ---------- */
.fx-js .fx-reveal .frame { opacity: 0; transform: translateY(46px) scale(.98); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.fx-js .fx-reveal.in .frame { opacity: 1; transform: none; }
.fx-js .fx-reveal .phones .phone { transition: transform 1s cubic-bezier(.2, .7, .2, 1) .15s, opacity 1s ease .15s; }
.fx-js .fx-reveal:not(.in) .phones .phone { opacity: 0; transform: translateY(80px) rotate(0deg); }
.fx-reveal .frame { transition: box-shadow .3s ease; }
.fx-reveal .frame:hover { box-shadow: 0 0 0 1px rgba(244, 196, 67, .5), 0 30px 80px rgba(0, 0, 0, .45), 0 0 60px rgba(244, 196, 67, .12); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .fx-hero-grid { grid-template-columns: 1fr; text-align: left; }
  .fx-hero-phones { height: 520px; }
  .fx-phone.p2 { width: 230px; } .fx-phone.p1, .fx-phone.p3 { width: 186px; }
  .fx-tower { width: 48px; } .fx-tower i { height: 8px; }
  .fx-board { grid-template-columns: repeat(2, 1fr); }
  .fx-board > div:nth-child(2) { border-right: 0; }
  .fx-board > div:nth-child(-n+2) { border-bottom: 1px solid rgba(244, 196, 67, .2); }
}
@media (max-width: 520px) {
  .fx-hero { padding-top: 78px; }
  .fx-tower { top: 18px; width: 40px; gap: 3px; padding: 4px; } .fx-tower i { height: 6px; }
  .fx-hero-phones { height: 430px; }
  .fx-phone.p2 { width: 190px; border-radius: 32px; padding: 8px; } .fx-phone.p2 img { border-radius: 25px; }
  .fx-phone.p1, .fx-phone.p3 { width: 150px; border-radius: 28px; padding: 7px; }
  .fx-phone.p1 img, .fx-phone.p3 img { border-radius: 22px; }
  .fx-seal { width: 96px; height: 96px; font-size: 12px; border-width: 4px; }
  .fx-film-phone { width: 140px; border-radius: 22px; padding: 5px; } .fx-film-phone img { border-radius: 18px; }
  .fx-ticker span { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-stars, .fx-beam, .fx-phone, .fx-glow, .fx-ticker-track, .fx-film-track, .fx-title span, .fx-seal { animation: none !important; }
  .fx-title span { opacity: 1; transform: none; }
  .fx-phone { transform: var(--b); }
  .fx-js .fx-reveal .frame, .fx-js .fx-reveal .phones .phone { opacity: 1 !important; transform: none !important; transition: none; }
}
.fx-kicker { margin: 0 0 -8px; font-size: clamp(15px, 1.4vw, 19px); font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: var(--gold);
  text-shadow: 0 0 18px rgba(244, 196, 67, .45); opacity: 0; animation: fx-rise .7s ease forwards; }
@media (prefers-reduced-motion: reduce) { .fx-kicker { animation: none; opacity: 1; } }