/* Spectra: the arrival's set pieces. The finale (dark building, spectrum torch, a price strip and Book) and,
   below the tickets, the shop shelf. Reads the tokens on :root from css/site.css. Transform + opacity only.
   Idle loops (icon drift, merch bob) run only while their piece is on screen: .is-live is toggled by finale.js. */

/* ---------- the finale frame: one screen, black ---------- */
.fn{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;background:#000;color:var(--ink);overflow:hidden;
  display:grid;grid-template-rows:1fr auto auto auto;justify-items:center;
  padding:calc(var(--head) + var(--sat) + 8px) calc(var(--gut) + var(--sar)) calc(18px + var(--sab)) calc(var(--gut) + var(--sal))}
.fn-host{align-self:center;margin-top:clamp(0px,4.5vh,40px);display:flex;flex-direction:column;align-items:center;width:100%;min-height:0}

.fn-bg{position:absolute;inset:0;pointer-events:none;z-index:-1}
.fn-icon{display:none !important;position:absolute;width:clamp(90px,14vw,220px);height:auto;opacity:.12;filter:saturate(0);animation:fn-drift 26s ease-in-out infinite;animation-play-state:paused}
.fn.is-live .fn-icon{animation-play-state:running}
.fn-icon-a{top:12%;left:7%}
.fn-icon-b{bottom:20%;right:8%;animation-duration:31s;animation-delay:-9s}
.fn-icon-c{top:18%;right:15%;width:clamp(70px,10vw,160px);animation-duration:24s;animation-delay:-15s}
@keyframes fn-drift{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(0,-18px,0) rotate(3deg)}}

