/* OEC polish layer: shared motion timing, readable type, broadcast-style live states,
   texture, loading placeholders and small interaction details. Paired with oec-polish.js. */
:root{
  --oec-ease:cubic-bezier(.2,.8,.2,1);
  --oec-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --oec-fast:150ms;--oec-mid:300ms;--oec-slow:600ms;
  --oec-live:#ff3b5c;
}

/* ===== 1. One timing curve everywhere ===== */
a,button,.btn,.smallbtn,.oecp-btn,.tab,.weekbtn,nav a,.card,.match,.team-card,.media-card,.rule-card,.champion-card,.sponsor,.feature,.stream,.oecp-match,input,select,textarea{
  transition-timing-function:var(--oec-ease)!important;
}
.btn,.smallbtn,.oecp-btn,.tab,.weekbtn,nav a,input,select,textarea{transition-duration:var(--oec-fast)!important}
.card,.match,.team-card,.media-card,.rule-card,.champion-card,.sponsor,.feature,.stream{transition-duration:var(--oec-mid)!important}

/* ===== 2. Staggered entrances ===== */
.reveal:not(.oec-settled){
  transition:opacity var(--oec-slow) var(--oec-ease),transform var(--oec-slow) var(--oec-ease)!important;
}
.reveal.in:not(.oec-settled):nth-child(2){transition-delay:55ms!important}
.reveal.in:not(.oec-settled):nth-child(3){transition-delay:110ms!important}
.reveal.in:not(.oec-settled):nth-child(4){transition-delay:165ms!important}
.reveal.in:not(.oec-settled):nth-child(5){transition-delay:220ms!important}
.reveal.in:not(.oec-settled):nth-child(6){transition-delay:275ms!important}
.reveal.in:not(.oec-settled):nth-child(7){transition-delay:330ms!important}
.reveal.in:not(.oec-settled):nth-child(8){transition-delay:385ms!important}
.reveal.in:not(.oec-settled):nth-child(n+9){transition-delay:440ms!important}

/* ===== 3. Page-to-page transitions (View Transitions API) ===== */
@view-transition{navigation:auto}
.header{view-transition-name:oec-header}
.results-ticker{view-transition-name:oec-ticker}
::view-transition-old(root){animation:oecVtOut 220ms var(--oec-ease) both}
::view-transition-new(root){animation:oecVtIn 420ms var(--oec-ease) both}
::view-transition-group(oec-header),::view-transition-group(oec-ticker){animation-duration:0s}
@keyframes oecVtOut{to{opacity:0;transform:translateY(-6px)}}
@keyframes oecVtIn{from{opacity:0;transform:translateY(10px)}}

