/* SC Elevate v1.0 — cinematic layer */

/* --- fix: donut percentage typography --- */
.donut-center #donut-pct{font-size:inherit !important}

/* --- fix: prediction grid clipping --- */
.pred-grid{overflow:visible}

/* --- section video layers --- */
.scx-vid{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.scx-vid.scx-on{opacity:1}
.scx-vid video{position:absolute;left:0;top:50%;width:100%;height:auto;transform:translateY(-50%);filter:saturate(1) brightness(1.02);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 86%,transparent 100%)}
.scx-vid .scx-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(2,8,20,.62) 0%,rgba(2,8,20,.28) 38%,transparent 60%),
  linear-gradient(180deg,#020814 0%,rgba(2,8,20,.24) 16%,rgba(2,8,20,.28) 50%,rgba(2,8,20,.24) 84%,#020814 100%)}
.scx-vid .scx-tint{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(0,212,255,.06),transparent 60%)}
section#predictions>.wrap,section#record>.wrap,section#how>.wrap{position:relative;z-index:1}

/* --- cinematic grain + vignette --- */
#scx-grain{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
#scx-vig{position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 62%,rgba(0,0,10,.38) 100%)}

/* --- section title char reveal --- */
.scx-ch{display:inline-block;will-change:transform,opacity}

/* --- result rows: pre-reveal state handled by GSAP; keep layout stable --- */
.rrow{will-change:transform,opacity}

/* --- magnetic buttons --- */
.btn{transition:box-shadow .3s ease}
.btn.scx-mag{will-change:transform}
.btn-cyan.scx-mag:hover{box-shadow:0 0 24px rgba(0,212,255,.45),0 0 60px rgba(0,212,255,.18)}
.btn-gold.scx-mag:hover{box-shadow:0 0 24px rgba(255,215,0,.4),0 0 60px rgba(255,215,0,.15)}

/* --- ticker win glow pulse --- */
@keyframes scxPulse{0%,100%{text-shadow:0 0 0 rgba(0,255,136,0)}50%{text-shadow:0 0 14px rgba(0,255,136,.55)}}

/* --- locked cards: glass instead of solid box (blur keeps PRO picks hidden) --- */
.sc-lockover{background:rgba(8,12,20,.30) !important;backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important}
.sc-lockcard{background:rgba(10,16,28,.22) !important;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}

/* --- mobile: videos fill section (cover), lighter grain --- */
@media(max-width:899px){
  .scx-vid video{top:0;left:50%;width:auto;height:100%;min-width:100%;max-width:none;transform:translate(-50%,0);object-fit:cover}
  #scx-grain{opacity:.03}
}