/* ============================================================
   WELCOME POPUP — video (top) + Season 1 / Season 2 (bottom)
   Shown once per session on load. Navy · Gold · Blue palette,
   consistent with the rest of the Pro Cricket T20 site.
============================================================ */

.welcome-modal{
  position:fixed; inset:0; z-index:10500;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.welcome-modal.open{ opacity:1; visibility:visible; }
body.welcome-modal-open{ overflow:hidden; }

.welcome-modal__backdrop{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(16,48,107,0.55) 0%, transparent 60%),
    rgba(4,18,46,0.86);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.welcome-modal__box{
  position:relative;
  width:min(520px, 100%);
  max-height:min(880px, 94vh);
  display:flex; flex-direction:column;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(223,161,32,.35);
  background:linear-gradient(180deg, #0B234F 0%, #071a3f 100%);
  box-shadow:0 40px 90px -24px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03) inset;
  transform:scale(.94) translateY(14px);
  transition:transform .5s var(--ease);
}
.welcome-modal.open .welcome-modal__box{ transform:scale(1) translateY(0); }

.welcome-modal__close{
  position:absolute; top:14px; right:14px; z-index:5;
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,12,28,0.55);
  border:1px solid rgba(255,255,255,0.18);
  color:#F5F7FB; font-size:16px; line-height:1;
  backdrop-filter:blur(4px);
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.welcome-modal__close:hover{ background:rgba(223,161,32,.85); border-color:var(--gold); color:#0A1F44; transform:rotate(90deg); }
.welcome-modal__close:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---------- video half ---------- */
.welcome-modal__video{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:#000;
  overflow:hidden;
  flex-shrink:0;
}
.welcome-modal__video video{
  width:100%; height:100%; object-fit:cover; display:block;
}
.welcome-modal__video-fade{
  position:absolute; left:0; right:0; bottom:0; height:60%;
  background:linear-gradient(180deg, transparent 0%, rgba(4,10,24,0.15) 45%, rgba(5,13,32,0.92) 100%);
  pointer-events:none;
}
.welcome-modal__tag{
  position:absolute; left:18px; top:16px;
  font-family:'Inter',sans-serif; font-size:10px; font-weight:700;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-soft);
  background:rgba(4,12,28,0.5);
  border:1px solid rgba(223,161,32,.4);
  padding:6px 12px; border-radius:100px;
  backdrop-filter:blur(4px);
}
.welcome-modal__headline{
  position:absolute; left:18px; right:60px; bottom:14px;
  font-family:'Anton','Bebas Neue',sans-serif;
  font-size:clamp(20px, 5.2vw, 26px);
  line-height:1.05;
  letter-spacing:.01em;
  background:var(--platinum-gold);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 4px 24px rgba(0,0,0,.4);
}
.welcome-modal__sound{
  position:absolute; right:16px; bottom:16px; z-index:4;
  width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(4,12,28,0.55);
  border:1px solid rgba(255,255,255,0.22);
  color:#F5F7FB;
  backdrop-filter:blur(4px);
  transition:background .25s ease, border-color .25s ease;
}
.welcome-modal__sound:hover{ border-color:var(--gold); }
.welcome-modal__sound svg{ width:18px; height:18px; }
.welcome-modal__sound .ic-unmute{ display:none; }
.welcome-modal__sound[aria-pressed="true"] .ic-mute{ display:none; }
.welcome-modal__sound[aria-pressed="true"] .ic-unmute{ display:block; }

/* ---------- seasons half ---------- */
.welcome-modal__seasons{
  display:flex;
  flex:1;
  min-height:0;
}
.welcome-modal__season{
  position:relative;
  flex:1 1 50%;
  min-height:150px;
  overflow:hidden;
  display:block;
  cursor:pointer;
}
.welcome-modal__season + .welcome-modal__season{
  border-left:1px solid rgba(255,255,255,0.1);
}
.welcome-modal__season img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), filter .6s ease;
  filter:saturate(1.05);
}
.welcome-modal__season:hover img{ transform:scale(1.08); }
.welcome-modal__season-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(4,10,24,0.15) 0%, rgba(4,10,24,0.55) 55%, rgba(3,8,22,0.92) 100%);
  transition:background .35s ease;
}
.welcome-modal__season-overlay--blue{
  background:linear-gradient(180deg, rgba(6,20,58,0.15) 0%, rgba(6,20,58,0.6) 55%, rgba(4,13,40,0.94) 100%);
}
.welcome-modal__season:hover .welcome-modal__season-overlay{ background:linear-gradient(180deg, rgba(4,10,24,0.05) 0%, rgba(4,10,24,0.4) 55%, rgba(3,8,22,0.88) 100%); }

