/* ====================================================================
   ClutchClan - Broadcast FX layer (Wave 1)
   Activated only when motion is allowed (html.cc-fx). Pointer-driven
   effects are additionally gated by html.cc-fx-pointer (desktop mouse).
   Everything is additive and degrades to the untouched base site.
   ==================================================================== */

/* ---- 20 · scroll progress rail + section dots ---- */
#ccfx-rail{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--goldDark,#E0A815),var(--goldBright,#FFD24C));box-shadow:0 0 12px rgba(255,198,29,.5);pointer-events:none}
#ccfx-dots{position:fixed;right:clamp(10px,1.6vw,20px);top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:12px}
#ccfx-dots button{width:10px;height:10px;border-radius:50%;border:1px solid rgba(255,225,170,.35);background:transparent;padding:0;cursor:pointer;transition:transform .25s,background .25s,box-shadow .25s,border-color .25s}
#ccfx-dots button[aria-current="true"]{background:var(--gold,#FFC61D);box-shadow:0 0 10px rgba(255,198,29,.7);transform:scale(1.25)}
#ccfx-dots button:hover{border-color:var(--gold,#FFC61D)}
@media (max-width:760px){#ccfx-dots{display:none}}

/* ---- 5 · live match ticker ---- */
#ccfx-ticker{position:relative;z-index:5;overflow:hidden;background:linear-gradient(180deg,#1B100A,#160D08);border-top:1px solid var(--bLight,rgba(255,225,170,.1));border-bottom:1px solid var(--bLight,rgba(255,225,170,.1));-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
#ccfx-ticker .ccfx-track{display:inline-flex;align-items:center;gap:34px;padding:9px 24px;white-space:nowrap;will-change:transform;animation:ccfxMarquee 40s linear infinite}
#ccfx-ticker:hover .ccfx-track{animation-duration:110s}
#ccfx-ticker .ccfx-it{display:inline-flex;align-items:center;gap:9px;font-family:'Sora',sans-serif;font-weight:700;font-size:12px;letter-spacing:.03em;color:var(--text2,#C9B79F)}
#ccfx-ticker .ccfx-it b{color:#FBF4E9}
#ccfx-ticker .ccfx-live{color:#E5484D;font-size:9px;letter-spacing:.12em}
#ccfx-ticker .ccfx-rt{color:var(--gold,#FFC61D)}
#ccfx-ticker .ccfx-sep{width:5px;height:5px;border-radius:50%;background:var(--bronzeLight,#A9743C);flex:0 0 auto}
@keyframes ccfxMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---- 4 · odometer counters ---- */
.ccfx-od{display:inline-flex;overflow:hidden;line-height:1;vertical-align:baseline}
.ccfx-od .ccfx-col{display:inline-block;height:1em;overflow:hidden}
.ccfx-od .ccfx-reel{display:flex;flex-direction:column;will-change:transform}
.ccfx-od .ccfx-reel>span{height:1em;display:block;text-align:center}

/* ---- 6 · custom cursor (desktop) ---- */
/* Hide the OS cursor ONLY once the custom cursor is actually drawn (initCursor adds
   cc-fx-cursor). If fx.js fails to load or bails, the OS cursor stays visible. */
html.cc-fx-cursor,
html.cc-fx-cursor a,html.cc-fx-cursor button,html.cc-fx-cursor input,html.cc-fx-cursor select,
html.cc-fx-cursor textarea,html.cc-fx-cursor [data-act],html.cc-fx-cursor [data-faq-toggle],
html.cc-fx-cursor [data-topic-card],html.cc-fx-cursor label{cursor:none}
#ccfx-cursor{position:fixed;left:0;top:0;z-index:100000;pointer-events:none;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(255,198,29,.9);border-radius:50%;mix-blend-mode:screen;transition:width .18s,height .18s,margin .18s,background .18s,border-color .18s,opacity .2s;will-change:transform}
#ccfx-cursor.is-hover{width:54px;height:54px;margin:-27px 0 0 -27px;background:rgba(255,198,29,.10)}
#ccfx-cursor.is-down{transform-origin:center;width:24px;height:24px;margin:-12px 0 0 -12px}
#ccfx-cursor.is-hidden{opacity:0}
#ccfx-dot{position:fixed;left:0;top:0;z-index:100001;pointer-events:none;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--goldBright,#FFD24C);box-shadow:0 0 8px rgba(255,198,29,.8);will-change:transform;transition:opacity .2s}
#ccfx-dot.is-hidden{opacity:0}
#ccfx-cursor .ccfx-clabel{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%);font-family:'Sora',sans-serif;font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#1A0E03;background:var(--gold,#FFC61D);padding:3px 9px;border-radius:6px;white-space:nowrap;opacity:0;transition:opacity .15s}
#ccfx-cursor.has-label .ccfx-clabel{opacity:1}

/* ---- 7 · magnetic elements (transition lives in the class so the runtime's
        inline-style hover never strips the spring-back) ---- */
.ccfx-mag{transition:transform .18s cubic-bezier(.2,.7,.2,1)}

/* ---- 8 · 3D tilt + glare ---- */
.ccfx-tilt{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1);overflow:hidden}
.ccfx-tilt .ccfx-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:4;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,242,205,.28),transparent 46%);transition:opacity .35s}
.ccfx-tilt.is-tilting .ccfx-glare{opacity:1}

