/* ---------- The flythrough (fly.js) ---------- */
html, body.fly { background: #000; overscroll-behavior: none; }
.world { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100svh; display: block; z-index: 0; }
.flash { position: fixed; inset: 0; z-index: 4; background: #f3eadb; opacity: 0; pointer-events: none; }
.track-spacer { position: relative; z-index: -1; pointer-events: none; }
.fly-top { position: fixed; top: 0; left: 0; right: 0; z-index: 20; max-width: none; padding: 22px max(16px, calc(50% - 604px)); }

/* Each stop is a full-screen layer over the world, shown as the camera arrives. */
.stops { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.stop {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}
.stop.near { display: block; }
.stop-contact.live { pointer-events: auto; }   /* the filings follow the cursor across the whole screen */
.stop.live :is(a, button, [data-sculpt], .lion-art) { pointer-events: auto; }
.stop-head { position: absolute; left: max(16px, calc(50% - 604px)); top: 13vh; max-width: 560px; pointer-events: none; }
.stop-head .sub { margin-top: 10px; }

/* Start */
.stop-start .start-text { position: absolute; left: max(16px, calc(50% - 604px)); top: 15vh; right: 16px; max-width: 900px; }
.stop-start h1 { margin: 0; }
.stop-start .lede { margin: 26px 0 30px; }
.scroll-hint { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #8b8579; animation: hint 2.4s ease-in-out infinite; }
@keyframes hint { 50% { opacity: .35; translate: -50% 6px; } }

/* Projects: the constellation lines and degrees, drawn over the 3D stars */
.stop-projects .lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* The HUD: thin, translucent, technical */
.stop-projects .lines { font-family: "Share Tech Mono", ui-monospace, monospace; }
.stop-projects .c-beam { stroke: rgb(255 236 210 / .55); stroke-width: .9; stroke-dasharray: 6 5; }
.stop-projects .c-back { stroke: rgb(230 80 96 / .55); }
.stop-projects .c-spark { fill: rgb(255 255 255 / .85); }
.stop-projects .c-ret { fill: none; stroke: rgb(255 232 200 / .35); stroke-width: .8; stroke-dasharray: 2 5; }
.stop-projects .c-ret-h { stroke: rgb(255 227 189 / .7); stroke-width: 1; stroke-dasharray: 7 4; }
.stop-projects .c-tick { stroke: rgb(255 232 200 / .45); stroke-width: .8; }
.stop-projects .c-ping { fill: none; stroke: rgb(225 72 90 / .6); stroke-width: .8; }
.stop-projects .c-ref { stroke: rgb(255 232 200 / .25); stroke-width: .7; stroke-dasharray: 2 3; }
.stop-projects .ang { fill: none; stroke: rgb(225 72 90 / .55); stroke-width: .9; }
.stop-projects .ang-s { stroke: rgb(255 227 189 / .5); stroke-width: .8; }
.stop-projects .deg { fill: rgb(241 220 200 / .72); font: 400 10px "Share Tech Mono", ui-monospace, monospace; letter-spacing: .08em; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: rgb(0 0 0 / .6); stroke-width: 2px; }
.stop-projects .deg-s { font-size: 9px; fill: rgb(255 227 189 / .6); }
.orb-tip { position: absolute; margin: 0; padding: 4px 11px; border-radius: 999px; background: rgb(0 0 0 / .75); border: 1px solid rgb(255 255 255 / .15); color: #ede6d9; font-size: 13px; font-weight: 700; translate: -50% 0; pointer-events: none; white-space: nowrap; }

/* Cards: the panes are 3D; this list is for keyboards and screen readers */
.sr-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; list-style: none; }
.sr-list button:focus { position: fixed; left: 16px; bottom: 16px; width: auto; height: auto; clip: auto; }

/* LMU */
.stop-lmu .lmu-inner { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; gap: 40px; max-width: 1240px; margin: 0 auto; padding: 0 16px; min-height: 0; }
.stop-lmu .lion-art { position: relative; width: 100%; aspect-ratio: 1; max-width: min(640px, 78vh); justify-self: center; }

/* Faith: the fireflies are 3D; the button sits below them */
.faith-text { position: absolute; left: 0; right: 0; bottom: 11vh; text-align: center; }
.faith-text .kicker { margin-bottom: 14px; }

/* Contact */
.stop-contact.contact { margin: 0; padding: 0; min-height: 0; border: 0; display: none; align-items: center; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgb(4 4 5 / .82), rgb(0 0 0 / .55)); }
.stop-contact.contact.near { display: flex; }
.stop-contact .wrap { position: relative; z-index: 1; width: 100%; text-align: center; }
.loop-note { margin-top: 26px; }

/* Project details */
.proj-modal { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 64px); padding: 34px; border: 1px solid rgb(255 255 255 / .14); border-radius: 22px; background: linear-gradient(180deg, #121214, #08080a); color: #bdb7ad; box-shadow: 0 40px 80px rgb(0 0 0 / .8); }
.proj-modal::backdrop { background: rgb(0 0 0 / .6); backdrop-filter: blur(4px); }
.pm-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 1px solid #333; border-radius: 50%; background: #111; color: #ddd; font-size: 22px; line-height: 1; cursor: pointer; }
.pm-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.pm-head img { width: 64px; height: 64px; border-radius: 22%; }
.pm-head h3 { margin: 0; font-size: 30px; }
.pm-head .tagline { margin: 4px 0 0; }
.proj-modal .desc { margin: 0 0 20px; }
.proj-modal .features { margin-bottom: 18px; }
.proj-modal .chips { margin-bottom: 24px; }

/* The journey ring: which stop you're at, on a loop */
.journey { z-index: 21; }

@media (max-width: 899px) {
  .stop-start .start-text { top: 12vh; }
  .stop-head { top: 11vh; }
  .stop-lmu .lmu-inner { grid-template-columns: 1fr; align-content: center; gap: 0; }
  .stop-lmu .lion-art { max-width: min(78vw, 46vh); }
  .proj-modal { padding: 24px 20px; }
}

/* Ink in water, between the world and the stop layers */
.fly-ink { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 2; pointer-events: none; }

/* Swiping through the panes */
.pan-btn { position: absolute; top: 50%; translate: 0 -50%; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .2); background: rgb(0 0 0 / .55); color: #eee6d8; font-size: 26px; line-height: 1; cursor: pointer; }
.pan-left { left: 18px; } .pan-right { right: 18px; }
.pan-btn:hover { border-color: rgb(255 255 255 / .5); }
.world { touch-action: pan-y; }   /* sideways drags reach the page as swipes; up and down still scroll */
.faith-hint { margin: 14px 0 0; }
.orb-tip { font-family: "Share Tech Mono", ui-monospace, monospace; letter-spacing: .06em; font-weight: 400; background: rgb(0 0 0 / .55); }

/* The couch: the DVD binder open in your lap (its pages turn on the rings), and what's playing on the TV */
.stop.live .binder, .stop.live .tv-caption { pointer-events: auto; }
.binder { position: absolute; left: 50%; bottom: 2vh; width: min(800px, 62vw); translate: -50% 0; perspective: 1500px; transition: transform .7s cubic-bezier(.3, .8, .3, 1); }
.binder.down { transform: translateY(calc(100% - 40px)); }
.book { position: relative; aspect-ratio: 2 / 1.08; transform: rotateX(16deg); transform-origin: 50% 100%; transform-style: preserve-3d; touch-action: pan-y; }
.cover { position: absolute; top: 0; bottom: 0; width: 50%; background: radial-gradient(120% 90% at 30% 20%, #2a2730, #141317 70%); box-shadow: 0 30px 60px rgb(0 0 0 / .6), inset 0 0 0 1px rgb(255 255 255 / .07); }
.cover::before { content: ""; position: absolute; inset: 9px; border: 1px dashed rgb(201 169 107 / .32); border-radius: inherit; pointer-events: none; }
.cover-l { left: 0; border-radius: 18px 4px 4px 18px; } .cover-r { right: 0; border-radius: 4px 18px 18px 4px; }
.cover-label { position: absolute; left: 50%; top: 34%; translate: -50% -50%; rotate: -4deg; margin: 0; padding: 12px 22px; background: #e9dfc9; color: #2a2420; font: 800 clamp(16px, 2.1vw, 28px)/1.05 Manrope, sans-serif; letter-spacing: -.01em; text-align: center; box-shadow: 0 6px 14px rgb(0 0 0 / .5); }
.cover-label::before, .cover-label::after { content: ""; position: absolute; top: -8px; width: 46px; height: 16px; background: rgb(240 230 200 / .55); }
.cover-label::before { left: -14px; rotate: -30deg; } .cover-label::after { right: -14px; rotate: 30deg; }
.cover-note { position: absolute; left: 0; right: 0; bottom: 18%; margin: 0; text-align: center; font: 400 12px "Share Tech Mono", ui-monospace, monospace; letter-spacing: .1em; color: rgb(233 227 216 / .55); text-transform: uppercase; }
.leaf { position: absolute; top: 3%; bottom: 3%; left: 50%; width: 47%; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.45, .05, .3, 1); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 5%; padding: 6% 6% 6% 9%; border-radius: 3px 12px 12px 3px; background: linear-gradient(90deg, #0a0a0c, #121215 12%, #111114); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05); }
.face.back { transform: rotateY(180deg); padding: 6% 9% 6% 6%; border-radius: 12px 3px 3px 12px; background: linear-gradient(270deg, #0a0a0c, #121215 12%, #111114); }
.face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, rgb(0 0 0 / .45), transparent 30%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.leaf.turning .face::after { opacity: 1; }
.sleeve { position: relative; min-width: 0; min-height: 0; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(165deg, rgb(255 255 255 / .1), rgb(255 255 255 / .025) 55%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); }
.sleeve::after { content: ""; position: absolute; inset: 0; border-radius: 9px; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .1) 42%, transparent 52%); pointer-events: none; }
.sleeve.empty::before { content: ""; height: 62%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgb(255 255 255 / .1); }
.rings { position: absolute; left: 50%; top: 9%; bottom: 9%; width: 34px; translate: -50% 0; display: flex; flex-direction: column; justify-content: space-around; align-items: center; transform: translateZ(6px); pointer-events: none; }
.rings i { width: 34px; height: 11px; border-radius: 6px; background: linear-gradient(180deg, #f1ece4, #a39a8d 55%, #6b645a); box-shadow: 0 3px 5px rgb(0 0 0 / .6); }
.disc { position: relative; height: 100%; max-width: 100%; min-width: 0; aspect-ratio: .86; padding: 0; border: 0; background: none; cursor: pointer; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; align-content: center; gap: 4px; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1), opacity .3s; }
.disc:hover, .disc:focus-visible { transform: translateY(-6px) rotate(-10deg); }
.disc:focus-visible { outline: none; } .disc:focus-visible .disc-face { box-shadow: 0 0 0 2px #f3ead9, 0 8px 18px rgb(0 0 0 / .5); }
.disc.out { opacity: .18; transform: none; }
.disc .disc-face { height: 100%; width: auto; max-width: 100%; }
.disc-face, .disc-flyer .disc-face { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #121216 0 38%, transparent 39%), conic-gradient(from 20deg, #d6dae0, #f2e2ee, #cbe5f0, #e7efcf, #d6dae0, #eddcea, #cfe2f0, #d6dae0);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / .3), 0 6px 16px rgb(0 0 0 / .5); }
.disc-face img { width: 52%; aspect-ratio: 1; border-radius: 24%; position: relative; z-index: 1; }
.disc-face::after { content: ""; position: absolute; width: 11%; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgb(255 255 255 / .55); z-index: 2; }
.disc-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: 700; color: #e9e3d8; white-space: nowrap; }
.binder-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 10px; }
.binder-nav .flip { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .2); background: rgb(0 0 0 / .55); color: #eee6d8; font-size: 24px; line-height: 1; cursor: pointer; }
.binder-nav .flip:disabled { opacity: .3; cursor: default; }
.binder-page { font: 400 12px "Share Tech Mono", ui-monospace, monospace; letter-spacing: .12em; color: rgb(233 227 216 / .7); min-width: 44px; text-align: center; }
.glove { position: absolute; bottom: 44px; width: 112px; pointer-events: none; filter: drop-shadow(0 8px 10px rgb(0 0 0 / .45)); transition: transform .5s; }
.glove-l { left: -52px; transform: rotate(14deg); } .glove-r { right: -52px; transform: rotate(-14deg); }
.binder-tab { position: absolute; left: 50%; top: -30px; translate: -50% 0; display: none; padding: 6px 18px; border-radius: 12px 12px 0 0; border: 1px solid rgb(255 255 255 / .14); border-bottom: 0; background: #1a191e; color: #e9e3d8; font: 700 12px Manrope, sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.binder.down .binder-tab { display: block; }
.binder.down .binder-nav, .binder.down .glove { visibility: hidden; }
.disc-flyer { position: fixed; z-index: 40; pointer-events: none; transition: transform .72s cubic-bezier(.55, 0, .8, .2), opacity .72s ease-in; }
.tv-caption { position: absolute; left: max(16px, calc(50% - 604px)); top: calc(13vh + 82px); display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.stop-couch.playing .stop-head .sub { visibility: hidden; }
.tv-caption[hidden] { display: none; }
.tv-caption .kicker { margin: 0; }
.tv-title { margin: 0 8px 0 0; font-size: 22px; font-weight: 800; color: #f2ece2; }

@media (max-width: 899px) {
  .binder { width: calc(100% - 24px); bottom: 1.5vh; }
  .book { transform: rotateX(10deg); }
  .face { gap: 4%; padding: 5% 5% 5% 8%; } .face.back { padding: 5% 8% 5% 5%; }
  .rings { width: 22px; } .rings i { width: 22px; height: 8px; }
  .disc-name { font-size: 9px; }
  .cover-note { display: none; }
  .glove { width: 70px; bottom: 40px; } .glove-l { left: -18px; } .glove-r { right: -18px; }
  .binder-nav { margin-top: 6px; } .binder-nav .flip { width: 36px; height: 36px; }
  .tv-caption { left: 16px; right: 16px; top: calc(11vh + 84px); gap: 8px; }
  .tv-caption .kicker { display: none; }
  .tv-title { font-size: 18px; }
  .tv-caption .btn { padding: 8px 14px; font-size: 13px; }
}