.welcome-modal__season-copy{
  position:absolute; left:0; right:0; bottom:0; padding:14px 14px 16px;
  display:flex; flex-direction:column; gap:2px;
}
.welcome-modal__season-eyebrow{
  font-family:'Inter',sans-serif; font-size:9px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-dim);
}
.welcome-modal__season-title{
  font-family:'Anton','Bebas Neue',sans-serif;
  font-size:clamp(24px, 6vw, 30px);
  color:#fff; line-height:1;
}
.welcome-modal__season-title em{ font-style:normal; color:var(--gold); margin-left:4px; }
#welcomeModalSeason2 .welcome-modal__season-title em{ color:#5B9CFF; }
.welcome-modal__season-cta{
  margin-top:8px;
  display:inline-flex; align-items:center; gap:6px; width:fit-content;
  font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--gold-soft);
  padding:8px 12px; border-radius:100px;
  background:rgba(223,161,32,.14);
  border:1px solid rgba(223,161,32,.4);
  transition:background .25s ease, gap .25s ease, transform .25s ease;
}
#welcomeModalSeason2 .welcome-modal__season-cta{
  color:#BFD8FF;
  background:rgba(91,156,255,.14);
  border-color:rgba(91,156,255,.4);
}
.welcome-modal__season-cta svg{ width:13px; height:13px; transition:transform .25s ease; }
.welcome-modal__season:hover .welcome-modal__season-cta{ gap:9px; }
.welcome-modal__season:hover .welcome-modal__season-cta svg{ transform:translateX(2px); }
.welcome-modal__season:active{ transform:scale(.98); }

/* ---------- responsive ---------- */
@media (max-width:640px){
  .welcome-modal{ padding:14px; align-items:center; }
  .welcome-modal__box{
    width:100%; max-width:440px; max-height:88vh;
    border-radius:22px;
  }
  .welcome-modal__seasons{ flex-direction:row; }
  .welcome-modal__season{ min-height:130px; }
  .welcome-modal__season-title{ font-size:22px; }
  .welcome-modal__season-cta{ font-size:9.5px; padding:6px 9px; }
  .welcome-modal__headline{ font-size:18px; right:52px; }
  .welcome-modal__tag{ font-size:9px; padding:5px 10px; }
}

@media (max-width:380px){
  .welcome-modal__seasons{ flex-direction:column; }
  .welcome-modal__season + .welcome-modal__season{ border-left:none; border-top:1px solid rgba(255,255,255,0.1); }
  .welcome-modal__season{ min-height:110px; }
}

@media (min-width:641px) and (max-width:900px){
  .welcome-modal__box{ width:min(480px, 92vw); }
}

/* short/landscape viewports (e.g. mobile landscape, small laptops) */
@media (max-height:640px) and (min-width:641px){
  .welcome-modal__box{ max-height:90vh; }
  .welcome-modal__video{ aspect-ratio:21/9; }
}
@media (max-height:520px){
  .welcome-modal__video{ aspect-ratio:auto; height:38vh; }
  .welcome-modal__seasons{ height:38vh; }
}

@media (prefers-reduced-motion:reduce){
  .welcome-modal, .welcome-modal__box, .welcome-modal__season img,
  .welcome-modal__close{ transition:none !important; }
}