/* ============================================================
   BOOT — the flagship lockup lights up, then ignites into the hero
   ============================================================ */
.boot{ display:none; }
html.js .boot{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:fixed; inset:0; z-index:120;
  background:var(--black);
  padding:var(--pad);
}
html.booting, html.booting body{ overflow:hidden; }

/* the hero waits behind the curtain */
html.js:not(.hero-go) .hero-eyebrow,
html.js:not(.hero-go) .hero-head,
html.js:not(.hero-go) .hero-sub,
html.js:not(.hero-go) .count,
html.js:not(.hero-go) .hero-actions,
html.js:not(.hero-go) .cue,
html.js:not(.hero-go) .hero-planet,
html.js:not(.hero-go) .hero-horizon,
html.js:not(.hero-go) .hero-flare,
html.js:not(.hero-go) .hero-stars,
html.js:not(.hero-go) .hero-head .w,
html.js:not(.hero-go) .nav{ animation-play-state:paused; }
html.js .nav{ animation:rise 1.1s cubic-bezier(.16,1,.3,1) var(--nv-go) both; }

.flagship{
  position:relative;
  width:min(600px, 86vw);
  aspect-ratio:1400 / 148;
  --p:0%;
  filter:drop-shadow(0 0 0 rgba(122,108,255,0));
  transition:filter .5s ease;
}
.flagship > img, .flagship-reveal, .flagship-reveal img{
  position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:contain;
}
.flagship-dim{ opacity:1; }
.flagship-reveal{
  overflow:hidden;
  clip-path:inset(0 calc(100% - var(--p)) 0 0);
  -webkit-clip-path:inset(0 calc(100% - var(--p)) 0 0);
}
.flagship-reveal::after{
  content:""; position:absolute; top:0; bottom:0; left:var(--p); width:3px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,#fff,transparent);
  filter:blur(1px); opacity:.9;
}
html.boot-lit .flagship{
  filter:drop-shadow(0 0 34px rgba(122,108,255,.42))
         drop-shadow(0 0 90px rgba(67,56,202,.34));
}

.boot-count{
  margin:2.6rem 0 0;
  font-weight:500; font-size:.62rem; letter-spacing:.3em;
  color:var(--muted); font-variant-numeric:tabular-nums;
}

.boot-bloom{
  position:absolute; left:50%; top:50%; width:150vmax; height:150vmax;
  transform:translate(-50%,-50%) scale(.3);
  border-radius:50%; opacity:0; pointer-events:none;
  background:radial-gradient(circle at center,
             rgba(122,108,255,.30), rgba(67,56,202,.12) 36%, transparent 64%);
}
/* the ignition — same object the hero horizon will inherit */
.boot-ray{ top:50%; opacity:0; transform:translateY(-50%) scaleX(0); }
.boot-veil{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  background:rgba(206,201,255,1);
}

/* ---------- handover ---------- */
html.boot-out .boot      { pointer-events:none; animation:bootLift .78s cubic-bezier(.4,0,.2,1) .72s both; }
html.boot-out .flagship  { animation:bootThrough 1.6s cubic-bezier(.62,0,.24,1) both; }
html.boot-out .boot-count{ animation:bootCountOut .34s ease both; }
html.boot-out .boot-ray  { animation:bootRay 1.5s cubic-bezier(.2,.9,.25,1) both; }
html.boot-out .boot-veil { animation:bootVeil 1.5s ease-out both; }
html.boot-out .boot-bloom{ animation:bootBloom 1.6s cubic-bezier(.22,1,.36,1) .12s both; }
html.boot-out .hero-stage{ animation:heroPush 2.6s cubic-bezier(.16,1,.3,1) .72s both; }

