/* ==========================================================================
   FX LAYER: motion gradient + glassmorphism + film grain
   Load after gym.css and opt in with <body class="fx">.
   Containers with [data-fx-host] (the phone screen) get their own gradient.
   data.js injects the .fx-bg / .fx-grain elements.
   ========================================================================== */
:root{
  --fx-1:#3d7bff;            /* cobalt (accent) */
  --fx-2:#6b45ff;            /* violet */
  --fx-3:#14c8ff;            /* cyan */
  --fx-4:#0d1b4d;            /* deep navy */
  --glass-fill:rgba(12,14,22,.38);
  --glass-sheen:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.015) 55%,rgba(255,255,255,.03));
  --glass-line:rgba(255,255,255,.10);
  --glass-hi:inset 0 1px 0 rgba(255,255,255,.09);
  --glass-drop:0 24px 48px -28px rgba(0,0,0,.7);
  --glass-blur:blur(22px) saturate(160%);
}
html{background:#000}
body.fx{background:transparent}

/* Motion gradient */
.fx-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#020309}
.fx-bg.in-host{position:absolute;z-index:0}
.fx-bg i{position:absolute;display:block;width:72vmax;aspect-ratio:1;border-radius:50%;filter:blur(70px);mix-blend-mode:screen;will-change:transform}
.fx-bg.in-host i{width:150%;filter:blur(46px)}
.fx-bg i:nth-child(1){background:radial-gradient(circle,var(--fx-1) 0,transparent 66%);top:-24%;left:-18%;opacity:.62;animation:fxA 24s ease-in-out infinite alternate}
.fx-bg i:nth-child(2){background:radial-gradient(circle,var(--fx-2) 0,transparent 64%);top:8%;right:-26%;opacity:.48;animation:fxB 31s ease-in-out infinite alternate}
.fx-bg i:nth-child(3){background:radial-gradient(circle,var(--fx-3) 0,transparent 62%);bottom:-34%;left:14%;opacity:.30;animation:fxC 37s ease-in-out infinite alternate}
.fx-bg i:nth-child(4){background:conic-gradient(from 0deg,var(--fx-4),transparent 30%,var(--fx-4) 55%,transparent 80%,var(--fx-4));top:-10%;left:-10%;width:120%;opacity:.55;filter:blur(90px);animation:fxSpin 60s linear infinite}
.fx-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 120% 90% at 50% 40%,transparent 35%,rgba(0,0,0,.72) 100%),linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))}
@keyframes fxA{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18%,12%,0) scale(1.12)}100%{transform:translate3d(32%,-4%,0) scale(.94)}}
@keyframes fxB{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-22%,18%,0) scale(1.18)}100%{transform:translate3d(-8%,34%,0) scale(1)}}
@keyframes fxC{0%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(16%,-22%,0) scale(.9)}100%{transform:translate3d(-20%,-10%,0) scale(1.15)}}
@keyframes fxSpin{to{transform:rotate(360deg)}}

/* Film grain */
.fx-grain{position:fixed;inset:-60%;z-index:400;pointer-events:none;opacity:.075;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:fxGrain 2.4s steps(8) infinite}
@keyframes fxGrain{0%{transform:translate(0,0)}12%{transform:translate(-3%,2%)}25%{transform:translate(2%,-4%)}37%{transform:translate(-4%,-1%)}50%{transform:translate(3%,3%)}62%{transform:translate(-2%,4%)}75%{transform:translate(4%,-2%)}87%{transform:translate(-1%,-3%)}100%{transform:translate(0,0)}}

/* Glass recipe */
body.fx .card,
body.fx .glass{background:var(--glass-sheen),var(--glass-fill);border-color:var(--glass-line);box-shadow:var(--glass-hi),var(--glass-drop);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
body.fx .chip:not(.on){background:rgba(255,255,255,.04);border-color:var(--glass-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
body.fx .btn-outline{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.fx .btn-primary{box-shadow:0 10px 30px -12px rgba(61,123,255,.55)}
body.fx .concept-bar{background:linear-gradient(90deg,var(--fx-1),var(--fx-2),var(--fx-1));background-size:200% 100%;animation:fxBar 12s linear infinite;color:#fff}
@keyframes fxBar{to{background-position:200% 0}}
body.fx .divider{background:var(--glass-line)}

/* Website surfaces */
body.fx .occ,body.fx .ps-card,body.fx .float,body.fx .map,body.fx .badge,body.fx .sheet,body.fx .phone{background:var(--glass-sheen),var(--glass-fill);border-color:var(--glass-line);box-shadow:var(--glass-hi),var(--glass-drop);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
body.fx .nav{background:rgba(6,8,14,.42);border-color:var(--glass-line);-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}
body.fx .menu{background:rgba(4,6,12,.62);-webkit-backdrop-filter:blur(32px) saturate(160%);backdrop-filter:blur(32px) saturate(160%)}
body.fx .scrim{background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* App surfaces (inside the phone) */
body.fx .screen{background:#020309}
body.fx .view{background:transparent}
body.fx .screen :is(.c,.list,.qa button,.cls,.seatmap,.msg.ai,.pod .blk,.ticket,.hd-b,.icb,.phone-in,.push,.opt,.cta){background:var(--glass-sheen),var(--glass-fill);border-color:var(--glass-line);box-shadow:var(--glass-hi);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
body.fx .screen .sheet{background:var(--glass-sheen),rgba(10,12,20,.72)}
body.fx .screen .seat:not(.tk):not(.sel):not(.mine){background:rgba(255,255,255,.04)}
body.fx .screen .tabbar{background:rgba(8,10,18,.45);border-color:var(--glass-line);-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%)}
body.fx .screen .tb-qr{box-shadow:0 0 0 6px rgba(8,10,18,.6),0 12px 34px -6px rgba(61,123,255,.7)}
body.fx .screen .ticket .perf::before,body.fx .screen .ticket .perf::after{background:#05070d}
body.fx .jump button.on,body.fx .jump button:hover{background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

@media (prefers-reduced-motion:reduce){.fx-bg i,.fx-grain,body.fx .concept-bar{animation:none!important}}