/* Autonomous 24-second broadcast loop. Four six-second acts; no pointer input. */
@property --foil-phase{syntax:'<percentage>';inherits:true;initial-value:0%}
:root{--liquid-metal:linear-gradient(128deg,#e3e9ef 0%,#c7c1de 10%,#7f86b1 18%,#d9f0f0 27%,#f7f5f2 35%,#c0adde 42%,#6f709c 48%,#d8d6ee 55%,#e9ffff 63%,#b5b8ce 71%,#e9d5f5 79%,#8288ae 87%,#e2e9ef 100%);animation:globalFoil 14s ease-in-out infinite alternate}
@keyframes globalFoil{to{--foil-phase:100%}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-film{position:relative;isolation:isolate;overflow:hidden;height:clamp(290px,32vw,510px);margin-top:29px;border:1px solid #beabd329;background:#0b0912;container-type:inline-size}
.film-scene{position:absolute;inset:0;overflow:hidden;visibility:hidden;opacity:0;background:#0b0912;color:#e6dcf3}
.scene-identity{visibility:visible;opacity:1}
.motion-active .film-scene{animation:sceneCut 24s linear var(--scene-delay) infinite both}
.film-meta,.film-bottom{position:absolute;left:25px;right:25px;display:flex;justify-content:space-between;gap:20px;z-index:4;font:700 8px/1.5 var(--body);letter-spacing:1.7px}
.film-meta{top:20px}.film-bottom{bottom:28px}
.film-headline{position:absolute;left:0;top:50%;width:100%;transform:translateY(-50%) skewX(-6deg);text-align:center;font:400 28cqw/.95 var(--display);letter-spacing:-.025em;z-index:2;white-space:nowrap}
.film-echo{position:absolute;left:1%;top:52%;width:100%;transform:translateY(-50%) skewX(-6deg);font:400 28cqw/.95 var(--display);letter-spacing:-.025em;text-align:center;color:transparent;-webkit-text-stroke:1px #b4a1d878}
.liquid-lettering,.stats strong,.foil-text .kinetic-word,.final-title,.finale h3{background-image:var(--liquid-metal);background-size:260% 210%;background-position:var(--foil-phase) 50%;background-clip:text;-webkit-background-clip:text;color:transparent}
.motion-active .film-headline{animation:filmType 24s cubic-bezier(.16,1,.25,1) var(--scene-delay) infinite both}
.motion-active .film-echo{animation:filmEcho 24s ease-out var(--scene-delay) infinite both}
.film-slash{position:absolute;width:1px;height:180%;top:-40%;background:linear-gradient(transparent,#e1caff70,transparent);transform:rotate(29deg);left:24%;z-index:0}
.slash-two{left:78%}
.scene-identity:after,.scene-finale:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 4px,#bba3ee14 5px);opacity:.35;pointer-events:none}
.scene-silver{color:#15101e;background:#c7c4dc}
.film-metal{position:absolute;inset:-40%;background:radial-gradient(ellipse at 30% 50%,#fff8,transparent 42%),var(--liquid-metal);background-size:120% 180%,210% 200%;background-position:var(--foil-phase) 30%,var(--foil-phase) 60%;transform:rotate(-12deg)}
.motion-active .film-metal{animation:metalFold 7s ease-in-out infinite alternate}
.film-metal:after{content:'';position:absolute;inset:-25%;background:radial-gradient(ellipse at 0% 40%,transparent 35%,#f8f9ff88 43%,#b3adca55 46%,transparent 52%),radial-gradient(ellipse at 100% 65%,transparent 35%,#f5efff88 45%,transparent 54%);filter:blur(8px);transform:rotate(-15deg);animation:metalFold 9s ease-in-out infinite alternate-reverse}
.scene-silver .film-headline{font-size:19cqw}
.film-repeat{position:absolute;left:-10%;width:120%;top:50%;text-align:center;font:400 19cqw/1 var(--display);letter-spacing:-.02em;color:transparent;-webkit-text-stroke:1px #1b132858;transform:translateY(-130%) skewX(-6deg)}
.repeat-bottom{transform:translateY(30%) skewX(-6deg)}
.film-ribbon{position:absolute;top:53%;left:-5%;width:110%;display:flex;justify-content:space-around;align-items:center;gap:20px;padding:13px 8%;background:#0b0813;color:#e2d5ee;border-block:1px solid #cfc0e1;font:700 10px var(--body);letter-spacing:4px;transform:rotate(-3deg);z-index:3}
.motion-active .film-ribbon{animation:filmRibbon 24s cubic-bezier(.16,1,.25,1) var(--scene-delay) infinite both}
.scene-red{background:#ff263b;color:#130a12}
.scene-red:before{content:'';position:absolute;inset:0;background:radial-gradient(#34081688 .65px,transparent .9px);background-size:6px 6px;mask-image:linear-gradient(90deg,#000,transparent 70%);opacity:.3}
.film-sigil{position:absolute;width:45%;height:115%;right:-2%;top:-8%;color:#18091d;opacity:.9;transform:rotate(-12deg)}
.red-type{position:absolute;inset:13% 5% 12%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;z-index:2}
.red-type .film-headline{position:relative;left:auto;top:auto;width:auto;transform:skewX(-5deg);font-size:14cqw;line-height:.96;text-align:left}
.red-type .film-headline:last-child{color:#f9dce7;text-shadow:4px 4px 0 #170b1d;font-size:16cqw}
.motion-active .red-type .film-headline{animation:filmRedType 24s cubic-bezier(.16,1,.25,1) var(--scene-delay) infinite both}
.red-side{position:absolute;right:4%;top:43%;font:700 10px/1.6 var(--body);letter-spacing:2px;color:#ffd7e5;z-index:3;text-align:right}
.scene-finale{background:#201039}
.scene-finale .film-headline{font-size:19cqw;top:45%}
.scene-finale .film-echo{font-size:42cqw;opacity:.25;letter-spacing:.03em}
.scene-finale .film-ribbon{top:66%;background:var(--liquid-metal);background-size:220% 200%;background-position:var(--foil-phase) 50%;color:#17101e;transform:rotate(0deg)}
.finale-grid{position:absolute;inset:0;background:linear-gradient(135deg,transparent 49.8%,#b894f52b 50%,transparent 50.2%),linear-gradient(45deg,transparent 49.8%,#b894f52b 50%,transparent 50.2%);background-size:160px 160px}
.film-timeline{position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;height:3px;z-index:6}
.film-timeline>span{background:#9993a64d;overflow:hidden}.film-timeline i{display:block;width:100%;height:100%;background:#f1dfff;transform:scaleX(0);transform-origin:left}
.motion-active .film-timeline i{animation:filmProgress 24s linear infinite}.film-timeline>span:nth-child(2) i{animation-delay:-18s}.film-timeline>span:nth-child(3) i{animation-delay:-12s}.film-timeline>span:nth-child(4) i{animation-delay:-6s}
@keyframes sceneCut{0%{opacity:1;visibility:visible;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}23%{opacity:1;visibility:visible;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}24.9%{opacity:1;visibility:visible;clip-path:polygon(105% 0,100% 0,100% 100%,100% 100%)}25%,100%{opacity:0;visibility:hidden;clip-path:polygon(0 0,0 0,0 100%,0 100%)}}
@keyframes filmType{0%{transform:translate(-7%,-50%) skewX(-14deg);clip-path:inset(42% 0 42%)}2.5%{transform:translate(1%,-50%) skewX(-6deg);clip-path:inset(0)}4%,20%{transform:translate(0,-50%) skewX(-6deg);clip-path:inset(0)}24%,100%{transform:translate(4%,-50%) skewX(-6deg);clip-path:inset(0)}}
@keyframes filmRedType{0%{transform:translateX(-25%) skewX(-9deg);clip-path:inset(0 100% 0 0)}3%,20%{transform:translateX(0) skewX(-5deg);clip-path:inset(0)}24%,100%{transform:translateX(5%) skewX(-5deg);clip-path:inset(0)}}
@keyframes filmEcho{0%{translate:8% 0}5%{translate:0 0}23%,100%{translate:-2% 0}}
@keyframes filmRibbon{0%,2%{translate:110% 0}5%,20%{translate:0 0}24%,100%{translate:-110% 0}}
@keyframes filmProgress{0%{transform:scaleX(0)}24.9%{transform:scaleX(1)}25%,100%{transform:scaleX(0)}}
@keyframes metalFold{from{transform:translateX(-5%) rotate(-12deg) scale(1)}to{transform:translateX(6%) rotate(4deg) scale(1.15)}}
/* Foil is a moving material across the identity, including resting buttons. */
.button,.ticket-preview,.ticker,.motion-poster{background-image:var(--liquid-metal);background-size:260% 200%;background-position:var(--foil-phase) 50%}
.button{animation:none}.button:hover{background-image:var(--color-foil)}
.motion-active .ticket-preview.visible{animation:ticketFeed 900ms cubic-bezier(.16,1,.25,1) both}
.motion-active .reveal.visible .foil-text{animation:none}
.motion-poster:before{background:linear-gradient(115deg,transparent 20%,#fff9 29%,transparent 36%,#55507033 48%,transparent 60%,#f0e7ff99 72%,transparent 79%)}
.hero-art,.summit-sculpture{animation:none!important;translate:none!important;rotate:none!important;transition:none!important}
.summit-sculpture{transform:rotate(-9deg)!important}
.motion-active .team-card:hover svg{animation:none}
.hero-grid{background:linear-gradient(120deg,transparent 35%,#ae94d618 35.05%,transparent 35.15%),linear-gradient(120deg,transparent 75%,#ae94d618 75.05%,transparent 75.15%)}
/* The bracket uses a shared 600px match canvas so every route meets its slot. */
.showdown{background:radial-gradient(ellipse at 100% 35%,#4b286b24,transparent 55%),#0d0a13}
.bracket-broadcast{display:flex;align-items:center;justify-content:space-between;gap:20px;border-block:1px solid #b698d138;padding:16px 0;margin-bottom:25px;font:600 8px var(--body);letter-spacing:1.4px;color:#a798ba}
.bracket-broadcast>div{font:24px var(--display);letter-spacing:1px;color:#d6c8e9}.bracket-broadcast b{font:14px var(--body);margin:0 18px;color:#7d698f}.bracket-broadcast strong{font-weight:400;color:#e5f4f8}
.bracket{grid-template-columns:1fr 42px .94fr 42px 1.18fr;gap:0;align-items:start}
.act{min-width:0}.act-heading{height:88px;margin:0;padding:18px 0;gap:10px}.act-heading h3{font-size:clamp(19px,2.1vw,31px)}.act-heading .eyebrow{font-size:7px}.act-number{font-size:40px}.round-arrow{font-size:20px}
#quarterfinal-matches{height:600px;display:grid;grid-template-rows:repeat(4,132px);gap:24px}
.quarterfinals .match{margin:0;height:132px;padding:12px 15px;position:relative;background:linear-gradient(120deg,#261c32,#100c17);border:1px solid #bb98db42;box-shadow:inset 3px 0 #baa1d920}
.quarterfinals .match:before{content:'';position:absolute;right:-1px;top:50%;width:5px;height:5px;background:#c7a7e5;translate:50% -50%;z-index:2}
.match-meta{font-size:7px;letter-spacing:.7px;margin-bottom:7px;padding-bottom:8px;color:#b5a0c7}.match-meta>span:last-child{color:#e0d3ec}
.team-line{gap:11px;padding:5px 0}.team-line svg{width:28px;height:28px;flex-shrink:0}.team-line>span:not(.seed){font-size:16px;letter-spacing:.6px}.team-line .seed{font-size:9px;color:#a397af}
.team-line+.team-line{border-top:1px solid #c9b2e01a}
.bracket-connector{padding-top:88px;height:688px}.bracket-connector svg{display:block;width:100%;height:600px;overflow:visible}.route-base,.route-flow{fill:none;stroke:#81609188;stroke-width:1}.route-flow{stroke:#d3b6f5;stroke-dasharray:6 170;animation:routePulse 7s linear infinite}.bracket-connector circle{fill:#d4b5f3}.final-connector .route-base{stroke:#b8a1cb88}.final-connector .route-flow{stroke:#e5e5ff;animation-delay:-3s}
.semifinal-matches{height:600px;min-height:600px;display:grid;grid-template-rows:1fr 1fr;gap:0;align-items:center;justify-content:normal}
.future-match{height:208px;margin:0;padding:16px;background:linear-gradient(125deg,#31203e,#1a1222 75%);border:1px solid #c2a0e16b;position:relative}
.future-match:before,.future-match:after{content:'';position:absolute;top:50%;width:5px;height:5px;background:#d0b3f0;translate:0 -50%}.future-match:before{left:-3px}.future-match:after{right:-3px}
.placeholder-team{display:flex;align-items:center;padding:8px 0;font-size:18px;letter-spacing:.7px}.placeholder-team>span{flex-shrink:0;width:36px;height:36px;margin-right:11px;font:22px var(--display);color:#c5a9e0;background:#bda0e00b}.placeholder-team small{display:block;font:6px var(--body);letter-spacing:1.8px;margin-top:5px;color:#84708f}.versus{font-size:10px;margin:2px 0 2px 48px;color:#b192c9}
.finale .act-heading{border-color:#e4d2f3}.finale .act-number{background:var(--liquid-metal);background-size:240% 200%;background-position:var(--foil-phase) 50%;color:transparent;background-clip:text}
.final-card{height:600px;min-height:600px;padding:21px 23px 18px;border:1px solid #c1a3e5;background:radial-gradient(ellipse at 50% 25%,#7552994f,transparent 57%),linear-gradient(150deg,#2d1d40,#140e20 64%);box-shadow:0 0 60px #9a6fd412,inset 0 0 45px #a582d00c;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.final-card:before{opacity:.13;mask-image:linear-gradient(#000,transparent)}.final-top{font-size:7px;letter-spacing:.9px;color:#d5c2ea}.champion-art{position:relative;width:100%;height:203px;display:grid;place-items:center;flex-shrink:0;margin-bottom:9px}.champion-art>span{position:absolute;font:205px/1 var(--display);color:transparent;-webkit-text-stroke:1px #c6a0e831;letter-spacing:-10px;top:0}.champion-art .final-symbol{width:105px;height:105px;z-index:1;margin:0;color:#e2d8ee;filter:drop-shadow(0 8px 20px #b99ad855)}.champion-orbit{position:absolute;width:190px;height:65px;border:1px solid #c0a0df4f;border-radius:50%;transform:rotate(-25deg)}
.final-card>.eyebrow{font-size:6px;letter-spacing:1.1px}.final-title{font-size:clamp(31px,3.1vw,48px);margin-top:12px;line-height:1.07;text-align:center}.final-pair{width:100%;gap:10px;justify-content:space-between;margin:24px 0 19px}.final-pair>div{flex:1;text-align:center;border:1px solid #c7a7e33a;padding:12px 5px;background:#120a1c55}.final-pair>div>span{display:block;font:6px var(--body);letter-spacing:1px;color:#bba2d0;margin-bottom:7px}.final-pair strong{font:24px/.95 'Barlow Condensed',sans-serif;letter-spacing:1px;color:#ece2f6}.final-pair b{font-size:16px;color:#ceb2e8}.champion-stakes{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 0;border-top:1px solid #c0a5dd3a;border-bottom:1px solid #c0a5dd3a;font:7px var(--body);letter-spacing:1px;color:#bdabce}.champion-stakes>span:last-child{font:24px var(--display);color:#e1d1f0}.champion-stakes small{font:6px var(--body);letter-spacing:.6px}.final-bottom{padding-top:14px;font-size:6px;letter-spacing:.8px}.stage-caption{padding-top:15px;margin-top:19px;font-size:7px;line-height:1.6}
@keyframes routePulse{to{stroke-dashoffset:-352}}
.hero:not(.in-view) .film-scene,.hero:not(.in-view) .film-scene *,.hero:not(.in-view) .film-timeline i{animation-play-state:paused}
.motion-paused,.tab-inactive{animation-play-state:paused!important}
.motion-paused .film-scene{animation:none!important;opacity:0;visibility:hidden}.motion-paused .scene-identity{opacity:1;visibility:visible;clip-path:none}.motion-paused .film-headline{animation:none!important}.motion-paused .film-timeline{display:none}
@media(min-width:1600px){.hero-film{height:510px}}
@media(max-width:1100px){.bracket{grid-template-columns:1fr 25px .95fr 25px 1.1fr}.act-number{font-size:30px}.act-heading{gap:7px}.act-heading h3{font-size:22px}.act-heading .round-arrow{display:none}.team-line>span:not(.seed){font-size:13px}.team-line{gap:7px}.quarterfinals .match{padding-inline:10px}.future-match{padding-inline:10px}.placeholder-team{font-size:16px}.final-card{padding-inline:13px}.final-title{font-size:35px}.final-top{font-size:6px}.bracket-broadcast{font-size:7px}.final-pair strong{font-size:22px}}
@media(max-width:760px){.hero-film{height:290px;margin-top:24px;margin-inline:-1px}.film-meta,.film-bottom{left:14px;right:14px;font-size:6px;letter-spacing:.9px;gap:10px}.film-meta{top:15px}.film-meta>span:last-child{max-width:90px;text-align:right}.film-bottom{bottom:20px;align-items:end}.film-bottom>span{max-width:160px}.film-bottom>span:last-child{text-align:right}.film-headline,.film-echo{font-size:29cqw}.scene-silver .film-headline,.film-repeat{font-size:20cqw}.film-ribbon{padding:10px 8%;font-size:7px;letter-spacing:1.5px;gap:10px;top:55%}.film-ribbon>span:nth-child(2){font-size:13px}.film-repeat{transform:translateY(-145%) skewX(-6deg)}.repeat-bottom{transform:translateY(50%) skewX(-6deg)}.red-type{inset:20% 5%}.red-type .film-headline{font-size:22cqw}.red-type .film-headline:last-child{font-size:21cqw;text-shadow:2px 2px 0 #170b1d}.film-sigil{width:62%;right:-12%;height:90%;top:4%;opacity:.4}.red-side{font-size:6px;top:35%;right:5%;letter-spacing:1px}.scene-finale .film-headline{font-size:20cqw}.scene-finale .film-ribbon{top:62%;letter-spacing:.8px}.scene-finale .film-echo{font-size:65cqw}.bracket-broadcast{flex-wrap:wrap;gap:14px;justify-content:space-between}.bracket-broadcast>span:last-child{display:none}.bracket-broadcast>div{font-size:21px}.bracket-broadcast b{margin:0 8px}.bracket{grid-template-columns:1fr;gap:0}.bracket-connector{height:55px;padding:0;position:relative}.bracket-connector svg{display:none}.bracket-connector:before{content:'';position:absolute;height:100%;width:1px;left:50%;background:linear-gradient(#b898d070,#ddd1f1)}.bracket-connector:after{content:'↓';position:absolute;bottom:0;left:50%;translate:-50% 0;background:#0d0a13;color:#ceb7ea;font-size:18px}.act-heading{height:83px;gap:15px}.act-number{font-size:42px}.act-heading h3{font-size:31px}.act-heading .round-arrow{display:block;margin-left:auto}.act-heading .eyebrow{font-size:8px}#quarterfinal-matches{height:auto;grid-template-rows:repeat(4,132px);gap:14px}.quarterfinals .match{padding-inline:17px}.team-line>span:not(.seed){font-size:18px}.team-line{gap:12px}.bracket .stage-caption{font-size:8px}.semifinal-matches{height:auto;min-height:0;gap:15px}.future-match{padding-inline:18px;height:208px}.placeholder-team{font-size:22px}.placeholder-team small{font-size:7px}.final-card{height:630px;min-height:630px;padding:24px}.final-title{font-size:49px}.final-top{font-size:7px}.champion-art{height:208px}.final-pair strong{font-size:27px}.final-pair>div{padding:13px 5px}.champion-stakes{margin-top:5px}.champion-stakes>span:last-child{font-size:28px}.final-bottom{font-size:7px}.stage-caption{margin-top:17px}}
@media(prefers-reduced-motion:reduce){:root{animation:none}.film-scene{animation:none!important;opacity:0;visibility:hidden}.scene-identity{opacity:1;visibility:visible;clip-path:none}.film-headline{animation:none!important}.film-timeline{display:none}}
@media(max-width:760px){.final-card{height:auto;min-height:630px}.final-title{font-size:clamp(34px,11vw,49px)}}