/* ========================================================================
   ASK CHAMPAIGN — a night ride through C–U.
   Deep indigo canvas; each stop tints the night its own hue. Giant type,
   layered parallax (JS drives the transforms), floaters on the breeze.
   ======================================================================== */

:root{
  --night:#14172e;          /* the sky */
  --night-2:#1b1f3b;
  --cream:#f5efe2;
  --coral:#ff6b4a;
  --gold:#e8b33d;
  --mint:#7fd4a8;
  --sky:#7fb8ff;
  --lav:#b89aff;
  --rose:#ff8fa3;
  --accent:var(--coral);    /* re-tinted per stop */
  --display:'Bricolage Grotesque', 'Arial Black', sans-serif;
  --mono:'Fragment Mono', 'Courier New', monospace;
  --body:'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--night);
  color:var(--cream);
  font-family:var(--body);
  overflow:hidden;               /* the track owns scrolling */
  transition:background-color .8s ease;
}
.mono{font-family:var(--mono)}
.nb{white-space:nowrap}  /* words that must never break (C–U — the dash invites a wrap) */
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* per-stop night tint — the color-fade-between-sections trick */
body[data-stop="hero"]         {background:#14172e; --accent:var(--coral)}
body[data-stop="business"]     {background:#161b31; --accent:var(--gold)}
body[data-stop="entertainment"]{background:#1d1530; --accent:var(--rose)}
body[data-stop="living"]       {background:#14202b; --accent:var(--mint)}
body[data-stop="schools"]      {background:#101d33; --accent:var(--sky)}
body[data-stop="campus"]       {background:#1a1631; --accent:var(--lav)}
body[data-stop="food"]         {background:#201826; --accent:var(--coral)}
body[data-stop="music"]        {background:#0f1626; --accent:var(--gold)}
body[data-stop="outdoors"]     {background:#122019; --accent:var(--mint)}
body[data-stop="transit"]      {background:#171d2e; --accent:var(--sky)}
body[data-stop="finale"]       {background:#191430; --accent:var(--coral)}

/* ============================= INTRO ============================= */
.intro{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:
    radial-gradient(1000px 600px at 75% 15%, rgba(255,107,74,.14), transparent 60%),
    radial-gradient(800px 500px at 15% 85%, rgba(127,184,255,.10), transparent 60%),
    var(--night);
  transition:opacity .7s ease, visibility .7s;
}
.intro.gone{opacity:0;visibility:hidden;pointer-events:none}
.intro-inner{max-width:1100px;padding:32px;text-align:center;position:relative;z-index:2}
.intro-kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.5em;color:var(--gold);
  animation:up .8s .1s both;
}
.intro-title{
  font-family:var(--display);font-weight:800;
  white-space:nowrap; /* CHAMPAIGN never breaks (the .tilt span invites a wrap) */
  font-size:clamp(40px,14vw,190px);line-height:.86;letter-spacing:-.02em;
  margin:20px 0 18px;
  background:linear-gradient(120deg,var(--cream) 55%,var(--coral) 55.2%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:up .8s .22s both;
}
.intro-title .tilt{display:inline-block;transform:rotate(8deg);color:var(--coral);
  -webkit-text-fill-color:var(--coral)}
.intro-sub{
  font-size:clamp(16px,2.2vw,21px);color:#cfd2e4;max-width:46ch;margin:0 auto;
  animation:up .8s .34s both;
}
.stop-list{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
  margin:34px auto 30px;max-width:820px;animation:up .8s .46s both;
}
.stop-list button{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  color:var(--cream);background:rgba(245,239,226,.05);
  border:1px solid rgba(245,239,226,.25);border-radius:999px;
  padding:10px 18px;transition:all .18s;
}
.stop-list button span{color:var(--gold);margin-right:8px}
.stop-list button:hover{
  background:var(--cream);color:var(--night);transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(0,0,0,.4);
}
.stop-list button:hover span{color:var(--coral)}
.intro-start{
  font-family:var(--display);font-weight:800;font-size:clamp(18px,2.6vw,26px);
  letter-spacing:.04em;color:var(--night);
  background:var(--coral);border:none;border-radius:999px;padding:18px 44px;
  animation:up .8s .58s both;transition:transform .18s, box-shadow .18s;
}
.intro-start:hover{transform:translateY(-3px) scale(1.03);
  box-shadow:0 16px 40px rgba(255,107,74,.35)}
.intro-glow{
  position:absolute;inset:auto -20% -55% -20%;height:70%;
  background:radial-gradient(ellipse at center, rgba(232,179,61,.18), transparent 65%);
  filter:blur(30px);animation:breathe 6s ease-in-out infinite alternate;
}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes breathe{from{opacity:.5}to{opacity:1}}

/* ============================= TRACK ============================= */
.track{
  display:flex;height:100vh;height:100dvh;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.track::-webkit-scrollbar{display:none}
.panel{
  position:relative;flex:0 0 100vw;height:100%;
  scroll-snap-align:start;overflow:hidden;
  display:grid;align-items:center;
}

/* layers */
.layer.back{position:absolute;inset:-6% -10%;z-index:1;will-change:transform}
.layer.back img{
  width:100%;height:100%;object-fit:cover;opacity:.42;
  mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
}
.panel::after{ /* vignette to keep type readable */
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg, rgba(20,23,46,.72) 0%, rgba(20,23,46,.18) 45%, rgba(20,23,46,.55) 100%);
}
.panel .layer.back::after{ /* screenprint grain to unify the art */
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;opacity:.22;mix-blend-mode:soft-light;
}

/* --- layout variants: break the template mid-ride --- */
/* .flip — mirrored composition: copy on the right, chips + numeral left */
.panel.flip .layer.mid{margin-left:auto}
.panel.flip .layer.num{right:auto;left:-2vw}
.panel.flip::after{
  background:linear-gradient(270deg, rgba(20,23,46,.72) 0%, rgba(20,23,46,.18) 45%, rgba(20,23,46,.55) 100%);
}
/* .big — the midpoint moment: full-bleed centered type */
.panel.big .layer.mid{max-width:880px;margin:0 auto;text-align:center;padding:0 28px}
.panel.big .panel-title{font-size:clamp(64px,11.5vw,175px)}
.panel.big .panel-body{margin:0 auto}
.panel.big::after{
  background:radial-gradient(ellipse at 50% 55%, rgba(20,23,46,.78) 0%, rgba(20,23,46,.3) 55%, rgba(20,23,46,.55) 100%);
}
.layer.num{
  position:absolute;right:-2vw;bottom:-6vh;z-index:3;
  font-family:var(--display);font-weight:800;font-size:46vh;line-height:1;
  color:transparent;-webkit-text-stroke:2px rgba(245,239,226,.14);
  will-change:transform;user-select:none;
}
.layer.mid{
  position:relative;z-index:4;max-width:640px;
  padding:0 clamp(28px,7vw,110px);will-change:transform;
}
/* readability scrim: a soft dark cloud behind the text column so kicker/
   title/body clear WCAG AA contrast over the brightest poster art, while the
   open side of each panel keeps showing the illustration. Tied to .mid so it
   tracks the parallax and adapts to .flip/.big without a hard edge. */
.layer.mid::before{
  content:"";position:absolute;z-index:-1;inset:-45% -30%;pointer-events:none;
  background:radial-gradient(ellipse 70% 62% at 50% 50%,
    rgba(20,23,46,.78) 0%, rgba(20,23,46,.72) 34%,
    rgba(20,23,46,.5) 54%, rgba(20,23,46,.24) 74%, transparent 92%);
}

.panel-kicker{
  font-family:var(--mono);font-size:12px;letter-spacing:.4em;color:var(--accent);
  transition:color .8s;
}
.panel-title{
  font-family:var(--display);font-weight:800;
  font-size:clamp(52px,8.5vw,120px);line-height:.92;letter-spacing:-.02em;
  margin:14px 0 18px;
}
.panel-body{font-size:clamp(16px,1.9vw,20px);line-height:1.6;color:#d6d9e8;max-width:44ch}

.hero .panel-title{font-size:clamp(64px,10vw,132px)} /* capped so "to C–U." always fits its column */
.scroll-hint{
  position:absolute;right:38px;bottom:34px;z-index:5;
  font-family:var(--mono);font-size:12px;letter-spacing:.35em;color:var(--gold);
  animation:nudge 1.8s ease-in-out infinite;
}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(10px)}}

/* floaters — the drifting question chips.
   Their own panel layer (z3, under the text) in the open side of the panel,
   never over the copy column. Hidden < 1100px where there's no empty side. */
.layer.floaters{position:absolute;inset:0;z-index:3;pointer-events:none}
.floater{
  position:absolute;white-space:nowrap;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.02em;
  color:var(--night);background:var(--cream);
  border:none;border-radius:999px;padding:9px 16px;
  box-shadow:0 8px 22px rgba(0,0,0,.35);
  will-change:transform;pointer-events:auto;cursor:pointer;
  transition:box-shadow .18s, filter .18s;  /* rAF owns transform — hover via glow */
}
.floater:hover{filter:brightness(1.08);box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 0 3px rgba(245,239,226,.35)}
.floater:nth-child(1){left:62%;top:20%;rotate:3deg}
.floater:nth-child(2){left:71%;top:44%;rotate:-2deg;background:var(--gold)}
.floater:nth-child(3){left:59%;top:66%;rotate:1.5deg;background:var(--accent);transition:background .8s}
/* mirrored composition: chips take the open left side */
.flip .floater:nth-child(1){left:9%}
.flip .floater:nth-child(2){left:17%}
.flip .floater:nth-child(3){left:6%}
/* full-bleed center: chips frame the corners */
.big .floater:nth-child(1){left:9%;top:16%}
.big .floater:nth-child(2){left:76%;top:22%}
.big .floater:nth-child(3){left:12%;top:72%}

/* arrival moments — content rises as a stop becomes current (JS adds .live;
   body.enhanced gates it so nothing hides if JS never runs) */
body.enhanced .stop .layer.mid > *{
  opacity:0;transform:translateY(34px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.85,.3,1);
}
body.enhanced .stop.live .layer.mid > *{opacity:1;transform:none}
body.enhanced .stop.live .layer.mid > *:nth-child(2){transition-delay:.07s}
body.enhanced .stop.live .layer.mid > *:nth-child(3){transition-delay:.14s}
body.enhanced .stop.live .layer.mid > *:nth-child(4){transition-delay:.21s}
body.enhanced .floater{opacity:0;transition:opacity .5s ease}
body.enhanced .live .floater{opacity:1}
body.enhanced .live .floater:nth-child(1){transition-delay:.35s}
body.enhanced .live .floater:nth-child(2){transition-delay:.5s}
body.enhanced .live .floater:nth-child(3){transition-delay:.65s}

.ask-btn{
  display:inline-block;margin-top:30px;
  font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.06em;
  color:var(--cream);background:transparent;
  border:2px solid var(--accent);border-radius:999px;padding:15px 30px;
  transition:all .2s;text-decoration:none;
}
.ask-btn:hover{background:var(--accent);color:var(--night);
  transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.4)}
.ask-btn.solid{background:var(--accent);color:var(--night)}
.ask-btn.solid:hover{filter:brightness(1.1)}

.finale{text-align:center}
.finale .layer.mid{max-width:760px;margin:0 auto;padding:0 28px}
.finale .panel-body{margin:0 auto}
.finale-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.again{
  margin-top:44px;background:none;border:none;color:#9aa0bd;
  font-family:var(--mono);font-size:12px;letter-spacing:.25em;
}
.again:hover{color:var(--cream)}

/* ============================= CHROME ============================= */
.brand{position:fixed;top:26px;left:30px;z-index:40}
.brand button{
  background:none;border:none;color:var(--cream);
  font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.05em;
}
.brand .tilt{display:inline-block;transform:rotate(8deg);color:var(--accent);transition:color .8s}
.brand button:hover{opacity:.75}

.rail{
  position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:40;
  width:min(560px,72vw);
}
.rail-line{height:2px;background:rgba(245,239,226,.18);border-radius:2px}
.rail-fill{height:100%;width:0;background:var(--accent);border-radius:2px;
  transition:background .8s}
.rail-dots{display:flex;justify-content:space-between;margin-top:-6px}
.rail-dots button{
  width:10px;height:10px;border-radius:50%;border:none;
  background:rgba(245,239,226,.28);transition:all .2s;
}
.rail-dots button[aria-current="true"]{background:var(--accent);transform:scale(1.5)}
.rail-dots button:hover{transform:scale(1.6)}
.rail-label{
  text-align:center;margin-top:12px;font-size:11px;letter-spacing:.4em;
  color:#9aa0bd;
}

/* ============================= DRAWER ============================= */
.drawer{position:fixed;inset:0;z-index:80}
.drawer[hidden]{display:none}
.drawer-backdrop{position:absolute;inset:0;background:rgba(10,12,24,.6);
  backdrop-filter:blur(4px)}
.drawer-card{
  position:absolute;right:0;top:0;bottom:0;width:min(480px,100vw);
  background:var(--night-2);border-left:1px solid rgba(245,239,226,.14);
  display:flex;flex-direction:column;padding:26px 26px 18px;
  box-shadow:-30px 0 80px rgba(0,0,0,.5);
  animation:slidein .32s cubic-bezier(.2,.9,.25,1);
}
@keyframes slidein{from{transform:translateX(60px);opacity:0}}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.drawer-kicker{font-size:10px;letter-spacing:.4em;color:var(--accent)}
.drawer-head h2{font-family:var(--display);font-weight:800;font-size:26px;margin-top:6px}
.drawer-x{background:none;border:1px solid rgba(245,239,226,.25);color:var(--cream);
  width:36px;height:36px;border-radius:50%;font-size:14px}
.drawer-x:hover{background:var(--accent);color:var(--night);border-color:var(--accent)}

.chat{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:6px 2px}
.msg{max-width:88%;padding:12px 16px;border-radius:16px;font-size:15px;line-height:1.55}
.msg.you{align-self:flex-end;background:var(--accent);color:var(--night);
  border-bottom-right-radius:4px;transition:background .8s}
.msg.bot{align-self:flex-start;background:rgba(245,239,226,.08);
  border:1px solid rgba(245,239,226,.12);border-bottom-left-radius:4px}
.msg.bot a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;
  transition:color .8s}
.msg.bot a:hover{color:var(--cream)}
.msg-links{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.msg-links a{
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;text-decoration:none;
  color:var(--cream);background:rgba(245,239,226,.06);
  border:1px solid rgba(245,239,226,.22);border-radius:999px;padding:6px 11px;
  transition:background .18s,color .18s,border-color .18s;
}
.msg-links a::after{content:" ↗";opacity:.55}
.msg-links a:hover{background:var(--cream);color:var(--night);border-color:var(--cream)}
.msg.bot.typing span{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#9aa0bd;margin-right:4px;animation:blink 1.2s infinite}
.msg.bot.typing span:nth-child(2){animation-delay:.2s}
.msg.bot.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

.chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0}
.chips button{
  font-family:var(--mono);font-size:11.5px;color:var(--cream);
  background:rgba(245,239,226,.06);border:1px solid rgba(245,239,226,.22);
  border-radius:999px;padding:7px 13px;
}
.chips button:hover{background:var(--cream);color:var(--night)}

.ask-form{display:flex;gap:10px}
.ask-form input{
  flex:1;background:rgba(245,239,226,.07);color:var(--cream);
  border:1px solid rgba(245,239,226,.25);border-radius:12px;
  font-family:var(--body);font-size:15px;padding:13px 16px;
}
.ask-form input:focus{outline:2px solid var(--accent)}
.ask-form button{
  width:50px;border-radius:12px;border:none;background:var(--accent);
  color:var(--night);font-size:20px;transition:background .8s;
}
.drawer-fine{font-size:10px;letter-spacing:.06em;color:#8b91ad;margin-top:12px;text-align:center}

/* ============================= RESPONSIVE ============================= */
@media (max-width:1100px){
  .floater{display:none}  /* no empty side to drift in */
}
@media (max-width:720px){
  .layer.mid{padding:0 26px;max-width:92vw}
  .panel.flip .layer.mid{margin-left:0}
  .panel.big .layer.mid{padding:0 26px}
  .layer.num{font-size:30vh;right:-6vw}
  .panel.flip .layer.num{left:-6vw}
  .scroll-hint{right:20px;bottom:88px}
  .rail{width:82vw}
  .brand{top:18px;left:18px}
  .drawer-card{width:100vw;border-left:none}
  .panel::after,.panel.flip::after,.panel.big::after{
    background:linear-gradient(180deg, rgba(20,23,46,.35) 0%, rgba(20,23,46,.75) 78%)}
}

/* ============================= REDUCED MOTION ============================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.05s !important}
  .layer.back,.layer.num,.layer.mid,.floater{transform:none !important}
  body.enhanced .stop .layer.mid > *,body.enhanced .floater{opacity:1 !important;transform:none !important}
  .scroll-hint{animation:none}
}