@keyframes bootLift{ from{ opacity:1 } to{ opacity:0 } }
@keyframes bootThrough{
  0%  { opacity:1; transform:scale(1);    filter:blur(0) }
  19% { opacity:1; transform:scale(1.05); filter:blur(0) }
  25% { opacity:1; transform:scale(1.03); filter:blur(0) }
  100%{ opacity:0; transform:scale(1.95); filter:blur(18px) }
}
@keyframes bootCountOut{ from{ opacity:1 } to{ opacity:0; transform:translateY(8px) } }
@keyframes bootRay{
  0%,18%{ opacity:0; transform:translateY(-50%) scaleX(0) }
  28%   { opacity:1; transform:translateY(-50%) scaleX(.32) }
  52%   { opacity:1; transform:translateY(-50%) scaleX(1) }
  100%  { opacity:1; transform:translateY(-50%) scaleX(1.04) }
}
@keyframes bootVeil{
  0%,20%{ opacity:0 } 28%{ opacity:.10 } 100%{ opacity:0 }
}
@keyframes bootBloom{
  0%  { opacity:0;   transform:translate(-50%,-50%) scale(.3) }
  38% { opacity:.62 }
  100%{ opacity:0;   transform:translate(-50%,-50%) scale(1.55) }
}
@keyframes heroPush{ from{ transform:scale(1.07) } to{ transform:scale(1) } }

/* ============================================================
   SCROLL MOTION — things arrive unlit and warm up
   ============================================================ */
html.js [data-lift]{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1),
             transform .9s cubic-bezier(.16,1,.3,1),
             color .9s ease;
  transition-delay:calc(var(--i,0) * 90ms);
}
html.js .live [data-lift],
html.js [data-lift].live{ opacity:1; transform:none; }
html.js [data-warm]{ color:var(--dim); }
html.js .live [data-warm]{ color:var(--tertiary); }

/* every stage heading resolves out of blur, like the hero words */
html.js section[data-seam] .display{
  opacity:0; transform:translateY(30px) scale(.975); filter:blur(9px);
  transition:opacity .8s ease, filter .9s ease, color .9s ease,
             transform 1s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 90ms + 60ms);
}
html.js section[data-seam].live .display{ opacity:1; transform:none; filter:blur(0); }

/* the vision cards tilt up off the floor */
html.js .vision .card{
  opacity:0; transform-origin:50% 100%;
  transform:perspective(1000px) rotateX(-26deg) translateY(64px);
  transition:opacity .75s ease, transform 1s cubic-bezier(.16,1,.3,1),
             border-color .45s ease, box-shadow .45s ease;
  transition-delay:calc(var(--i,0) * 130ms + 180ms), calc(var(--i,0) * 130ms + 180ms), 0s, 0s;
}
html.js .vision.live .card{ opacity:1; transform:none; }

/* the figures punch up, the object turns into place */
html.js .stats .stat b{
  opacity:0; transform:translateY(30px);
  transition:opacity .6s ease, transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 110ms + 120ms);
}
html.js .stats-wrap.live .stat b{ opacity:1; transform:none; }
html.js .knot{
  opacity:0; transform:scale(.78);
  transition:opacity .9s ease .3s, transform 1.3s cubic-bezier(.16,1,.3,1) .3s;
}
html.js .stats-wrap.live .knot{ opacity:1; transform:none; }

/* the passes are dealt */
html.js .tickets .pass{
  opacity:0;
  transform:translateY(96px) rotate(var(--rot,0deg)) scale(.93);
  transition:opacity .7s ease, transform 1.05s cubic-bezier(.16,1,.3,1),
             border-color .45s ease, box-shadow .45s ease;
  transition-delay:calc(var(--i,0) * 120ms + 150ms), calc(var(--i,0) * 120ms + 150ms), 0s, 0s;
}
html.js .tickets.live .pass{ opacity:1; transform:none; }

/* the one lit object flares as it lands */
html.js .close.live .cta{ animation:ctaBloom 1.5s ease .55s; }
@keyframes ctaBloom{
  0%,100%{ box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(20,10,80,.5),
    0 2px 3px rgba(0,0,0,.7), 0 16px 36px -12px rgba(67,56,202,.85),
    0 0 72px -18px rgba(122,108,255,.7); }
  42%{ box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 4px rgba(20,10,80,.5),
    0 2px 3px rgba(0,0,0,.7), 0 30px 60px -14px rgba(67,56,202,1),
    0 0 150px -10px rgba(122,108,255,1); }
}


/* ============================================================
   SEAMS — sections are not slides, they are stages of a descent.
   Each junction is driven by scroll position (--p, 0 to 1) and
   uses a different physical idea, so the page keeps flowing
   without ever interrupting the reader.
   ============================================================ */
