/* ============================================================
   World Cup 2026 homepage takeover — SCOPED, self-contained.
   To revert: remove the _WorldCupHero partial include from
   Views/Home/Index.cshtml (and restore the hero <video> tag).
   Added 2026-06-17.
   ============================================================ */
:root{
  --wcx-red:#E0392F;--wcx-green:#0A9C57;--wcx-blue:#1E63D6;
  --wcx-gold:#A97708;--wcx-gold-h:#936807;--wcx-gold-l:#d4b86a;
  --wcx-ball:url('/Content/images/worldcup/trionda-ball-800.webp');
}

/* ---- persistent slim banner (stays after takeover) ---- */
.wcx-strip{position:relative;z-index:40;background:linear-gradient(90deg,#1b161b,#2c252c 50%,#1b161b);
  color:#f1e9db;border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--wcx-red),var(--wcx-green),var(--wcx-blue)) 1}
.wcx-strip-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:15px;padding:9px 22px}
.wcx-ball-mini{position:relative;width:34px;height:34px;flex:0 0 34px}
.wcx-ball-mini img{width:34px;height:34px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.wcx-ball-mini::before{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px dashed rgba(212,184,106,.55);animation:wcx-spin 14s linear infinite}
.wcx-strip-link{display:flex;align-items:center;gap:15px;flex:1;min-width:0;text-decoration:none;color:inherit;cursor:pointer}
.wcx-strip-link:hover b{color:var(--wcx-gold-l)}
.wcx-strip p{margin:0;font-size:13px;line-height:1.4;font-family:'Montserrat',sans-serif}
.wcx-strip b{color:#fff}
.wcx-strip-cta{color:var(--wcx-gold-l);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:1px;
  text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  border:1px solid rgba(212,184,106,.4);padding:7px 15px;border-radius:30px;transition:all .2s;font-family:'Montserrat',sans-serif}
.wcx-strip-cta:hover{background:var(--wcx-gold);border-color:var(--wcx-gold);color:#fff}
.wcx-strip-cta i{transition:transform .2s}.wcx-strip-cta:hover i{transform:translateX(3px)}
.wcx-strip-x{background:none;border:none;color:rgba(255,255,255,.45);font-size:18px;cursor:pointer;padding:4px 6px;line-height:1}
.wcx-strip-x:hover{color:#fff}
@media(max-width:680px){.wcx-strip .wcx-long{display:none}}

/* ---- persistent floating pill (fixed, zero layout impact) ---- */
.wcx-pill{position:fixed;left:18px;bottom:96px;z-index:500;display:flex;align-items:center;gap:11px;
  background:linear-gradient(90deg,#1b161b,#2c252c);color:#f1e9db;text-decoration:none;
  padding:9px 16px 9px 10px;border-radius:40px;border:1px solid rgba(212,184,106,.35);
  box-shadow:0 8px 26px rgba(0,0,0,.4);font-family:'Montserrat',sans-serif;
  transition:border-color .25s,box-shadow .25s,transform .25s;animation:wcx-pill-fade .6s ease both}
@keyframes wcx-pill-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.wcx-pill:hover{border-color:var(--wcx-gold-l);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.5)}
.wcx-pill-ball{position:relative;width:36px;height:36px;flex:0 0 36px}
.wcx-pill-ball img{width:36px;height:36px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))}
.wcx-pill-ball::before{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px dashed rgba(212,184,106,.5);animation:wcx-spin 14s linear infinite}
.wcx-pill-txt{display:flex;flex-direction:column;font-size:13px;font-weight:700;line-height:1.15;color:#fff}
.wcx-pill-txt small{font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--wcx-gold-l)}
.wcx-pill>i{color:var(--wcx-gold-l);font-size:12px;transition:transform .2s}
.wcx-pill:hover>i{transform:translateX(3px)}
@media(max-width:600px){.wcx-pill-txt small{display:none}.wcx-pill{left:12px;bottom:104px;padding:8px 14px 8px 9px}}

/* ---- full-viewport takeover overlay ---- */
.wcx-takeover{position:fixed;inset:0;z-index:9998;overflow:hidden;display:none;
  transition:transform .9s cubic-bezier(.76,0,.24,1),opacity .9s ease}
html.wcx-show .wcx-takeover{display:block;
  animation:wcx-failsafe .6s linear 35s forwards}      /* failsafe: auto-hide if JS never dismisses */
.wcx-takeover.wcx-hide{transform:translateY(-100%);opacity:0;pointer-events:none}
.wcx-wc{position:relative;height:100%;display:flex;align-items:center;
  /* translucent scrim so the real site shows through behind the takeover */
  background:radial-gradient(110% 130% at 78% 28%,rgba(58,47,58,.60),rgba(28,23,28,.82) 55%,rgba(16,12,16,.90));
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.wcx-wc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--wcx-red),var(--wcx-green),var(--wcx-blue));z-index:3}
/* solid cover that hides the site's load-settle, then fades to reveal the glassy show-through */
.wcx-wc::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(95% 130% at 78% 28%,#3a2f3a,#241e24 48%,#141014);
  transition:opacity 1.1s ease}
.wcx-wc.wcx-glass::after{opacity:0}
.wcx-wc-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:30px;width:100%;
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:34px}
.wcx-copy{animation:wcx-rise .8s ease both}
.wcx-ey{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.wcx-ey span{color:var(--wcx-gold-l);font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;font-family:'Montserrat',sans-serif}
.wcx-tri{display:inline-flex;height:3px;width:62px;border-radius:3px;overflow:hidden}
.wcx-tri i{flex:1}
.wcx-tri i:nth-child(1){background:var(--wcx-red)}
.wcx-tri i:nth-child(2){background:var(--wcx-green)}
.wcx-tri i:nth-child(3){background:var(--wcx-blue)}
.wcx-copy h2{font-family:'Playfair Display',Georgia,serif;font-weight:700;color:#fff;font-size:48px;line-height:1.05;margin:0}
.wcx-copy h2 em{font-style:italic;color:var(--wcx-gold-l)}
.wcx-rule{margin:22px 0;width:120px;height:2px;background:linear-gradient(90deg,var(--wcx-red),var(--wcx-green),var(--wcx-blue))}
.wcx-copy p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.7;margin:0 0 14px;max-width:520px;font-family:'Montserrat',sans-serif}
.wcx-loc{display:flex;align-items:center;gap:9px;color:var(--wcx-gold-l);font-size:13px;font-weight:600;margin-bottom:26px;font-family:'Montserrat',sans-serif}
.wcx-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wcx-btn{display:inline-flex;align-items:center;gap:11px;background:var(--wcx-gold);color:#fff;border:none;cursor:pointer;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:14.5px;letter-spacing:.5px;text-transform:uppercase;
  padding:17px 32px;border-radius:7px;transition:all .25s;box-shadow:0 10px 28px rgba(169,119,8,.35)}
.wcx-btn:hover{background:var(--wcx-gold-h);transform:translateY(-2px);box-shadow:0 14px 34px rgba(169,119,8,.45)}
.wcx-btn i{transition:transform .25s}.wcx-btn:hover i{transform:translateX(4px)}
.wcx-skip{color:rgba(255,255,255,.72);text-decoration:none;font-size:13px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.25);
  padding-bottom:2px;transition:all .2s;cursor:pointer;background:none;font-family:'Montserrat',sans-serif}