.fn-mark-wrap{position:relative;display:flex;justify-content:center}
.fn-glow{position:absolute;left:50%;top:50%;width:150%;height:150%;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(156,146,242,.15),rgba(207,153,211,.05) 55%,transparent 78%);opacity:0;transition:opacity 1.1s var(--ease)}
.fn.is-seen .fn-glow{opacity:1}
.fn-mark{position:relative;aspect-ratio:570.7/324.9;width:clamp(240px,min(46vw,46vh),680px)}
.fn-mark-dark{--lk-base:linear-gradient(180deg,#33333a,#1b1b20);background:var(--lk-base)}   /* unlit lockup: dark grey on black */
.fn-mark-color{opacity:0;transition:opacity .5s var(--ease);
  -webkit-mask-image:radial-gradient(circle at var(--fn-tx,50%) var(--fn-ty,50%),#000 0,#000 calc(var(--fn-tr,0)*1%),transparent calc((var(--fn-tr,0) + 26)*1%));
  mask-image:radial-gradient(circle at var(--fn-tx,50%) var(--fn-ty,50%),#000 0,#000 calc(var(--fn-tr,0)*1%),transparent calc((var(--fn-tr,0) + 26)*1%))}
.fn.is-lit .fn-mark-color{opacity:1}
.fn-pit{width:100%;height:clamp(92px,11vh,104px)}
/* the Vortex pit: a canvas of glossy balls behind the lockup, a transparent hit area over the bowl only (touch-action:none there, the rest of the page keeps scrolling) */
.fn-pit-cv{position:absolute;left:0;top:0;pointer-events:none;opacity:0;transition:opacity 1.1s var(--ease)}
.fn.is-seen .fn-pit-cv{opacity:1}
.fn-pit-hit{position:absolute;touch-action:none}

.fn-copy{text-align:center;margin-top:clamp(18px,4vh,40px);max-width:62ch}
.fn-copy h2{font-family:var(--sans);font-weight:300;font-size:clamp(30px,3.6vw,52px);line-height:1.05;letter-spacing:-.01em;margin:0;color:var(--ink)}
.fn-sub{margin:12px 0 0;font-size:clamp(16px,1.2vw,18px);color:var(--soft)}

/* the price strip: both prices and Book, above the fold */
.fn-strip{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 28px;margin-top:clamp(20px,4vh,40px);
  padding-top:clamp(16px,2.6vh,24px);border-top:1px solid var(--line);width:min(100%,720px)}
.fs-p{margin:0;display:flex;align-items:baseline;gap:10px}
.fs-k{font-family:var(--mono);font-stretch:62%;font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--soft)}
.fs-a{font-family:var(--serif);font-stretch:125%;font-weight:800;font-size:clamp(22px,2vw,28px);line-height:1;font-variant-numeric:tabular-nums;
  background:var(--silver-type);-webkit-background-clip:text;background-clip:text;color:transparent}
.fs-gst{margin:0;font-size:14px;color:var(--soft)}
.fs-cta{min-height:48px;padding:0 24px;font-size:16px}

/* the cue down to tickets */
.fn-cue{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:clamp(14px,3vh,30px);min-height:44px;color:var(--soft);text-decoration:none;font-size:15px}
@media (hover:hover){.fn-cue:hover{color:var(--ink)}}
.fn-cue i{display:block;width:1px;height:26px;background:linear-gradient(currentColor,transparent);transform-origin:top;animation:drip 2.2s cubic-bezier(.6,0,.2,1) infinite;animation-play-state:paused}
.fn.is-live .fn-cue i{animation-play-state:running}

/* the plain page: no forced full-screen frame, the building is a section like any other */
html:not(.fall) .fn{min-height:0;padding-top:clamp(64px,10vh,110px);border-top:1px solid var(--line)}

/* ---------- the shop shelf ---------- */
.fs-shelf{position:relative}
.fs-row-wrap{--hz:62%;position:relative;height:clamp(230px,min(28vw,40vh),380px);overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(252,252,252,.3) 18%,rgba(252,252,252,.4) 50%,rgba(252,252,252,.3) 82%,transparent) 0 var(--hz)/100% 1px no-repeat}
.fn-row{position:absolute;inset:0;list-style:none;margin:0;padding:0;touch-action:pan-y pinch-zoom}
.fn-item{position:absolute;left:50%;bottom:calc(100% - var(--hz) + 6px);margin:0;--fn-x:0px;--fn-s:1;--fn-op:1;transform-origin:50% 100%;
  transform:translate3d(calc(-50% + var(--fn-x)),0,0) scale(var(--fn-s));opacity:var(--fn-op);
  transition:transform .7s var(--ease),opacity .7s var(--ease);z-index:1;pointer-events:none}
.fn-item.fn-no-anim{transition:none}
.fn-item[data-slot="0"]{z-index:5}
.fn-item[data-fn-visible="1"]{pointer-events:auto}
.fn-item-btn{appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;padding:6px;font:inherit;color:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;width:clamp(120px,min(15vw,22vh),220px);padding-bottom:0;-webkit-tap-highlight-color:transparent}
.fn-item-btn:focus-visible{outline-offset:6px}
.fn-fig{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;
  animation:fn-bob 4.6s ease-in-out infinite;animation-delay:var(--fn-delay,0s);animation-play-state:paused;
  transition:filter .3s var(--ease);filter:brightness(.8)}
.fs-shelf.is-live .fn-fig{animation-play-state:running}
.fn-item[data-slot="0"] .fn-fig,.fn-item-btn:focus-visible .fn-fig{filter:brightness(1.05)}@media (hover:hover){.fn-item-btn:hover .fn-fig{filter:brightness(1.05)}}
@keyframes fn-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.fn-photo{display:block;width:auto;max-width:100%;height:auto;max-height:clamp(110px,min(14vw,20vh),200px);object-fit:contain}
.fn-reflection{position:absolute;top:calc(100% + 12px);left:50%;width:auto;max-width:100%;height:auto;max-height:clamp(110px,min(14vw,20vh),200px);
  transform:translateX(-50%) scaleY(-1);opacity:.2;pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 42%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 42%)}
.fn-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.fs-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
.fs-step{appearance:none;background:none;border:0;padding:0;width:44px;height:44px;display:grid;place-items:center;color:var(--soft);cursor:pointer;transition:color .15s}
@media (hover:hover){.fs-step:hover{color:var(--ink)}}
.fs-step svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.fs-now{margin:0;min-width:16ch;text-align:center;font-size:16px;color:var(--ink)}

/* ---------- detail dialog ---------- */
.fn-dialog{border:0;padding:0;margin:auto;width:min(560px,92vw);max-height:86vh;background:var(--raise);color:var(--ink);
  box-shadow:0 0 0 1px var(--line);opacity:0;transform:var(--fn-from,translate(0,0) scale(.4));
  transition:opacity .38s var(--ease),transform .38s var(--ease)}
.fn-dialog::backdrop{background:rgba(0,0,0,.78);opacity:0;transition:opacity .38s var(--ease)}
.fn-dialog.is-open{opacity:1;transform:translate(0,0) scale(1)}
.fn-dialog.is-open::backdrop{opacity:1}
.fn-dialog-inner{position:relative;padding:clamp(20px,4vw,36px)}
.fn-dialog-close{appearance:none;background:none;border:0;padding:0;position:absolute;top:8px;right:8px;z-index:2;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;color:var(--soft)}
@media (hover:hover){.fn-dialog-close:hover{color:var(--ink)}}
.fn-dialog-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.fn-dialog-photo-wrap{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;margin-bottom:clamp(16px,3vw,26px);
  background:radial-gradient(closest-side,rgba(255,255,255,.06),transparent 72%)}
.fn-dialog-photo{max-width:78%;max-height:84%;width:auto;height:auto;object-fit:contain}
.fn-dialog-name{font-family:var(--sans);font-weight:600;font-size:clamp(22px,2.6vw,28px);line-height:1.15;margin:0 0 10px}
.fn-dialog-desc{margin:0;font-size:17px;line-height:1.5;color:var(--soft);max-width:46ch}
.fn-dialog-note{margin:14px 0 0;font-size:15px;color:var(--soft)}

@media (max-width:720px),(max-height:500px){
  .fn-icon-b{display:none}
  .fn-icon-c{top:13%;right:6%}
}
@media (max-width:640px){
  .fn-mark{width:clamp(220px,min(66vw,36vh),340px)}
  .fn-host{margin-top:0}
  .fn-pit{height:60px}
  .fn-strip{gap:10px 20px}
  .fs-cta{width:100%;min-height:52px}
  .fs-row-wrap{--hz:70%;height:clamp(220px,62vw,270px)}
  .fn-item-btn{width:clamp(120px,36vw,170px)}
  .fn-photo,.fn-reflection{max-height:clamp(120px,36vw,160px)}
  .fn-dialog{position:fixed;inset:0;width:100%;height:100%;max-height:none;margin:0}
  .fn-dialog-inner{height:100%;display:flex;flex-direction:column;justify-content:center;padding:24px}
  .fn-dialog-photo-wrap{aspect-ratio:1/1}
}
/* phone landscape: building left, words and prices right */
@media (max-height:500px) and (orientation:landscape){
  .fn{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto;column-gap:32px;align-content:center;justify-items:start}
  .fn-host{grid-row:1 / span 3;justify-self:center}
  .fn-mark{width:clamp(200px,min(40vw,62vh),340px)}
  .fn-pit{height:56px}
  .fn-copy{text-align:left;margin-top:0}
  .fn-copy h2{font-size:clamp(24px,3.4vw,34px)}
  .fn-strip{justify-content:flex-start;margin-top:14px;padding-top:12px;width:100%}
  .fn-cue{align-items:flex-start;margin-top:8px}
  .fn-cue i{display:none}
}
/* no hover (touch) or reduced motion: no torch to follow, so the lockup rests in a gentle static spectrum instead of going dark */
@media (hover:none),(prefers-reduced-motion:reduce){
  .fn-mark-color{opacity:.9 !important;-webkit-mask-image:none !important;mask-image:none !important}
}
@media (prefers-reduced-motion:reduce){
  .fn-icon,.fn-fig,.fn-cue i{animation:none}
  .fn-item{transition:opacity .01ms linear}
  .fn-mark-color,.fn-glow,.fn-pit-cv,.fn-dialog,.fn-dialog::backdrop{transition:none}
}