.thread{
  position:fixed; right:clamp(.9rem,2vw,1.9rem); top:50%;
  transform:translateY(-50%); z-index:70;
  width:1px; height:min(38vh,340px);
  background:rgba(122,108,255,.16);
  animation:rise 1.1s cubic-bezier(.16,1,.3,1) var(--nv-go) both;
}
.thread i{
  position:absolute; inset:0; transform-origin:top;
  transform:scaleY(var(--done,0));
  background:linear-gradient(180deg,var(--primary),rgba(122,108,255,.35));
  box-shadow:0 0 10px rgba(122,108,255,.7);
}
@media(max-width:900px){ .thread{ display:none; } }

/* 1 — DESCENT: the invitation rises out of the sphere itself */
.vision{
  margin-top:-13vh; z-index:2;
  border-radius:50% 50% 0 0 / 11vw 11vw 0 0;
  border-top:1px solid rgba(122,108,255,.30);
  box-shadow:0 -30px 90px -40px rgba(122,108,255,.55);
}
.hero-inner{
  opacity:calc(1 - var(--gone,0));
  transform:translateY(calc(var(--gone,0) * -60px));
}
.p-planet{ --swell:1; }

/* 2 — TIDE: the next stage floods up over the last */
.tide{
  position:absolute; left:0; right:0; top:-186px;
  width:100%; height:187px; display:block; z-index:2;
  filter:drop-shadow(0 -8px 34px rgba(122,108,255,.5));
}
.tide .crest{ fill:none; stroke:rgba(178,168,255,.95); stroke-width:2.2; }

/* 3 — CONDENSE: all that light collapses into a single point */
.condense{
  position:absolute; left:50%; top:0; z-index:1;
  width:min(120vw,1500px); aspect-ratio:1;
  transform:translate(-50%,-46%) scale(var(--cs,1));
  border-radius:50%; pointer-events:none;
  opacity:var(--co,0);
  background:radial-gradient(circle at center,
             rgba(214,210,255,.55), rgba(122,108,255,.24) 26%, transparent 60%);
}

/* 4 — RAILS: the light stretches out into the lines of the list */
.rails{
  position:absolute; left:0; right:0; top:0; height:34vh; z-index:1;
  pointer-events:none; display:flex; flex-direction:column; justify-content:space-around;
}
.rails i{
  display:block; height:1px; transform-origin:center;
  transform:scaleX(var(--rx,0));
  background:linear-gradient(90deg,transparent,rgba(122,108,255,.75),transparent);
  opacity:var(--ro,0);
}

/* 5 — FOLD: the passes tip up into place */
.tickets{
  transform-origin:50% 0;
  transform:perspective(1600px) rotateX(calc((1 - var(--p,1)) * 14deg));
  opacity:calc(.25 + var(--p,1) * .75);
}

/* 6 — SETTLE: the last stage resolves out of soft focus */
.close{
  filter:blur(calc((1 - var(--p,1)) * 12px));
  opacity:calc(.2 + var(--p,1) * .8);
  transform:scale(calc(.97 + var(--p,1) * .03));
}

/* ============================================================
   ENTRY MODAL — surfaces once per session, a while after arrival
   ============================================================ */
