:root{
  --ink:#f4f0ea;
  --muted:#b9b2c4;
  --amber:#f0a64e;
  --bg:#0a0a12;
  --maxw:34rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* scroll-snap deck */
#deck{
  height:100svh;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#deck::-webkit-scrollbar{display:none}

.panel{
  position:relative;
  min-height:100svh;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7svh 1.6rem;
  overflow:hidden;
  text-align:center;
}

/* ambient gradient base */
.panel::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(240,166,78,.10), transparent 55%),
    radial-gradient(120% 90% at 50% 100%, rgba(70,80,140,.18), transparent 60%);
  pointer-events:none;
}

/* photo panels */
.panel--photo::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--img);
  background-size:cover;
  background-position:center;
  transform:scale(1.08);
  transition:transform 7s ease-out;
}
.panel--photo.in::before{transform:scale(1)}
.panel--photo[data-bg="dim"]::after{
  background:
    radial-gradient(80% 55% at 50% 52%, rgba(6,6,12,.55), transparent 75%),
    linear-gradient(180deg, rgba(6,6,12,.55), rgba(6,6,12,.82));
}
/* keep overlay text readable over bright/busy photos */
.panel--photo .eyebrow,
.panel--photo .kicker,
.panel--photo .display,
.panel--photo .line,
.panel--photo .sub{
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 6px 30px rgba(0,0,0,.6);
}
.panel--photo .kicker,
.panel--photo .sub{color:#ece9f1}
.panel--photo[data-bg="bottom"]{align-items:flex-end}
.panel--photo[data-bg="bottom"]::after{
  background:linear-gradient(180deg, rgba(6,6,12,.20) 30%, rgba(6,6,12,.72) 78%, rgba(6,6,12,.92));
}

/* band slide — full image at phone width, caption beneath, natural dark bars */
.band-wrap{
  position:relative;z-index:2;
  width:100%;max-width:34rem;min-width:0;
  text-align:center;
}
.band-img{
  width:100%;height:auto;display:block;margin:0 auto 1.5rem;
  border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5);
}

.wrap{position:relative;z-index:2;max-width:var(--maxw);width:100%}
.wrap--bottom{padding-bottom:9svh}

/* typography */
.display{
  font-family:"Fraunces",Georgia,serif;
  font-weight:400;
  font-size:clamp(2.2rem,9.3vw,4.4rem);
  line-height:1.04;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.display.big{font-size:clamp(2.9rem,13vw,5.6rem)}
.line{
  font-family:"Fraunces",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.5rem,5.8vw,2.4rem);
  line-height:1.24;
  text-wrap:balance;
}
.eyebrow{
  font-family:"Fraunces",serif;font-style:italic;
  font-size:clamp(1.1rem,5vw,1.5rem);color:var(--amber);
  margin-bottom:1.1rem;
}
.kicker{
  font-size:clamp(1rem,4.4vw,1.25rem);
  color:var(--muted);line-height:1.4;
}
.kicker + .display,.kicker + .line{margin-top:.7rem}
.sub{
  margin-top:1.3rem;color:var(--muted);
  font-size:clamp(1rem,4.2vw,1.2rem);line-height:1.5;
}
.signoff{
  font-family:"Fraunces",serif;font-style:italic;
  margin-top:1.1rem;color:var(--amber);
  font-size:clamp(1.2rem,5vw,1.6rem);
}

/* scroll cue */
.cue{
  position:absolute;bottom:5svh;left:0;right:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  color:var(--muted);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
}
.cue i{width:1px;height:34px;background:linear-gradient(var(--muted),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(8px);opacity:1}}
#deck.scrolled .cue{opacity:0;transition:opacity .5s}

/* ticket card */
.ticket{
  margin:1.8rem auto 0;max-width:23rem;text-align:left;
  border:1px solid rgba(244,240,234,.16);border-radius:16px;
  padding:1.1rem 1.25rem;
  background:linear-gradient(160deg, rgba(240,166,78,.07), rgba(70,80,140,.07));
  backdrop-filter:blur(4px);
}
.ticket__row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0}
.ticket__row + .ticket__row{border-top:1px solid rgba(244,240,234,.09)}
.ticket__row span{color:var(--muted);font-size:.82rem;letter-spacing:.04em}
.ticket__row b{font-weight:600;font-size:.95rem;text-align:right}
.fineprint{margin-top:1.4rem;color:var(--muted);font-size:.9rem;font-style:italic}

/* reveal animation */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.in .reveal{opacity:1;transform:none}
.in .reveal.d1{transition-delay:.18s}
.in .reveal.d2{transition-delay:.36s}
.in .reveal.d3{transition-delay:.56s}

/* progress dots */
.dots{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:9px}
.dots b{width:6px;height:6px;border-radius:50%;background:rgba(244,240,234,.28);transition:all .35s}
.dots b.on{background:var(--amber);transform:scale(1.5)}
@media (max-width:480px){.dots{right:9px;gap:7px}}

@media (prefers-reduced-motion:reduce){
  .reveal{transition:opacity .4s}
  .reveal,.in .reveal{transform:none}
  .panel--photo::before{transition:none;transform:scale(1)}
  .cue i{animation:none}
  html{scroll-behavior:auto}
}