/* ELVT styles for the world. The 3D lives in proto.js; this file is the type and the controls on top of it. */
:root { --ink: #020308; --white: #f2f6ff; --dim: rgba(226, 234, 255, .62); --tech: #7fd4ff; --amber: #ffb35c; --violet: #b98cff; --pink: #ff5fb0; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--white); }
body { font-family: "Archivo", "Helvetica Neue", Arial, sans-serif; font-stretch: 125%; overflow-x: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }

#world { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#hole { position: fixed; inset: 0; width: 100vw; height: 100vh; object-fit: cover; opacity: 0; pointer-events: none; }
#veil { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; }
#track { width: 1px; }

/* ---------- top bar ---------- */
.bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 22px clamp(18px, 3vw, 44px); }
.brand { font-weight: 800; font-size: 1.15rem; letter-spacing: .34em; text-decoration: none; }
.tools { display: flex; align-items: center; gap: 12px; }
/* "> button" on purpose: these rules are for the Menu button only, not for the buttons inside the radio capsule (radio.css) */
.tools > button { font-family: "Space Mono", ui-monospace, monospace; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; border: 1px solid rgba(226, 234, 255, .35); border-radius: 999px; background: rgba(4, 6, 13, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, color .2s, border-color .2s; }
.tools > button:hover, .tools > button[aria-pressed="true"] { background: var(--white); color: var(--ink); border-color: var(--white); }
.tools > button:focus-visible, .btn:focus-visible, #menu button:focus-visible { outline: 2px solid var(--tech); outline-offset: 3px; }

/* ---------- small terminal-style labels at the edges ---------- */
.hud { position: fixed; z-index: 20; top: 50%; transform: translateY(-50%); font-family: "Space Mono", ui-monospace, monospace; font-size: .66rem; line-height: 1.7; letter-spacing: .12em; text-transform: uppercase; color: rgba(226, 234, 255, .5); white-space: pre; pointer-events: none; }
.hud { text-shadow: 0 0 10px #020308, 0 0 3px #020308; }
.hud.left { left: clamp(18px, 3vw, 44px); }
.hud.right { right: clamp(18px, 3vw, 44px); text-align: right; }

/* ---------- intro ---------- */
#intro { position: fixed; z-index: 10; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; pointer-events: none; will-change: transform, opacity; }
#intro .mark { font-weight: 800; font-size: clamp(5rem, 21vw, 19rem); line-height: .9; letter-spacing: .06em; margin-right: -.06em;
  color: rgba(233, 241, 255, .07); -webkit-text-stroke: 2px #eaf3ff;
  text-shadow: 0 0 14px rgba(150, 205, 255, .55), 0 0 46px rgba(90, 150, 255, .5), 0 0 120px rgba(70, 120, 255, .38); }
/* the opening line, from Eric's poster: "Make something unreal." */
#intro p { margin: 22px 0 0; font-weight: 800; font-size: clamp(.95rem, 1.75vw, 1.6rem); letter-spacing: .36em; margin-right: -.36em; text-transform: uppercase; color: #eef3ff; text-shadow: 0 0 18px rgba(120, 175, 255, .55), 0 0 4px rgba(4, 6, 13, .9); }
#intro span { position: absolute; bottom: 30px; left: 0; right: 0; font-family: "Space Mono", ui-monospace, monospace; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(226, 234, 255, .7); animation: nudge 2.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); opacity: .5; } }

/* ---------- one caption per stop, centered low like a film title ---------- */
.cap { position: fixed; z-index: 15; left: 0; right: 0; bottom: 9vh; padding: 0 20px; text-align: center; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.cap::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1100px, 96vw); height: 190%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(2, 3, 8, .62), rgba(2, 3, 8, .34) 55%, transparent); }
.cap .k { margin: 0 0 10px; font-family: "Space Mono", ui-monospace, monospace; font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tech); }
.cap.studios .k { color: var(--pink); }
.cap h2 { margin: 0; font-weight: 800; font-size: clamp(2rem, 5.4vw, 5.2rem); line-height: 1; letter-spacing: .01em; text-transform: uppercase;
  text-shadow: 0 0 34px rgba(4, 6, 13, .9), 0 2px 18px rgba(4, 6, 13, .8); }