.entry-modal-overlay{
  position:fixed; inset:0; z-index:130;
  display:grid; place-items:center; padding:var(--pad);
  background:rgba(3,2,8,.80);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  transition:opacity .45s ease, visibility .45s ease;
}
.entry-modal-overlay.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.entry-modal{
  position:relative; width:min(780px,100%); text-align:center;
  padding:clamp(2.4rem,5vw,3.6rem);
  border:1px solid var(--rule); border-radius:28px;
  background:linear-gradient(180deg,#110E24 0%, #08060F 70%);
  box-shadow:0 60px 140px -50px rgba(67,56,202,.95);
  animation:modalIn .65s cubic-bezier(.16,1,.3,1) both;
}
@keyframes modalIn{
  from{ opacity:0; transform:translateY(26px) scale(.965) }
  to  { opacity:1; transform:none }
}
.entry-modal-close{
  position:absolute; top:1rem; right:1rem;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--rule); background:rgba(122,108,255,.06);
  color:var(--muted);
  transition:color .3s ease, border-color .3s ease, background .3s ease;
}
.entry-modal-close:hover{ color:#fff; border-color:var(--primary); background:rgba(122,108,255,.16); }
.entry-modal-close svg{ width:19px; height:19px; }
.entry-modal-lead{
  margin:0; font-weight:400;
  font-size:clamp(1.1rem,2.4vw,1.62rem); line-height:1.42;
  letter-spacing:-.01em; color:var(--tertiary);
}
.accent{ font-style:normal; color:var(--primary); }
.entry-modal-rule{ height:1px; background:var(--rule); margin:clamp(1.6rem,3vw,2.2rem) 0; }
.entry-modal-sub{ margin:0 0 clamp(1.8rem,3.5vw,2.4rem); color:var(--muted); font-size:.95rem; }
.entry-modal-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ============================================================
   VISION — centred, with the hero's sans/serif split
   ============================================================ */
.vision{ text-align:center; }
.vision .tag{ align-self:center; }
.vision .display, .vision .lede{ margin-left:auto; margin-right:auto; }
.display-mix{
  font-family:var(--font); font-weight:500;
  letter-spacing:-.028em; max-width:21ch;
}
.display-mix i{
  font-family:var(--serif); font-style:italic; font-weight:400;
  color:rgba(236,235,245,.60); letter-spacing:-.01em;
}
.display i{
  font-family:var(--serif); font-style:italic; font-weight:500;
  color:rgba(236,235,245,.55);
}
.vision .lede{ max-width:62ch; }

/* ============================================================
   THE OBJECT
   ============================================================ */
.knot{
  position:relative; width:min(620px,90vw);
  margin:clamp(2.5rem,7vh,5rem) auto 0;
  display:grid; place-items:center; padding-bottom:2rem;
}
.knot img{
  position:relative; z-index:2; display:block;
  width:min(42vw,370px); height:auto;
  filter:drop-shadow(0 0 55px rgba(122,108,255,.45));
  animation:knotSpin 54s linear infinite;
}
@keyframes knotSpin{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }
.knot-ring{
  position:absolute; left:50%; bottom:0; z-index:1;
  width:min(78vw,720px); height:120px;
  transform:translate(-50%,38%); pointer-events:none;
}
.knot-ring::before{
  content:""; position:absolute; inset:-80px; border-radius:50%;
  background:radial-gradient(ellipse at center,
             rgba(122,108,255,.52), rgba(67,56,202,.22) 46%, transparent 72%);
  filter:blur(34px);
}
.knot-ring::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,
    #7A6CFF 0deg, #A98CFF 70deg, #C6BCFF 140deg,
    #FFB27A 210deg, #7A6CFF 290deg, #7A6CFF 360deg);
  -webkit-mask-image:radial-gradient(ellipse at center, transparent 38%, #000 52%, #000 78%, transparent 92%);
  mask-image:radial-gradient(ellipse at center, transparent 38%, #000 52%, #000 78%, transparent 92%);
  filter:blur(3px); opacity:.9;
}

/* ============================================================
   SPEAKERS — one row, drifting left to right. Cards are
   placeholders: swap the copy in as names are confirmed.
   ============================================================ */
.speakers{
  position:relative; text-align:center;
  padding:clamp(4rem,12vh,8rem) 0;
  border-top:1px solid var(--rule); background:var(--lift);
}
.speakers > .tag,
.speakers > .display,
.speakers > .lede{ margin-left:auto; margin-right:auto; padding-inline:var(--pad); }
.speakers > .tag{ display:inline-flex; }
.marquee{
  margin-top:clamp(2.4rem,6vh,4rem); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marqueeR 48s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marqueeR{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } }
.marquee-set{ display:flex; gap:1.15rem; padding-right:1.15rem; flex-shrink:0; }
.spk{
  flex:none; width:232px; margin:0;
  padding:1.7rem 1.4rem 1.6rem;
  border:1px solid var(--rule); border-radius:20px;
  background:linear-gradient(180deg, rgba(122,108,255,.055), rgba(122,108,255,.015));
  transition:border-color .4s ease, transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.spk:hover{
  border-color:rgba(122,108,255,.5); transform:translateY(-7px);
  box-shadow:0 28px 60px -32px rgba(67,56,202,.95);
}
.spk-face{
  width:78px; height:78px; border-radius:50%; margin:0 auto 1.15rem;
  border:1px solid var(--rule); position:relative; overflow:hidden;
  background:radial-gradient(circle at 40% 32%, rgba(122,108,255,.34), rgba(20,16,48,.9) 62%);
}
.spk-face::after{
  content:""; position:absolute; left:50%; top:56%;
  width:52%; height:52%; transform:translateX(-50%);
  border-radius:50% 50% 0 0; background:rgba(122,108,255,.30);
  box-shadow:0 -26px 0 -12px rgba(122,108,255,.30);
}
.spk h3{ margin:0 0 .35rem; font-size:1rem; font-weight:500; color:var(--tertiary); }
.spk p{ margin:0; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   PHOTO WALL — hovering one tile widens it, the rest give way
   ============================================================ */
.wall{
  position:relative; text-align:center;
  padding:clamp(4rem,12vh,8rem) var(--pad);
  border-top:1px solid var(--rule); background:var(--black);
}
.wall .display{ margin-left:auto; margin-right:auto; }
.pw{ display:grid; gap:10px; margin-top:clamp(2.4rem,6vh,4rem); }
/* fixed row height: widening a tile must change its width only,
   or aspect-ratio would blow the row height out with it */
.pw-row{ display:flex; gap:10px; height:clamp(132px,15.5vw,215px); }
.pw-item{
  position:relative; margin:0; min-width:0;
  flex:1 1 0; height:100%;
  border-radius:18px; overflow:hidden; cursor:pointer;
  transition:flex-grow .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease;
}
.pw:hover .pw-item{ flex-grow:.84; }
.pw .pw-item:hover{ flex-grow:2.3; box-shadow:0 34px 70px -34px rgba(67,56,202,1); }
.pw-ph{
  position:absolute; inset:0;
  background:
    radial-gradient(130% 95% at 28% 18%, rgba(122,108,255,.42), transparent 62%),
    linear-gradient(152deg, #1B1740 0%, #0B0919 58%, #07060E 100%);
  filter:hue-rotate(calc(var(--h,0) * 1deg)) brightness(.82);
  transform:scale(1);
  transition:transform .65s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.pw-item:hover .pw-ph{ transform:scale(1.09); filter:hue-rotate(calc(var(--h,0) * 1deg)) brightness(1.06); }
.pw-item::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(160deg, rgba(70,48,200,.55), rgba(4,3,10,.86));
  opacity:.6; transition:opacity .5s ease;
}
.pw-item:hover::after{ opacity:.1; }
.pw-item figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1rem .95rem .85rem; text-align:left;
  font-size:.74rem; font-weight:500; line-height:1.3; color:#fff;
  background:linear-gradient(0deg, rgba(4,3,10,.94), transparent);
  opacity:.72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity .45s ease, font-size .45s ease, padding .45s ease;
}
.pw-item:hover figcaption{ opacity:1; font-size:1rem; padding:1.35rem 1.15rem 1.05rem; }
@media(max-width:760px){
  .pw-row{ flex-wrap:wrap; height:auto; }
  .pw-item{ flex:1 1 30%; height:auto; aspect-ratio:1/1; }
  .pw:hover .pw-item, .pw .pw-item:hover{ flex-grow:1; }
}

/* arrival for the two new galleries */
html.js .pw-item, html.js .spk{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1),
             flex-grow .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease;
  transition-delay:calc(var(--i,0) * 70ms), calc(var(--i,0) * 70ms), 0s, 0s;
}
html.js .live .pw-item, html.js .live .spk{ opacity:1; transform:none; }

/* ---------- wave ribbons behind the speaker band ---------- */
.speakers{ isolation:isolate; }
.wave-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.55;
}
/* a scrim between the ribbons and the type — the heading is white and the
   ribbons carry near-white highlights, so they need separating */
.speakers::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(62% 44% at 50% 36%,
             rgba(5,4,12,.88), rgba(5,4,12,.5) 54%, transparent 78%);
}
.speakers > *:not(.wave-canvas){ position:relative; z-index:2; }

/* ---------- ambient drift, so the lower half of the page keeps breathing ---------- */
.aura{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aura i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(70px); opacity:.5;
}
.aura i:nth-child(1){
  left:-12%; top:-10%; width:52vw; height:52vw;
  background:radial-gradient(circle, rgba(122,108,255,.30), transparent 68%);
  animation:drift1 34s ease-in-out infinite alternate;
}
.aura i:nth-child(2){
  right:-16%; top:30%; width:46vw; height:46vw;
  background:radial-gradient(circle, rgba(67,56,202,.34), transparent 68%);
  animation:drift2 44s ease-in-out infinite alternate;
}
.aura i:nth-child(3){
  left:32%; bottom:-18%; width:40vw; height:40vw;
  background:radial-gradient(circle, rgba(255,178,122,.13), transparent 66%);
  animation:drift3 52s ease-in-out infinite alternate;
}
@keyframes drift1{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(14vw,8vh,0) scale(1.18) } }
@keyframes drift2{ from{ transform:translate3d(0,0,0) scale(1.1) } to{ transform:translate3d(-12vw,-10vh,0) scale(.9) } }
@keyframes drift3{ from{ transform:translate3d(0,0,0) scale(.95) } to{ transform:translate3d(-9vw,-7vh,0) scale(1.25) } }
.wall > *:not(.aura),
.tickets > *:not(.aura),
.close > *:not(.aura){ position:relative; z-index:2; }

