/* Rock 'Em Up — interface tokens drawn from the Art Bible's sampled palette.
   Palette samples are a starting family (ART-BIBLE.md); semantic roles below are UI choices. */
@font-face { font-family: 'Anton'; src: url('media/fonts/anton-latin-400-normal.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; src: url('media/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); font-display: swap; }

:root {
  --soot: #0D0F0E; --charcoal: #2D2D2B; --blue-charcoal: #2A3134; --vermilion: #D24127;
  --bone: #F3D7A7; --amber: #EEA255; --ochre: #B78F62; --warm-shadow: #664939;
  --neon: #FFE14A; --neon-deep: #E8B10C;
  --ink: var(--bone); --ink-dim: rgba(243, 215, 167, 0.72);
  --panel: rgba(13, 15, 14, 0.9); --panel-edge: rgba(243, 215, 167, 0.22);
  --focus: var(--amber);
  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --ui: 'Barlow', 'Arial', sans-serif;
  --memoir: 'Literata', 'Georgia', serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--soot); color: var(--ink); font-family: var(--ui); font-weight: 500; overflow: hidden; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- Title screen ---------- */
.title-screen { position: fixed; inset: 0; overflow: hidden; background: var(--soot); transition: opacity .9s ease; }
.title-screen.leaving { opacity: 0; pointer-events: none; }
.backdrop { position: absolute; inset: 0; }
.backdrop .still, .backdrop .loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.backdrop .loop { opacity: 0; transition: opacity .6s ease; }
.title-screen.video-ready .backdrop .loop { opacity: 1; }
.title-screen.reduced .backdrop .loop, .title-screen.video-failed .backdrop .loop { display: none; }
/* Dark backing only where text sits: upper-right arena and the stage floor. */
.backdrop .shade { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 34% at 79% 13%, rgba(13,15,14,.78), rgba(13,15,14,0) 70%),
    linear-gradient(to top, rgba(13,15,14,.92) 0%, rgba(13,15,14,.55) 11%, rgba(13,15,14,0) 22%); }

.title-box { position: absolute; top: 3.2vh; right: 3vw; width: min(44vw, 820px); display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }
.title-arrival { opacity: 0; }
.title-breath { transform-origin: 100% 100%; }
.title-screen.title-ready .title-arrival { opacity: 1; }
.title-screen.title-ready .title-breath { animation: title-breathe 8s ease-in-out 3000ms infinite; }
.title-tagline { margin: clamp(14px, 2vh, 24px) 0 0; max-width: 100%; font-size: clamp(18px, 2.15vw, 30px); line-height: 1.2;
  text-align: right; text-wrap: balance; text-shadow: 0 2px 3px var(--soot), 0 4px 12px var(--soot); opacity: 0; }
.title-summary { margin: 12px 0 0; max-width: 58ch; padding: 10px 14px; font-size: clamp(13px, 1.17vw, 17px); line-height: 1.3;
  text-align: right; color: var(--bone); background: rgba(13,15,14,.78); text-shadow: 0 1px 3px var(--soot); opacity: 0; }