.cap.studios h2 { text-shadow: -3px 0 rgba(255, 40, 90, .7), 3px 0 rgba(40, 220, 255, .7), 0 0 34px rgba(10, 4, 18, .9); }
.cap p.s { margin: 14px auto 0; max-width: 46ch; font-weight: 400; font-size: clamp(.92rem, 1.25vw, 1.1rem); line-height: 1.5; color: rgba(236, 241, 255, .86); text-shadow: 0 1px 14px rgba(4, 6, 13, .95); }
.btn { display: inline-block; margin-top: 20px; padding: 13px 26px; border-radius: 999px; background: rgba(4, 6, 13, .55); border: 1px solid rgba(226, 234, 255, .55); font-family: "Space Mono", ui-monospace, monospace; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, color .2s; }
.btn:hover { background: var(--white); color: var(--ink); }
.cap.on .btn { pointer-events: auto; }
/* the cube's stop: three words on one line, no button */
.cap.words h2 { font-size: clamp(1.4rem, 3.6vw, 3.4rem); letter-spacing: .05em; }
.cap.words .k { color: var(--white); letter-spacing: .34em; }

/* ---------- the "Studios" title that lands as you come out of the black hole ---------- */
#studiosCard { position: fixed; z-index: 16; inset: 0; display: grid; place-content: center; text-align: center; opacity: 0; pointer-events: none; text-transform: uppercase; }
#studiosCard b { display: block; font-weight: 800; font-size: clamp(1rem, 2vw, 1.6rem); letter-spacing: .6em; margin-right: -.6em; color: var(--dim); }
#studiosCard i { display: block; font-style: normal; font-weight: 800; font-size: clamp(3.4rem, 13vw, 12rem); line-height: .95; text-shadow: -5px 0 rgba(255, 40, 90, .75), 5px 0 rgba(40, 220, 255, .75); }

/* ---------- the label under the gold coin at the last stop (the coin itself is 3D, in proto.js) ---------- */
#coinBtn { position: fixed; z-index: 16; left: 0; top: 0; padding: 8px 14px; border: 0; background: none; text-align: center; opacity: 0; visibility: hidden; pointer-events: none; white-space: nowrap; will-change: transform, opacity; }
#coinBtn.on { pointer-events: auto; }
#coinBtn b { display: block; font-family: "Space Mono", ui-monospace, monospace; font-weight: 400; font-size: .78rem; letter-spacing: .34em; margin-right: -.34em; text-transform: uppercase; color: #ffd98a; text-shadow: 0 0 14px rgba(255, 176, 60, .75), 0 0 3px #020308; animation: coinBlink 1.5s steps(1, end) infinite; }
#coinBtn i { display: block; margin-top: 5px; font-style: normal; font-family: "Space Mono", ui-monospace, monospace; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(236, 241, 255, .72); text-shadow: 0 0 10px #020308, 0 0 3px #020308; }
#coinBtn:hover b, #coinBtn:focus-visible b { color: #fff3cf; animation: none; }
#coinBtn:focus-visible { outline: 2px solid #ffd98a; outline-offset: 2px; border-radius: 8px; }
@keyframes coinBlink { 0%, 62% { opacity: 1; } 63%, 100% { opacity: .28; } }