/* ---------- real photos in the wall ---------- */
.pw-item img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
  filter:saturate(.85) brightness(.78);
  transform:scale(1);
  transition:transform .65s cubic-bezier(.16,1,.3,1), filter .5s ease;
}
.pw-item:hover img{ transform:scale(1.09); filter:saturate(1.05) brightness(1.04); }

/* ---------- three facts under the wall ---------- */
.facts{
  display:grid; grid-template-columns:1fr; gap:2.2rem 0;
  max-width:1180px; margin:clamp(3rem,8vh,5.5rem) auto 0;
  text-align:left;
}
@media(min-width:760px){ .facts{ grid-template-columns:repeat(3,1fr); } }
.fact{ padding:0 clamp(1rem,2.5vw,2.4rem); }
@media(min-width:760px){ .fact + .fact{ border-left:1px solid var(--rule); } }
.fact b{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:clamp(2.4rem,5.4vw,4rem); line-height:1;
  letter-spacing:-.01em; color:#fff;
}
.fact b s{ text-decoration:none; color:var(--primary); }
.fact > span{ display:block; margin-top:.85rem; font-size:.9rem; color:var(--muted); }
.fact em{
  display:block; margin-top:.5rem; font-style:normal;
  font-size:.72rem; letter-spacing:.12em; color:var(--dim);
}
html.js .fact b{
  opacity:0; transform:translateY(28px);
  transition:opacity .6s ease, transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 110ms + 120ms);
}
html.js .wall.live .fact b{ opacity:1; transform:none; }