.wcx-skip:hover{color:#fff;border-color:var(--wcx-gold-l)}
.wcx-art{position:relative;display:grid;place-items:center;min-height:300px;animation:wcx-rise 1s .15s ease both}
.wcx-glow{position:absolute;width:115%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(212,184,106,.3),transparent 60%)}
.wcx-ring{position:absolute;width:96%;aspect-ratio:1;border-radius:50%;border:1.5px dashed rgba(212,184,106,.45);animation:wcx-spin 26s linear infinite}
.wcx-ball{position:relative;z-index:2;width:360px;max-width:88%;aspect-ratio:1;background:var(--wcx-ball) center/contain no-repeat;
  filter:drop-shadow(0 22px 38px rgba(0,0,0,.55));animation:wcx-float 7s ease-in-out infinite}

/* ---- loader / countdown ---- */
.wcx-loader{position:absolute;z-index:5;bottom:30px;left:50%;transform:translateX(-50%);width:min(400px,86vw);
  background:rgba(18,14,18,.58);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 18px 12px}
.wcx-loader-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.wcx-loader-label{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.8);font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;font-family:'Montserrat',sans-serif}
.wcx-loader-label i{color:var(--wcx-gold-l);animation:wcx-spin 1.5s linear infinite}
.wcx-count{font-family:'Playfair Display',Georgia,serif;font-weight:700;color:var(--wcx-gold-l);font-size:20px;min-width:46px;text-align:right;font-variant-numeric:tabular-nums}
.wcx-bar{position:relative;height:6px;border-radius:4px;background:rgba(255,255,255,.16);overflow:hidden}
.wcx-bar-fill{position:absolute;inset:0;width:0;border-radius:4px;background:linear-gradient(90deg,var(--wcx-red),var(--wcx-green),var(--wcx-blue));box-shadow:0 0 12px rgba(212,184,106,.4)}
.wcx-loader-skip{display:block;margin:11px auto 0;background:none;border:none;color:rgba(255,255,255,.6);font-family:'Montserrat',sans-serif;
  font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;transition:color .2s}
.wcx-loader-skip:hover{color:var(--wcx-gold-l)}

@keyframes wcx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes wcx-spin{to{transform:rotate(360deg)}}
@keyframes wcx-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes wcx-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){
  .wcx-ball,.wcx-ring,.wcx-ball-mini::before,.wcx-loader-label i,.wcx-copy,.wcx-art{animation:none}
}
@media(max-width:860px){
  .wcx-wc-in{grid-template-columns:1fr;text-align:center}
  .wcx-ey,.wcx-loc,.wcx-actions{justify-content:center}
  .wcx-rule{margin-left:auto;margin-right:auto}
  .wcx-copy h2{font-size:31px}.wcx-copy p{margin-left:auto;margin-right:auto;font-size:15px}
  .wcx-art{order:-1;min-height:190px}.wcx-ball{width:190px}
  .wcx-btn{padding:15px 26px;font-size:13.5px}
}