/* ============================================================
   IPIA 2026 launch teaser splash
   Self-contained. To remove after launch: delete splash.css,
   splash.js, the #splash-overlay markup block in index.html,
   and the two <script>/<link> references. (It also auto-hides
   itself after the launch date set in splash.js.)
   ============================================================ */

/* Hide instantly (no flash) once dismissed or past launch */
html.splash-off #splash-overlay{display:none !important;}
/* Lock page scroll while the splash is showing */
html:not(.splash-off){overflow:hidden;}

#splash-overlay{
  position:fixed; inset:0; z-index:100000;
  display:flex; align-items:center; justify-content:center;
  padding:24px; box-sizing:border-box;
  /* The site stays visible but faded behind a blurred dark vignette. */
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  background:radial-gradient(ellipse 85% 85% at 50% 45%,
      rgba(6,6,8,0.60) 0%,
      rgba(4,4,6,0.82) 55%,
      rgba(0,0,0,0.95) 100%);
  opacity:1; transition:opacity .45s ease;
}
#splash-overlay.splash-hide{opacity:0;}

.splash-card{
  position:relative;
  width:min(660px, 100%);
  border-radius:20px;
  padding:40px 40px 34px;
  text-align:center;
  color:#f5f5f7;
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg,#161618 0%,#0a0a0b 100%);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:0 40px 120px rgba(0,0,0,0.72);
  font-family:'Figtree',sans-serif;
  animation:splashIn .6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes splashIn{
  from{opacity:0; transform:translateY(14px) scale(.985);}
  to{opacity:1; transform:none;}
}

.splash-close{
  position:absolute; top:14px; right:16px;
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  color:#c9c9cf; font-size:17px; line-height:1; cursor:pointer;
  transition:background .2s, color .2s;
}
.splash-close:hover{background:rgba(255,255,255,0.15); color:#fff;}

.splash-logo{width:min(330px,70%); height:auto; margin:4px auto 20px; display:block;
  filter:drop-shadow(0 2px 12px rgba(0,0,0,0.6));}
.splash-logo .adi-mark{fill:#ffffff;}
.splash-logo .adi-word{fill:#ffffff;}
.splash-logo .adi-r circle{stroke:#ffffff;}
.splash-logo .adi-r path{fill:#ffffff;}

.splash-teaser-label{
  font-family:'Outfit',sans-serif; font-weight:600; font-size:.72rem;
  letter-spacing:.34em; text-transform:uppercase; color:#8a8a92; margin-bottom:14px;
}
.splash-teaser-label .big{color:#fff; font-weight:800;}

/* Covered draped-device teaser photo. mix-blend-mode:screen drops the
   photo's black background so the drape reads over the darkened site. */
.splash-stage{max-width:480px; margin:0 auto 20px;}
.splash-drape-img{
  width:100%; height:clamp(150px,26vw,220px); margin:0 auto;
  background:url('/assets/Drape.png') center/contain no-repeat;
  mix-blend-mode:screen;
}

/* Countdown banner */
.splash-countdown{
  display:flex; justify-content:center; align-items:flex-start; gap:12px; margin:0 auto 24px;
}
.cd-unit{min-width:66px;}
.cd-num{
  font-family:'Outfit',sans-serif; font-weight:800; font-size:2.1rem; line-height:1;
  color:#fff; font-variant-numeric:tabular-nums;
}
.cd-label{
  font-family:'Figtree',sans-serif; font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:#7d7d85; margin-top:9px;
}
.cd-sep{
  font-family:'Outfit',sans-serif; font-weight:800; font-size:2.1rem; line-height:1;
  color:#3a3a40; padding-top:1px;
}

.splash-event{
  font-family:'Outfit',sans-serif; font-weight:800; font-size:1.55rem;
  letter-spacing:.02em; color:#ededf2;
}
.splash-place{
  font-family:'Outfit',sans-serif; font-weight:700; font-size:.78rem;
  letter-spacing:.24em; text-transform:uppercase; color:#8a8a92; margin-top:6px;
}

.splash-enter{
  display:inline-block; margin-top:26px;
  font-family:'Outfit',sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.04em;
  color:#0a0a0b; background:#f5f5f7; border:none; border-radius:10px;
  padding:12px 30px; cursor:pointer; text-decoration:none;
  transition:transform .15s, background .2s, box-shadow .2s;
}
.splash-enter:hover{background:#fff; transform:translateY(-1px); box-shadow:0 10px 30px rgba(255,255,255,0.16);}

.splash-visit{
  margin-top:20px; font-family:'Figtree',sans-serif; font-size:.82rem;
  color:#9a9aa1; letter-spacing:.02em;
}
.splash-visit strong{color:#f5f5f7; font-weight:700;}

@media (max-width:560px){
  .splash-card{padding:30px 20px 26px;}
  .cd-num,.cd-sep{font-size:1.55rem;}
  .cd-unit{min-width:50px;}
  .splash-countdown{gap:7px;}
  .splash-event{font-size:1.25rem;}
}