/* ---- 9 · spotlight follow ---- */
.ccfx-spot::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .45s;background:radial-gradient(440px circle at var(--sx,50%) var(--sy,50%),rgba(255,198,29,.07),transparent 60%)}
.ccfx-spot.is-spot::before{opacity:1}

/* ---- 13 · film grain + gold bloom ---- */
#ccfx-grain{position:fixed;inset:-8%;z-index:90;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:ccfxGrain 1.05s steps(5) infinite}
@keyframes ccfxGrain{0%{transform:translate(0,0)}20%{transform:translate(-5%,4%)}40%{transform:translate(4%,-5%)}60%{transform:translate(-3%,2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
html.cc-fx .ccfx-bloom{text-shadow:0 0 14px rgba(255,198,29,.22)}

/* ---- 15 · aurora backdrop (paints above the section bg, below content) ---- */
.ccfx-aurora{isolation:isolate}
/* Oversized (inset:-15%) so the compositor-only transform never reveals section edges.
   Animating transform (not background-position) keeps this off the paint path. */
.ccfx-aurora::after{content:"";position:absolute;inset:-15%;z-index:-1;pointer-events:none;opacity:.55;background:radial-gradient(40% 60% at 18% 22%,rgba(255,198,29,.10),transparent 60%),radial-gradient(45% 55% at 82% 28%,rgba(169,116,60,.13),transparent 60%),radial-gradient(55% 60% at 50% 92%,rgba(94,60,28,.16),transparent 62%);will-change:transform;animation:ccfxAurora 26s ease-in-out infinite alternate}
@keyframes ccfxAurora{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(3%,-3%,0) scale(1.08)}}

/* ---- 16 · advanced glass polish (refraction-inspired edges on frosted panels) ---- */
html.cc-fx .ccfx-glass{position:relative;box-shadow:0 24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,240,210,.10),inset 0 0 0 1px rgba(255,225,170,.04)}

/* ---- 18 · button ripple ---- */
.ccfx-ripple{position:absolute;border-radius:50%;background:rgba(255,240,205,.4);transform:scale(0);animation:ccfxRipple .6s ease-out forwards;pointer-events:none;mix-blend-mode:overlay;z-index:5}
@keyframes ccfxRipple{to{transform:scale(2.4);opacity:0}}

/* ---- 19 · view crossfade (replaces hard cut between SPA screens) ---- */
html.cc-fx .cc-screen.cc-on{animation:ccfxViewIn .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes ccfxViewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- 22 · reduced motion: neutralize everything (belt-and-suspenders;
        the head guard already prevents cc-fx from being added) ---- */
@media (prefers-reduced-motion:reduce){
  #ccfx-cursor,#ccfx-dot,#ccfx-grain{display:none!important}
  #ccfx-ticker .ccfx-track{animation:none;transform:none}
  .ccfx-aurora::after{animation:none}
  html.cc-fx .cc-screen.cc-on{animation:none}
  .ccfx-tilt,.ccfx-mag{transition:none}
}