/* ==================================================================
   MEGA-SCOPES :: home only
   The portal fall, the route, the ship. Loaded on / and nowhere else,
   so the rest of the site is not paying for it.
   ================================================================== */

/* ---------------- starfield, three parallax layers ---------------- */
.sky{position:fixed;inset:-20%;z-index:0;pointer-events:none}
.sky i{position:absolute;inset:0;display:block;background-repeat:repeat;will-change:transform}
.sky .l1{background-image:
  radial-gradient(1.4px 1.4px at 12% 18%,#dff1fa,transparent 45%),
  radial-gradient(1.2px 1.2px at 63% 42%,#b9e6f7,transparent 45%),
  radial-gradient(1.6px 1.6px at 84% 71%,#fff,transparent 45%),
  radial-gradient(1.1px 1.1px at 31% 77%,#a9dcef,transparent 45%);
  background-size:520px 520px;opacity:.9}
.sky .l2{background-image:
  radial-gradient(1.1px 1.1px at 22% 34%,#cfe9f5,transparent 45%),
  radial-gradient(1px 1px at 71% 12%,#9fd8ea,transparent 45%),
  radial-gradient(1.3px 1.3px at 47% 88%,#e6f6ff,transparent 45%);
  background-size:300px 300px;opacity:.55}
.sky .l3{background-image:
  radial-gradient(.9px .9px at 8% 62%,#8fc9dd,transparent 45%),
  radial-gradient(.9px .9px at 55% 25%,#a9dcef,transparent 45%);
  background-size:180px 180px;opacity:.35}
.nebula{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 44% at 18% 22%,rgba(155,123,255,.16),transparent 62%),
             radial-gradient(ellipse 54% 40% at 84% 68%,rgba(34,211,238,.13),transparent 62%),
             radial-gradient(ellipse 40% 30% at 60% 92%,rgba(255,45,61,.1),transparent 64%)}
.warpfield{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .35s ease-out;overflow:hidden}
.warpfield span{position:absolute;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(207,233,245,.95),transparent)}

/* ---------------- ACT 1 :: the portal ---------------- */
.act1{position:relative;z-index:10;height:190vh}
.act1 .stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}

/* Nothing in the portal may be resolution-locked: it is scaled 1x to 17x.
   No will-change:transform (that pins one rasterisation and replays it at
   the wrong scale) and no filter:blur() (its render surface is fixed
   resolution and magnifies into blocky wedges). The soft ring is a radial
   mask over a conic gradient, both painted per raster at any scale. */
.portal{position:absolute;width:min(56vmin,440px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(circle,rgba(34,211,238,.16) 0%,
    rgba(155,123,255,.11) 46%,transparent 72%)}
.portal .disk{position:absolute;inset:-32%;border-radius:50%;
  background:conic-gradient(from 0deg,
    rgba(155,123,255,0) 0deg, rgba(34,211,238,.40) 38deg,
    rgba(34,211,238,.70) 70deg, rgba(120,230,170,.66) 102deg,
    rgba(255,212,0,.78) 134deg, rgba(255,159,28,.74) 170deg,
    rgba(255,45,61,.72) 206deg, rgba(214,80,160,.58) 242deg,
    rgba(155,123,255,.60) 280deg, rgba(90,150,255,.36) 322deg,
    rgba(34,211,238,0) 360deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 28%,#000 52%,#000 66%,transparent 93%);
          mask-image:radial-gradient(closest-side,transparent 28%,#000 52%,#000 66%,transparent 93%);
  animation:spinDisk 9s linear infinite}
.portal .disk2{position:absolute;inset:-12%;border-radius:50%;
  background:conic-gradient(from 180deg,
    rgba(255,45,61,0) 0deg, rgba(255,159,28,.68) 70deg,
    rgba(255,212,0,.58) 120deg, rgba(34,211,238,.80) 200deg,
    rgba(120,190,255,.48) 280deg, rgba(255,45,61,0) 360deg);
  -webkit-mask-image:radial-gradient(closest-side,transparent 32%,#000 56%,#000 72%,transparent 96%);
          mask-image:radial-gradient(closest-side,transparent 32%,#000 56%,#000 72%,transparent 96%);
  animation:spinDisk 5.2s linear infinite reverse;opacity:.9}
@keyframes spinDisk{to{transform:rotate(360deg)}}
.portal .maw{position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle,#000 0 52%,rgba(0,0,0,.85) 62%,transparent 78%);
  box-shadow:inset 0 0 70px 22px #000}
.portal .rim{position:absolute;inset:6%;border-radius:50%;
  border:1.5px solid rgba(234,242,247,.28);
  box-shadow:0 0 40px rgba(34,211,238,.4),inset 0 0 40px rgba(155,123,255,.35)}
.portal .ripple{position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(34,211,238,.5);animation:rip 3.4s ease-out infinite}
.portal .ripple.d2{animation-delay:1.7s}
@keyframes rip{0%{transform:scale(.85);opacity:.75}100%{transform:scale(1.9);opacity:0}}

.act1 .copy{position:relative;z-index:3;text-align:center;padding:0 var(--gut)}
.act1 h1{font-family:var(--disp);font-size:clamp(40px,9.6vw,120px);line-height:.86;
  margin:0;text-transform:uppercase;
  text-shadow:0 0 34px rgba(3,5,11,.95),0 0 90px rgba(3,5,11,.9)}
.act1 h1 .c{color:var(--cyan)}.act1 h1 .r{color:var(--red)}
.act1 .kick{margin:0 0 16px;color:var(--dim)}
.act1 .lead{max-width:46ch;margin:18px auto 26px;color:#c6d6e3;font-size:16px;
  text-shadow:0 2px 18px rgba(3,5,11,.95)}
.act1 .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.scrollcue{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dim);z-index:4;text-align:center}
.scrollcue .arrow{display:block;margin:8px auto 0;width:1px;height:34px;
  background:linear-gradient(var(--cyan),transparent);animation:fall 1.8s ease-in-out infinite}
@keyframes fall{0%{opacity:0;transform:translateY(-10px)}40%{opacity:1}
  100%{opacity:0;transform:translateY(10px)}}

/* ---------------- ACT 2 :: the route ---------------- */
.journey{position:relative;z-index:10;padding:0 0 10vh}
#route{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  pointer-events:none;z-index:1}
#routeLine{fill:none;stroke:rgba(129,149,169,.22);stroke-width:2;
  stroke-dasharray:9 11;stroke-linecap:round}
#routeDone{fill:none;stroke:url(#trail);stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(34,211,238,.75))}

.ship{position:absolute;left:0;top:0;z-index:6;width:104px;height:203px;
  margin:-101px 0 0 -52px;pointer-events:none;will-change:transform;
  display:grid;place-items:center}
.ship .aura{position:absolute;width:132%;height:76%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(34,211,238,.34),transparent 66%);
  animation:aura 2.4s ease-in-out infinite}
@keyframes aura{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.85;transform:scale(1.16)}}
.ship .hull{position:relative;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 0 10px rgba(34,211,238,.75)) drop-shadow(0 0 30px rgba(155,123,255,.45))}
/* One flame per turbine. In the art (760x1482, nose right) the two exhaust
   nozzles sit at x=16%, y=44.5% and y=54.7%. The old single flame was offset
   twice (translate plus translateY in the keyframes), which parked it on one
   engine and made the ship look like it was flying on the right burner only. */
.ship .burn{position:absolute;left:-20%;width:38%;height:10%;translate:0 -50%;
  border-radius:50%;filter:blur(2.5px);transform-origin:100% 50%;
  background:radial-gradient(ellipse at 100% 50%,#fff 0,rgba(255,212,0,.95) 16%,
             rgba(255,159,28,.85) 38%,rgba(255,45,61,.35) 62%,transparent 74%);
  animation:burn .16s steps(2,end) infinite}
.ship .burn.b1{top:44.5%}
.ship .burn.b2{top:54.7%;animation-delay:-.08s;animation-duration:.19s}
@keyframes burn{0%{transform:scaleX(1) scaleY(1)}100%{transform:scaleX(1.4) scaleY(.86)}}

.stop{position:relative;z-index:4;min-height:96vh;display:grid;align-items:center;
  grid-template-columns:1fr 1fr;gap:clamp(20px,5vw,70px);
  max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.stop.right{direction:rtl}.stop.right>*{direction:ltr}
.world{display:grid;place-items:center;position:relative}
.planet{position:relative;width:clamp(160px,26vw,280px);aspect-ratio:1;border-radius:50%;
  display:block;text-decoration:none}
.planet .skin{position:absolute;inset:0;border-radius:50%;overflow:hidden;
  border:1.5px solid rgba(234,242,247,.22);
  box-shadow:inset -18px -14px 44px rgba(0,0,0,.82);
  transition:box-shadow .35s,border-color .35s}
.planet .skin img,.planet .skin picture{width:100%;height:100%;display:block}
.planet .skin img{object-fit:cover;filter:saturate(1.08) contrast(1.04);
  animation:rotSkin 44s linear infinite;transform-origin:center}
@keyframes rotSkin{to{transform:rotate(360deg) scale(1.16)}}
.planet .skin::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.2),transparent 46%),
             radial-gradient(circle at 74% 76%,rgba(0,0,0,.62),transparent 58%)}
.planet .atm{position:absolute;inset:-7%;border-radius:50%;pointer-events:none;
  box-shadow:0 0 46px 8px rgba(34,211,238,.2)}
/* Orbits on every world. Each stop sets its own --tilt so the six planets
   don't look stamped from one mould; the rings precess slowly and a moon
   travels the inner ring. The moon's arm spins inside a squashed, tilted
   frame, which is what turns a circle into the ellipse of the ring. */
.stop{--tilt:-19deg}
.stop:nth-of-type(2){--tilt:14deg}
.stop:nth-of-type(3){--tilt:-8deg}
.stop:nth-of-type(4){--tilt:22deg}
.stop:nth-of-type(5){--tilt:-26deg}
.stop:nth-of-type(6){--tilt:9deg}
.planet .ringA,.planet .ringB{position:absolute;left:50%;top:50%;border-radius:50%;
  border:1.5px solid rgba(255,212,0,.42);pointer-events:none;
  transform:translate(-50%,-50%) rotate(var(--tilt));
  animation:precess 14s ease-in-out infinite alternate}
.planet .ringB{animation-duration:19s;animation-direction:alternate-reverse}
@keyframes precess{to{transform:translate(-50%,-50%) rotate(calc(var(--tilt) + 7deg))}}
.planet .orbit{position:absolute;left:50%;top:50%;width:172%;aspect-ratio:1;pointer-events:none;
  transform:translate(-50%,-50%) rotate(var(--tilt)) scaleY(.29);z-index:4}
.planet .orbit .arm{position:absolute;inset:0;animation:spinDisk 11s linear infinite}
.planet .orbit .moon{position:absolute;left:50%;top:-5px;width:10px;height:10px;margin-left:-5px;
  border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#ffd400 55%,#b8860b);
  box-shadow:0 0 12px rgba(255,212,0,.9);transform:scaleY(3.45);
  animation:moonfix 11s linear infinite}
/* undo the arm's rotation before un-squashing, or the moon smears into a streak */
@keyframes moonfix{from{transform:rotate(0deg) scaleY(3.45)}to{transform:rotate(-360deg) scaleY(3.45)}}
.stop:nth-of-type(even) .planet .orbit .arm,
.stop:nth-of-type(even) .planet .orbit .moon{animation-direction:reverse;animation-duration:13s}
@media (prefers-reduced-motion:reduce){
  .planet .ringA,.planet .ringB,.planet .orbit .arm,.planet .orbit .moon{animation:none}
}
.planet .ringA{width:172%;height:50%}
.planet .ringB{width:200%;height:60%;border-color:rgba(255,212,0,.18)}
.planet:hover .skin,.planet:focus-visible .skin{border-color:var(--cyan);
  box-shadow:inset -18px -14px 44px rgba(0,0,0,.7),0 0 44px rgba(34,211,238,.55)}
.planet .num{position:absolute;left:50%;top:-14px;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--cyan);color:var(--cyan);
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;padding:4px 11px;
  border-radius:99px;white-space:nowrap;z-index:3}
.stop.hot .planet .skin{border-color:rgba(255,45,61,.6);
  box-shadow:inset -18px -14px 44px rgba(0,0,0,.72),0 0 40px rgba(255,45,61,.45)}
.stop.hot .planet .num{border-color:var(--red);color:var(--red)}
.ping{position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%;
  border:2px solid rgba(255,45,61,.65);transform:translate(-50%,-50%);pointer-events:none;
  animation:ping 2.6s cubic-bezier(0,.6,.4,1) infinite}
/* the red ping marks the next live show; the other worlds pulse cyan, slower */
.stop:not(.hot) .ping{border-color:rgba(34,211,238,.5);animation-duration:3.4s}
@keyframes ping{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}
  100%{transform:translate(-50%,-50%) scale(1.85);opacity:0}}

.stopcard{opacity:0;transform:translateY(46px);
  transition:opacity .75s ease,transform .75s var(--smooth)}
.stop.in .stopcard{opacity:1;transform:none}
.strip{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.strip img,.strip picture{width:74px;height:74px}
.strip img{object-fit:cover;border-radius:6px;border:1px solid var(--line);transition:.25s}
.strip a:hover img{transform:translateY(-5px) scale(1.06);border-color:var(--cyan)}

/* flight HUD */
.hud{position:fixed;left:18px;bottom:18px;z-index:30;border:1px solid var(--line);
  background:rgba(7,13,26,.86);border-radius:8px;padding:11px 14px;font-family:var(--mono);
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  min-width:184px;opacity:0;transform:translateY(10px);transition:.4s;pointer-events:none}
.hud.on{opacity:1;transform:none}
.hud b{display:block;color:var(--cyan);font-size:11px;letter-spacing:.18em;margin-bottom:6px}
.hud .bar{height:3px;background:var(--line);border-radius:2px;margin-top:8px;overflow:hidden}
.hud .bar i{display:block;height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--yellow))}

@media (prefers-reduced-motion:reduce){
  .act1{height:auto}.act1 .stick{position:static;height:auto;padding:60px 0}
  .ship,.warpfield{display:none}
  .stopcard{opacity:1!important;transform:none!important}
  .stop{min-height:auto;padding-top:40px;padding-bottom:40px}
}
@media(max-width:860px){
  .stop{grid-template-columns:1fr;min-height:auto;padding:52px var(--gut);gap:22px}
  .stop.right{direction:ltr}
  .ship{width:76px;height:148px;margin:-74px 0 0 -38px}
  .hud{display:none}
  .act1{height:150vh}
}
/* ---- phones: the route snakes between planets that alternate sides, and the
   ship flies BEHIND the text and show cards instead of over them ---- */
@media(max-width:760px){
  .act1 .copy{margin-top:-6vh}
  .stop{padding:40px var(--gut) 34px;gap:26px}
  .stop .world{place-items:center start;padding:18px 0 0 2vw}
  .stop.right .world{place-items:center end;padding:18px 2vw 0 0}
  .planet{width:min(58vw,260px)}
  .ship{z-index:3;width:62px;height:121px;margin:-60px 0 0 -31px}
  .stopcard{position:relative;z-index:5}
  .stopcard .lead{text-shadow:0 1px 12px #03050b,0 0 2px #03050b}
  .stopcard .strip{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;
    -webkit-overflow-scrolling:touch}
  .stopcard .strip a{scroll-snap-align:start;flex:none}
  /* the home page is a preview: three dates, then All dates */
  #stop-sightings [data-shows] > .gig:nth-child(n+4){display:none}
  .stopcard p:last-child{display:flex;flex-wrap:wrap;gap:10px}
  .stopcard p:last-child .ghost{margin-left:0!important}
  .stopcard .ghost{background:rgba(3,5,11,.92)}
}