/* ---------- while the game is open: the top bar turns into a slim solid strip that keeps the radio in reach ---------- */
body.pong-open .bar { padding-top: 6px; padding-bottom: 6px; background: linear-gradient(#040811fa, #040811f2); border-bottom: 1px solid #71829c26; }
body.pong-open #menuBtn { display: none; }
body.pong-open .brand { pointer-events: none; }

/* ---------- menu overlay ---------- */
#menu { position: fixed; z-index: 28; inset: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 6vw; justify-content: center; align-content: center; padding: 90px 24px 40px; background: rgba(2, 3, 8, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#menu[hidden] { display: none; }
#menu h3 { margin: 0 0 14px; font-family: "Space Mono", ui-monospace, monospace; font-weight: 400; font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--tech); }
#menu .col.studios h3 { color: var(--pink); }
#menu button { display: block; width: 100%; text-align: left; padding: 10px 0; background: none; border: 0; border-bottom: 1px solid rgba(226, 234, 255, .14); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 2rem); text-transform: uppercase; color: rgba(236, 241, 255, .8); transition: color .15s, padding .15s; }
#menu button:hover { color: #fff; padding-left: 10px; }
/* the small print at the bottom of the menu: who runs the site, the privacy policy, the contact email */
#menu .foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 6px 0 0; font-family: "Space Mono", ui-monospace, monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(226, 234, 255, .5); }
#menu .foot a { color: rgba(226, 234, 255, .78); text-underline-offset: 4px; }
#menu .foot a:hover, #menu .foot a:focus-visible { color: #fff; }
#menu .foot a[href^="mailto"] { text-transform: none; letter-spacing: .06em; }   /* an email address reads better in lowercase */

/* ---------- no 3D in this browser: a plain page with the same price lists and the same form (filled in by plainPage in proto.js) ---------- */
#nogl { position: fixed; inset: 0; z-index: 25; overflow-y: auto; display: grid; align-content: center; justify-items: center; padding: 96px 22px 44px; text-align: center; background: radial-gradient(ellipse at 50% 28%, #0b1530, var(--ink) 72%); }
#nogl[hidden] { display: none; }
#nogl .mark { font-weight: 800; font-size: clamp(3.4rem, 15vw, 8rem); line-height: .9; letter-spacing: .06em; margin-right: -.06em; color: rgba(233, 241, 255, .07); -webkit-text-stroke: 2px #eaf3ff; text-shadow: 0 0 14px rgba(150, 205, 255, .55), 0 0 46px rgba(90, 150, 255, .5); }
#nogl .lede { margin: 18px 0 0; font-weight: 800; font-size: clamp(.8rem, 2.2vw, 1.1rem); letter-spacing: .32em; margin-right: -.32em; text-transform: uppercase; }
#nogl .why { margin: 20px 0 0; max-width: 44ch; font-family: "Rajdhani", sans-serif; font-weight: 500; font-size: 1.1rem; line-height: 1.45; color: var(--dim); }
#nogl .list { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); gap: 10px; margin-top: 24px; }
#nogl .list button { padding: 14px 12px; border-radius: 14px; border: 1px solid rgba(127, 212, 255, .4); background: rgba(8, 14, 28, .7); font-weight: 800; font-size: .92rem; letter-spacing: .03em; text-transform: uppercase; }
#nogl .list button.studios { border-color: rgba(255, 95, 176, .45); }
#nogl .list button:hover, #nogl .list button:focus-visible { background: var(--white); color: var(--ink); }
#nogl .btn { margin-top: 24px; }
body.no3d #menuBtn, body.no3d .hud, body.no3d #intro, body.no3d #caps, body.no3d #coinBtn, body.no3d #track, body.no3d #world, body.no3d #hole { display: none; }
/* no JavaScript at all: one paragraph with the contact email */
.nojs { position: fixed; inset: 0; z-index: 50; display: grid; align-content: center; justify-items: center; padding: 30px; text-align: center; background: var(--ink); }
.nojs b { font-size: 3rem; letter-spacing: .3em; margin-right: -.3em; }
.nojs p { max-width: 46ch; line-height: 1.5; color: var(--dim); }

@media (max-width: 720px) {
  .hud { display: none; }
  #menu { grid-template-columns: 1fr; gap: 28px; }
  #nogl .list { grid-template-columns: 1fr; width: min(100%, 320px); }
  .cap { bottom: 7vh; }
}
@media (max-width: 650px) { .bar { padding-top: 14px; padding-bottom: 14px; } .tools { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { #intro span, #coinBtn b { animation: none; } }