/* ============================================================
   Load screen + page transitions
   Concept: the same "Current" particle system used in the hero,
   repurposed as a connective thread between pages. First-visit
   load screen resolves the current into the wordmark; page
   transitions use a fast current-sweep wipe.
   ============================================================ */

/* ---------- Load screen (first visit per session) ---------- */
#loadScreen{
  position:fixed; inset:0; z-index:9999;
  background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  opacity:1; transition:opacity .6s var(--ease-out);
}
#loadScreen.is-hidden{
  opacity:0; pointer-events:none;
}
#loadCanvas{
  position:absolute; inset:0; width:100%; height:100%;
}
.load-wordmark{
  position:relative; z-index:2;
  text-align:center;
  opacity:0;
  transform:translateY(10px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.load-wordmark.is-visible{ opacity:1; transform:none; }
.load-wordmark__discover{
  display:block;
  font-family:var(--ui); font-size:.85rem; font-weight:700;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--moss-lt); margin-bottom:.4rem;
}
.load-wordmark__city{
  display:block;
  font-family:var(--display); font-weight:700;
  font-size:clamp(2rem, 5.5vw, 3.4rem);
  letter-spacing:-0.03em; color:var(--on-dark); line-height:1;
}
.load-wordmark__sub{
  display:block; margin-top:.9rem;
  font-family:var(--body); font-style:italic; font-size:.85rem;
  color:var(--on-dark-mute);
}

.load-sponsors{
  position:relative; z-index:2;
  margin-top:2rem;
  opacity:0; transform:translateY(8px);
  transition:opacity .8s var(--ease-out) .3s, transform .8s var(--ease-out) .3s;
  text-align:center;
}
.load-sponsors.is-visible{ opacity:1; transform:none; }
.load-sponsors__label{
  font-family:var(--ui); font-size:.68rem; font-weight:600;
  letter-spacing:0.05em; color:var(--fog); margin-bottom:.75rem;
}
.load-sponsors__logos{
  display:flex; align-items:center; justify-content:center; gap:2rem;
}
.load-sponsors__logos .sponsor-tile{ width:130px; height:84px; padding:9px; }
.load-sponsors__logos .sponsor-tile--full{ padding:0; }

/* ---------- Page transition sweep ---------- */
#pageSweep{
  position:fixed; inset:0; z-index:9998;
  pointer-events:none;
  display:flex;
}
#pageSweep canvas{
  position:absolute; inset:0; width:100%; height:100%;
}
.sweep-panel{
  position:absolute; inset:0;
  background:var(--ink);
  transform:translateX(-100%);
}
.sweep-panel.is-sweeping-in{
  animation:sweepIn .42s cubic-bezier(0.6,0,0.4,1) forwards;
}
.sweep-panel.is-sweeping-out{
  animation:sweepOut .42s cubic-bezier(0.6,0,0.4,1) forwards;
}
@keyframes sweepIn{
  from{ transform:translateX(-100%); }
  to{ transform:translateX(0%); }
}
@keyframes sweepOut{
  from{ transform:translateX(0%); }
  to{ transform:translateX(100%); }
}

@media (prefers-reduced-motion: reduce){
  #loadScreen{ transition:opacity .2s linear; }
  .load-wordmark, .load-sponsors{ transition:none; opacity:1; transform:none; }
  .sweep-panel{ display:none; }
}

/* Soft pool of darkness behind the wordmark so text stays crisp over the current */
#loadScreen::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse 42% 30% at 50% 48%, rgba(10,26,32,0.85), rgba(10,26,32,0) 70%);
}

/* ── Welcome popup ───────────────────────────────────────── */
.welcome-modal{
  position:fixed; inset:0; z-index:600; display:flex; align-items:center; justify-content:center;
  padding:1.2rem; background:rgba(10,26,32,0); backdrop-filter:blur(0);
  transition:background-color .3s var(--ease-out), backdrop-filter .3s var(--ease-out);
}
.welcome-modal.is-open{ background:rgba(10,26,32,0.78); backdrop-filter:blur(6px); }
.welcome-modal__box{
  position:relative; width:min(480px,100%); background:var(--paper); color:var(--on-light);
  border-radius:22px; padding:2rem 1.8rem 1.6rem; box-shadow:0 30px 70px -20px rgba(0,0,0,.6);
  opacity:0; transform:translateY(14px) scale(.98);
  transition:opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.welcome-modal.is-open .welcome-modal__box{ opacity:1; transform:none; }
.welcome-modal__close{
  position:absolute; top:14px; right:16px; width:32px; height:32px; border-radius:50%;
  background:var(--paper-2); border:1px solid var(--line-light); cursor:pointer; font-size:.9rem;
}
.welcome-modal__eyebrow{
  font-family:var(--ui); font-size:.7rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--moss); margin:0 0 .4rem;
}
.welcome-modal__box h2{ font-size:var(--step-2); margin:0 0 .7rem; line-height:1.1; }
.welcome-modal__box > p{ font-size:.92rem; color:var(--on-light-mute); line-height:1.65; margin:0 0 1.1rem; }
.welcome-modal__ask{
  background:var(--ink); color:var(--on-dark); border-radius:14px; padding:1rem 1.1rem; margin-bottom:1.3rem;
  border-left:3px solid var(--moss-lt);
}
.welcome-modal__ask h3{ font-size:1rem; margin:0 0 .35rem; color:var(--on-dark); }
.welcome-modal__ask p{ font-size:.85rem; color:var(--on-dark-mute); line-height:1.6; margin:0; }
.welcome-modal__actions{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.welcome-modal__later{
  background:none; border:none; cursor:pointer; font-family:var(--ui); font-weight:600;
  font-size:.85rem; color:var(--on-light-mute); padding:.6rem .2rem;
}
.welcome-modal__later:hover{ color:var(--on-light); }
@media (prefers-reduced-motion: reduce){ .welcome-modal, .welcome-modal__box{ transition:none; } }