/* ===== 4. Score count-ups: winner flash ===== */
.oec-win-flash{animation:oecWinFlash 1.1s var(--oec-ease) both}
@keyframes oecWinFlash{0%{color:#fff;text-shadow:0 0 0 rgba(137,66,255,0)}30%{color:#c9a8ff;text-shadow:0 0 18px rgba(137,66,255,.9)}100%{text-shadow:0 0 0 rgba(137,66,255,0)}}
.oecp-team.oec-win-flash{animation:oecRowFlash 1.1s var(--oec-ease) both}
@keyframes oecRowFlash{30%{background:rgba(137,66,255,.28)}}

/* ===== 5. Stinger wipe ===== */
.oec-stinger-host{position:relative}
.oec-stinger{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:6}
.oec-stinger:before,.oec-stinger:after{
  content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:38%;
  transform:translateX(-140%) skewX(-24deg);
  background:linear-gradient(90deg,transparent,rgba(137,66,255,.55) 35%,rgba(246,242,252,.35) 50%,rgba(96,53,196,.55) 65%,transparent);
  animation:oecStinger 520ms var(--oec-ease) forwards;
}
.oec-stinger:after{width:9%;background:rgba(246,242,252,.5);animation-delay:70ms}
@keyframes oecStinger{to{transform:translateX(340%) skewX(-24deg)}}

/* ===== 6. LIVE treatment (red is reserved for live) ===== */
.match.oec-is-live,.oecp-match.is-live{animation:oecLivePulse 2.4s ease-in-out infinite;border-color:rgba(255,59,92,.75)!important}
@keyframes oecLivePulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,92,.0),0 0 0 1px rgba(255,59,92,.35)}50%{box-shadow:0 0 22px 0 rgba(255,59,92,.28),0 0 0 1px rgba(255,59,92,.7)}}
.match.oec-is-live .match-status{color:var(--oec-live)!important}
.match.oec-is-live .match-status:before,.oec-live-dot{
  content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;vertical-align:1px;
  background:var(--oec-live);box-shadow:0 0 0 0 rgba(255,59,92,.7);animation:oecLiveDot 1.6s ease-out infinite;
}
@keyframes oecLiveDot{70%{box-shadow:0 0 0 7px rgba(255,59,92,0)}100%{box-shadow:0 0 0 0 rgba(255,59,92,0)}}
.results-ticker.oec-has-live .results-ticker-label{background:linear-gradient(135deg,#ff3b5c,#b3123a)!important}
.results-ticker.oec-has-live .results-ticker-label:after{border-left-color:#b3123a!important}
.results-ticker-item.is-live .results-week{color:var(--oec-live)!important}

/* ===== 7. Team colors ===== */
.match[style*="--team-a"]{box-shadow:inset 3px 0 0 var(--team-a),inset -3px 0 0 var(--team-b,var(--team-a))}
.team-card[style*="--team-a"]{box-shadow:inset 3px 0 0 var(--team-a)}
.oecp-team[style*="--team-a"]{box-shadow:inset 3px 0 0 var(--team-a)}
.teamcell[style*="--team-a"]{box-shadow:inset 3px 0 0 var(--team-a);padding-left:9px}

/* ===== 8. Bracket path tracing ===== */
.oecp-rounds .oecp-trace{fill:none;stroke:var(--oec-violet,#8942ff);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(137,66,255,.8));stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--len,2000);animation:oecTrace .7s var(--oec-ease) forwards}
@keyframes oecTrace{to{stroke-dashoffset:0}}
.oecp.is-tracing .oecp-match{opacity:.35;transition:opacity var(--oec-mid) var(--oec-ease)}
.oecp.is-tracing .oecp-match.on-path{opacity:1}
.oecp.is-tracing .oecp-team.on-path{background:rgba(137,66,255,.18)}
.oecp .oecp-match{transition:opacity var(--oec-mid) var(--oec-ease),transform .35s var(--oec-ease)}
.oecp .oecp-team[data-team]{cursor:pointer}

/* ===== 9. Film grain (replaces scan lines) ===== */
.fx-scan{display:none!important}
.oec-grain{
  position:fixed;inset:-50%;z-index:9990;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:oecGrain .9s steps(6) infinite;will-change:transform;
}
@keyframes oecGrain{
  0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-4%,3%,0)}40%{transform:translate3d(3%,-5%,0)}
  60%{transform:translate3d(-6%,-2%,0)}80%{transform:translate3d(5%,4%,0)}100%{transform:translate3d(0,0,0)}
}
@media(max-width:780px){.oec-grain{animation:none;opacity:.035}}

/* ===== 10. Cursor-following border light on cards ===== */
.oec-glow{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;
  padding:1px;transition:opacity var(--oec-mid) var(--oec-ease);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(220,200,255,.95),rgba(137,66,255,.55) 35%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.oec-glow-host:hover>.oec-glow{opacity:1}
.oec-glow-host{position:relative}

/* ===== 11. Hero parallax (values set by oec-polish.js) ===== */
.fx3d-floor,.fx3d-orbit--back .fx3d-emblem,.hero-logo>img{translate:0 var(--oec-par,0px)}
.fx3d-floor{translate:0 calc(var(--oec-par-far,0px))}

/* ===== 12. Metallic sheen ===== */
.oec-sheen{
  position:absolute;left:50%;top:50%;width:min(410px,88vw);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:3;overflow:hidden;
  translate:0 var(--oec-par,0px);
}
.oec-sheen:before{
  content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:28%;
  background:linear-gradient(90deg,transparent,rgba(246,242,252,.0) 20%,rgba(246,242,252,.32) 50%,rgba(246,242,252,0) 80%,transparent);
  transform:translateX(-160%) skewX(-20deg);mix-blend-mode:screen;
  animation:oecSheen 9s var(--oec-ease) 1.5s infinite;
}
@keyframes oecSheen{0%{transform:translateX(-160%) skewX(-20deg)}16%,100%{transform:translateX(460%) skewX(-20deg)}}
.page-title{
  background:linear-gradient(100deg,#f7f5f9 0%,#f7f5f9 42%,#ffffff 48%,#c9b6f2 50%,#ffffff 52%,#f7f5f9 58%,#f7f5f9 100%);
  background-size:300% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
  animation:oecTitleSheen 10s var(--oec-ease) 1s infinite;
}
@keyframes oecTitleSheen{0%{background-position:100% 0}14%,100%{background-position:0 0}}

/* ===== 13. Readable type ===== */
.topline{font-size:10px!important}
.brand-copy span{font-size:9px!important}
nav a{font-size:11px!important}
.eyebrow{font-size:11px!important}
.btn{font-size:11px!important}
.page-intro p,.hero p{font-size:15px!important}
.card p,.feature p,.rule-card p{font-size:13px!important;line-height:1.65!important}
.stats small,.sponsor small,.team-card small,.seed small,.stream-footer span,.media-body span,.queue-main span,.editor-head small,.roster-role,.reg-status small{font-size:10px!important}
.team-card .record,.side,.media-body p,.roster-list li,.form-section>p,.agree,.msg,.empty,.admin-top p{font-size:12px!important}
.table-top,th,.tab,.weekbtn,.match-top,.round-title,.live,.champion-season,.form-footer p,.toggle,.seed{font-size:10px!important}
td{font-size:12px}
.tiny-link,.pill,.field label,.smallbtn,footer p,footer a{font-size:10px!important;letter-spacing:.9px}
.field input,.field textarea,.field select{font-size:13px!important}
.notice,.admin-card summary,.editor-head strong,.queue-main strong{font-size:12px!important}
.score{font-size:20px}
.results-ticker-label{font-size:9px!important;letter-spacing:1.4px!important}
.results-week{font-size:9px!important}
.results-team{font-size:10px!important}
.results-score{font-size:12px!important}
.oec-intro-note,.admin-shell .oecp-intro{font-size:11px!important}
@media(max-width:780px){
  .page-intro p,.hero p{font-size:14px!important}
  .results-ticker-label{font-size:8px!important}.results-week{font-size:8px!important}.results-team{font-size:9px!important}
}

/* ===== 14. Loading placeholders ===== */
.match-grid:empty,.team-grid:empty,.media-grid:empty,.rule-grid:empty,.champion-grid:empty,.grid-4:empty,#oec-playoffs:empty{
  min-height:220px;border-radius:2px;
  background:
    linear-gradient(100deg,transparent 30%,rgba(246,242,252,.05) 50%,transparent 70%) 0 0/200% 100%,
    repeating-linear-gradient(180deg,rgba(55,30,124,.22) 0 96px,transparent 96px 112px);
  animation:oecShimmer 1.4s linear infinite;
}
.team-grid:empty,.media-grid:empty,.champion-grid:empty,.grid-4:empty{
  background:
    linear-gradient(100deg,transparent 30%,rgba(246,242,252,.05) 50%,transparent 70%) 0 0/200% 100%,
    repeating-linear-gradient(90deg,rgba(55,30,124,.22) 0 calc(25% - 10px),transparent calc(25% - 10px) 25%);
}
tbody#standBody:empty:after{content:"";display:table-row;height:240px;background:linear-gradient(100deg,rgba(55,30,124,.15) 30%,rgba(246,242,252,.05) 50%,rgba(55,30,124,.15) 70%) 0 0/200% 100%;animation:oecShimmer 1.4s linear infinite}
.oecp-empty:only-child{min-height:220px;display:grid;place-items:center;background:linear-gradient(100deg,transparent 30%,rgba(246,242,252,.04) 50%,transparent 70%) 0 0/200% 100%,rgba(55,30,124,.14);animation:oecShimmer 1.4s linear infinite}
@keyframes oecShimmer{from{background-position:200% 0,0 0}to{background-position:-200% 0,0 0}}

/* ===== 15. Tactile buttons and focus ===== */
.btn,.smallbtn,.oecp-btn,.tab,.weekbtn,.nav-cta,.oecLiveTab{transition-property:transform,background,border-color,color,box-shadow,filter!important}
.btn:active,.smallbtn:active,.oecp-btn:active,.tab:active,.weekbtn:active,.nav-cta:active,.oecLiveTab:active{transform:scale(.97);transition-duration:80ms!important}
.btn:not(:active),.smallbtn:not(:active),.oecp-btn:not(:active),.tab:not(:active),.weekbtn:not(:active),.nav-cta:not(:active){transition-timing-function:var(--oec-ease-spring)!important}
:focus-visible{outline:2px solid #a77bff!important;outline-offset:3px}

/* ===== 16. Scrollbar and selection ===== */
html{scrollbar-color:#6035c4 #08061a;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#08061a}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#8942ff,#371e7c);border-radius:10px;border:2px solid #08061a}
::-webkit-scrollbar-thumb:hover{background:#8942ff}
::selection{background:rgba(137,66,255,.55);color:#fff}

@media(prefers-reduced-motion:reduce){
  .oec-grain,.oec-sheen:before,.page-title,.match.oec-is-live,.oecp-match.is-live,.oec-stinger,.oec-win-flash{animation:none!important}
  .oec-stinger{display:none}
  .reveal.in:not(.oec-settled){transition-delay:0s!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
html .fx3d-tilting{transition-duration:120ms!important;transition-timing-function:ease-out!important}


/* Mobile motion parity: retain the original OEC effects without heavy blur layers.
   Respect the visitor's OS reduced-motion preference. */
@media (max-width:780px) and (prefers-reduced-motion:no-preference){
  body .ambient:before{
    display:block!important;
    opacity:.025;
    animation:grid 50s linear infinite!important;
  }
  body .ambient:after{display:none!important}
  body .elite-title{
    animation:pulse 7s ease-in-out infinite!important;
  }
  body .hero-logo>img{
    animation:float 8s ease-in-out infinite!important;
  }
  body .hero-logo:before{filter:none!important}
  .fx3d-floor-plane{animation-duration:10s}
  .fx3d-ring--l .fx3d-ring-spin{animation-duration:18s}
  .fx3d-ring--r .fx3d-ring-spin{animation-duration:18s}
  .fx3d-emblem-spin{animation-duration:13s}
}
/* Do not keep background compositor work running in a hidden browser tab. */
html.oec-motion-paused .ambient *,
html.oec-motion-paused .hero-logo *,
html.oec-motion-paused .fx3d-brand-cube *,
html.oec-motion-paused .oec-grain{
  animation-play-state:paused!important;
}