@keyframes title-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes title-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.005); } }
.title-screen.motion-paused .title-breath, .title-screen.motion-paused .gate span, .title-screen.leaving .title-breath { animation-play-state: paused; }
.logo { margin: 0; font-family: var(--display); font-weight: 400; line-height: .86; letter-spacing: .005em; white-space: nowrap;
  font-size: min(8.4vw, 15.5vh); display: flex; align-items: flex-end; filter: url(#roughen); }
.logo .l { display: inline-block; transform: rotate(var(--tilt)) translateY(var(--lift)) scaleY(1.18); transform-origin: 50% 100%;
  text-shadow: 0 .04em 0 var(--soot), .03em .06em 0 rgba(13,15,14,.9), 0 0 .18em rgba(13,15,14,.85); }
.logo .v { color: var(--vermilion); }
.logo .b { color: var(--bone); }
.logo .gap { display: inline-block; width: .22em; }
/* Matte raised paint: a narrow warm edge, charcoal thickness, then a soft cast shadow. */
.title-screen .logo .l { text-shadow: -.008em -.014em .006em rgba(238,162,85,.28),
  .008em .012em .004em #2D2D2B, .016em .024em .006em #242622, .024em .036em .009em var(--soot),
  .035em .065em .09em rgba(0,0,0,.78); }

/* ---------- Neon flicker-on (Tamás 2026-10-13) ----------
   Letters sit as dark glass, then buzz on one by one like a bar sign; the U is the dead letter that catches last
   and still drops out now and then. The tagline types on behind a caret; the paragraph rises line by line. */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.title-screen .logo .l { position: relative; opacity: .1; }
.title-screen .logo .v { --glow: rgba(255,92,58,.95); }
.title-screen .logo .b { --glow: rgba(255,214,150,.85); }
.title-screen .logo .l::after { content: attr(data-ch); position: absolute; left: 0; top: 0; color: transparent; pointer-events: none; opacity: 0;
  text-shadow: 0 0 .08em var(--glow), 0 0 .3em var(--glow), 0 0 .7em var(--glow); }
.title-screen.title-ready .logo .l { animation: neon-on 900ms steps(1, end) var(--on) both; }
.title-screen.title-ready .logo .l::after { animation: neon-glow 1500ms steps(1, end) var(--on) both; }
.title-screen.title-ready .logo .l.dead { animation: neon-dead 1300ms steps(1, end) var(--on) both, neon-hum 9s steps(1, end) calc(var(--on) + 6s) infinite; }
.title-screen.title-ready .logo .l.dead::after { animation: neon-glow 1500ms steps(1, end) calc(var(--on) + 700ms) both; }
@keyframes neon-on { 0% { opacity: .1; } 8% { opacity: 1; } 12% { opacity: .14; } 22% { opacity: 1; } 27% { opacity: .4; } 33%, 100% { opacity: 1; } }
@keyframes neon-glow { 0% { opacity: 0; } 5% { opacity: 1; } 8% { opacity: 0; } 15% { opacity: 1; } 18% { opacity: .2; } 22% { opacity: 1; animation-timing-function: cubic-bezier(.23, 1, .32, 1); } 100% { opacity: .38; } }
@keyframes neon-dead { 0% { opacity: .1; } 8% { opacity: .75; } 11% { opacity: .1; } 42% { opacity: .1; } 45% { opacity: 1; } 49% { opacity: .1; } 56% { opacity: .1; } 59%, 100% { opacity: 1; } }
@keyframes neon-hum { 0%, 93% { opacity: 1; } 94% { opacity: .2; } 95% { opacity: 1; } 96.5% { opacity: .3; } 97.5%, 100% { opacity: 1; } }

.title-screen.title-ready .title-tagline { opacity: 1; }
.title-tagline .ch { opacity: 0; }
.title-tagline .ch.on { opacity: 1; }
.title-tagline .caret { display: inline-block; width: .09em; height: .85em; margin: 0 -.09em -.08em 0; background: var(--amber); box-shadow: 0 0 .3em rgba(238,162,85,.8); }
.title-tagline .caret.blink { animation: caret-blink 800ms steps(1, end) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

.title-screen.subtitle-complete .title-summary { opacity: 1; animation: summary-box 500ms cubic-bezier(.23, 1, .32, 1) 150ms both; }
.title-summary .w { display: inline-block; opacity: 0; }
.title-screen.subtitle-complete .title-summary .w { animation: line-rise 560ms cubic-bezier(.23, 1, .32, 1) calc(300ms + var(--line, 0) * 140ms) both; }
@keyframes summary-box { from { background-color: rgba(13,15,14,0); } to { background-color: rgba(13,15,14,.78); } }
@keyframes line-rise { from { opacity: 0; transform: translateY(.7em); } to { opacity: 1; transform: none; } }

/* Reduced motion: no flicker, no typing; the whole title fades in once. */
.title-screen.reduced .title-box { opacity: 0; }
.title-screen.reduced.title-ready .title-box { animation: title-reveal 400ms ease-out both; }
.title-screen.reduced .title-breath, .title-screen.reduced .title-summary,
.title-screen.reduced .logo .l, .title-screen.reduced .logo .l::after, .title-screen.reduced .title-summary .w { animation: none !important; }
.title-screen.reduced .logo .l, .title-screen.reduced .title-tagline .ch, .title-screen.reduced .title-summary .w { opacity: 1; }
.title-screen.reduced .logo .l::after { opacity: .38; }


.title-arrival {opacity:1}
.title-box {top:7vh}
.title-screen .logo .l {opacity:1}
.title-screen.motion-paused .logo .l, .title-screen.motion-paused .logo .l::after {animation-play-state:paused}
.coming-soon {position:absolute;left:50%;bottom:7vh;transform:translateX(-50%);margin:0;white-space:nowrap;font:700 clamp(26px,3vw,42px)/1.2 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.15em;color:var(--bone);text-shadow:0 2px 8px #000}
.publisher {position:absolute;left:2vw;bottom:0;width:clamp(180px,17vw,230px);height:auto}
.motion {position:absolute;top:16px;left:16px;min-width:44px;min-height:44px;padding:10px 13px;background:#0d0f0ebd;border:1px solid #f3d7a750;cursor:pointer;color:var(--bone);font:700 14px 'Barlow Condensed',sans-serif;letter-spacing:.04em}
.motion:hover {background:#0d0f0e}
@media (max-aspect-ratio:16/9) and (min-aspect-ratio:3/2) {
 .backdrop .still,.backdrop .loop {object-fit:contain}
 .title-box {top:calc((100vh - 100vw * 9 / 16) / 2 + 7vh)}
}
@media (min-aspect-ratio:2/1) {
 .backdrop .still,.backdrop .loop {object-fit:contain}
 .title-box {right:calc((100vw - 100vh * 16 / 9) / 2 + 2vw);width:calc(100vh * 16 / 9 * .44)}
 .logo {font-size:13vh}
}
@media (max-aspect-ratio:3/2) {
 html,body {height:auto;min-height:100%;overflow:auto}
 .title-screen {position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;overflow:hidden}
 .backdrop {position:relative;inset:auto;order:2;width:100%;height:calc(100vw * 9 / 16);flex:none;transform:none}
 .backdrop .still,.backdrop .loop {object-fit:contain}
 .backdrop .shade {background:linear-gradient(to bottom,var(--soot),transparent 12%,transparent 88%,var(--soot))}
 .title-box {position:relative;top:auto;right:auto;left:auto;order:1;width:calc(100% - 32px);margin:110px 16px 24px;align-items:center}
 .title-breath {transform-origin:50% 100%}
 .logo {font-size:min(14vw,11vh)}
 .title-tagline {font-size:22px;max-width:30ch;text-align:center;margin-top:20px}
 .title-summary {font-size:15px;line-height:1.4;text-align:center;max-width:60ch;margin-top:12px}
 .coming-soon {position:relative;order:3;left:auto;top:auto;bottom:auto;transform:none;margin:24px 0 0}
 .publisher {position:relative;order:4;left:auto;transform:none;bottom:auto;width:180px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce) {
 * {animation:none!important;transition:none!important}
 .title-screen .logo .l {opacity:1}
 .title-screen .logo .l::after {opacity:.38}
 .backdrop .loop {display:none}
}