/* ============================================================
   PROGRAMME — a horizontal timeline: one rule drawn left to
   right, both strands of the event hanging beneath it.
   ============================================================ */
.programme{
  position:relative; text-align:center;
  padding:clamp(4rem,12vh,8rem) var(--pad);
  border-top:1px solid var(--rule); background:var(--black);
}
.programme > *:not(.aura){ position:relative; z-index:2; }
.programme .display, .programme .lede{ margin-left:auto; margin-right:auto; }
.plan-note{
  margin:1.6rem auto 0; max-width:52ch;
  font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
}
.tl{ position:relative; max-width:1120px; margin:clamp(3rem,7vh,4.5rem) auto 0; padding-top:3.4rem; }
.tl-line{ position:absolute; left:0; right:0; top:0; height:1px; background:var(--rule); }
.tl-line i{
  position:absolute; inset:0; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg, rgba(122,108,255,.25), var(--primary) 55%, rgba(122,108,255,.3));
  box-shadow:0 0 14px rgba(122,108,255,.75);
  transition:transform 1.5s cubic-bezier(.16,1,.3,1) .25s;
}
html.js .programme.live .tl-line i{ transform:scaleX(1); }

.tl-items{ display:grid; gap:2rem; grid-template-columns:1fr; }
@media(min-width:820px){ .tl-items{ grid-template-columns:repeat(2,1fr); gap:2.6rem; } }
.tl-item{ position:relative; }
.tl-item::before{
  content:""; position:absolute; left:50%; top:-3.4rem; width:1px; height:3.4rem;
  transform:translateX(-.5px) scaleY(0); transform-origin:top;
  background:linear-gradient(180deg, var(--primary), rgba(122,108,255,.12));
  transition:transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 220ms + 900ms);
}
html.js .programme.live .tl-item::before{ transform:translateX(-.5px) scaleY(1); }
.tl-dot{
  position:absolute; left:50%; top:-3.4rem;
  width:11px; height:11px; border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:var(--primary);
  box-shadow:0 0 0 5px rgba(122,108,255,.13), 0 0 20px rgba(122,108,255,.9);
  transition:transform .6s cubic-bezier(.34,1.5,.5,1);
  transition-delay:calc(var(--i,0) * 220ms + 780ms);
}
html.js .programme.live .tl-dot{ transform:translate(-50%,-50%) scale(1); }

/* stacked into one column there is no horizontal line for the second
   marker to hang from, so the connectors step aside */
@media(max-width:819px){
  .tl{ padding-top:2.6rem; }
  .tl-dot, .tl-item::before{ display:none; }
}
.tl-card{
  padding:2.3rem 2rem 2.1rem; text-align:left;
  border:1px solid var(--rule); border-radius:20px;
  background:linear-gradient(180deg, rgba(122,108,255,.05), rgba(122,108,255,.015));
  transition:border-color .45s ease, transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.tl-card:hover{
  border-color:rgba(122,108,255,.45); transform:translateY(-5px);
  box-shadow:0 28px 62px -32px rgba(67,56,202,.95);
}
.tl-card .card-ico{ margin:0 0 1.5rem; }
.tl-card h3{ margin:0 0 .8rem; font-size:1.3rem; font-weight:500; letter-spacing:-.01em; color:var(--tertiary); }
.tl-card > p{ margin:0 0 1.5rem; color:var(--muted); font-size:.94rem; line-height:1.65; }
.tl-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.tl-card li{ display:flex; gap:.75rem; align-items:flex-start; color:var(--muted); font-size:.88rem; }
.tl-card li::before{ content:""; flex:none; width:.34rem; height:.34rem; margin-top:.55em; border-radius:50%; background:var(--primary); }
.venue{
  margin:1.6rem 0 0; padding-top:1.2rem; border-top:1px solid var(--rule);
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
}

@media (prefers-reduced-motion: reduce){
  .boot{ display:none !important; }
  html{ scroll-behavior:auto; }
  .hero-glow,.hero-head,.hero-sub,.hero-eyebrow,.cue,
  .hero-planet,.count,.hero-actions{ animation:none; }
  .hero-horizon{ animation:none; transform:translateY(calc(23svh - 1px)); }
  .hero-flare{ animation:none; opacity:0; }
  .hero-head .w{ animation:none; opacity:1; transform:none; filter:none; }
  .hero-stars{ animation:none; }
  .hero-stars i{ animation:none; opacity:.7; }
  .p-stars,.p-planet{ transform:none; }
  .orbit-rings,.orbit-rings i{ animation:none; }
  html.js .nav{ animation:none; }
  .manifest-track{ height:auto; }
  .manifest-panel{ position:static; min-height:0; }
  .reveal w{ color:var(--tertiary); transition:none; }
  .cta,.cta-sm,.ghost,.card,.pass{ transition:none; }
  html.js [data-lift]{ opacity:1; transform:none; transition:none; }
  html.js [data-warm]{ color:var(--tertiary); }
  html.js section[data-seam] .display,
  html.js .vision .card,
  html.js .tickets .pass,
  html.js .stats .stat b,
  html.js .knot{ opacity:1; transform:none; filter:none; transition:none; }
  html.js .stats-wrap .orbit-rings{ animation:none; }
  .vision{ margin-top:0; border-radius:0; }
  .hero-inner{ opacity:1; transform:none; }
  .tickets,.close{ transform:none; opacity:1; filter:none; }
  .condense,.rails,.tide{ display:none; }
  .knot img{ animation:none; }
  .marquee-track{ animation:none; }
  .entry-modal{ animation:none; }
  html.js .pw-item, html.js .spk{ opacity:1; transform:none; transition:none; }
  html.js .fact b{ opacity:1; transform:none; transition:none; }
  .aura i{ animation:none; }
  html.js .tl-line i{ transform:scaleX(1); transition:none; }
  html.js .tl-item::before{ transform:translateX(-.5px) scaleY(1); transition:none; }
  html.js .tl-dot{ transform:translate(-50%,-50%) scale(1); transition:none; }
}