/* Fleming · home provvisoria: solo la schermata d'ingresso (dal sito, senza ingresso). */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); }

:root {
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", Consolas, ui-monospace, monospace;
  /* sempre scuro, qualunque sia il tema del dispositivo (come il sito) */
  --bg: #0b0d11; --bg-1: #191e27; --text: #e8eaed; --text-2: #b6bdc9; --muted: #8c95a3; --line: #3a414d;
  --amber: #ffb224; --amber-text: #ffb224; --glow: #ffb224; --voice: #b49cff;
  --word: #b9bfca; --bright: #eceae4; --logo-fill: rgba(255, 255, 255, .06); --bot: #221c3d; --ant-off: #4a4070;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); overflow-x: hidden; }
body { color: var(--text); font: 400 17px/1.5 var(--body); -webkit-text-size-adjust: 100%; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.splash { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center;
  background: radial-gradient(ellipse at 50% 42%, var(--bg-1) 0%, var(--bg) 62%);
  padding: max(20px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.splash-in { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2vh, 20px); text-align: center; width: 100%; }
.biglogo { width: clamp(130px, 26vh, 260px); height: auto; color: var(--text); overflow: visible; }
.biglogo .arc { stroke: var(--amber); opacity: .12; }
.biglogo .body { fill: var(--logo-fill); }
.biglogo .fil, .biglogo .feet { stroke: var(--amber); }
.biglogo .base { fill: var(--amber); }
.biglogo .spark { fill: var(--voice); }
.name { margin: 0; font: 800 clamp(48px, 9vh, 96px)/1 var(--display); letter-spacing: -.02em; }
.play { width: min(1100px, 100%, 130vh); }
.play svg { width: 100%; height: auto; display: block; overflow: hidden; }
.clockband { font: 700 clamp(40px, 8vh, 84px)/1 var(--mono); margin-top: clamp(4px, 1.5vh, 16px); font-variant-numeric: tabular-nums; }
.clockband em { font-style: normal; color: var(--amber-text); }
/* Il robottino e la scritta (disegnati da splash.js): colori dai token, anche se il tema cambia. */
.pw { fill: var(--word); }
.pw.ai { fill: var(--voice); }
.pw.hot, .pw.flash-b { fill: var(--bright); }
.pw.flash-a { fill: var(--amber-text); }
.pg-flood { flood-color: var(--glow); }
.rv { fill: var(--voice); }
.rs { stroke: var(--voice); }
.rbody { fill: var(--bot); stroke: var(--voice); }
.rant { fill: var(--amber); }
.rant.v { fill: var(--voice); }
.rant.off { fill: var(--ant-off); }
.rz { fill: var(--voice); }
.soon { margin: 24px 0 0; font: 500 13px/1.4 var(--mono); color: var(--muted); letter-spacing: .02em; text-align: center; }
.soon a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: .2em; }
.soon a:hover { color: var(--amber-text); text-decoration-color: currentColor; }

/* Schermi bassi (telefono in orizzontale): tutto più compatto, senza scorrere. */
@media (max-height: 500px) {
  .splash { padding-top: 12px; }
  .splash-in { gap: 6px; }
  .biglogo { width: 70px; }
  .name { font-size: 34px; }
  .clockband { font-size: 30px; margin-top: 0; }
  .soon { margin-top: 8px; }
}

@media (prefers-reduced-motion: no-preference) {
  .biglogo .fil { animation: fil-glow 3.6s ease-in-out infinite; }
  .biglogo .arc { animation: logo-arc 3.6s ease-in-out infinite; }
  .biglogo .a2 { animation-delay: .45s; }
  .biglogo .a3 { animation-delay: .9s; }
  .biglogo .spark { animation: twinkle 3.6s ease-in-out infinite; transform-origin: 50px 28px; }
}
@media (prefers-reduced-motion: reduce) { .biglogo .arc { opacity: 1; } }
@keyframes fil-glow { 0%, 100% { filter: drop-shadow(0 0 1px var(--glow)); } 50% { filter: drop-shadow(0 0 6px var(--glow)); } }
@keyframes logo-arc { 0%, 100% { opacity: .12; } 30% { opacity: 1; } 60% { opacity: .12; } }
@keyframes twinkle { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.25); opacity: 1; } }

/* Piccole sorprese (splash.js): guance del risveglio e dettagli delle feste, minuscoli come sul sito. */
.rblush ellipse { fill: #ff7aa8; fill-opacity: .75; }
.lg-f-red { fill: #e5484d; }
.lg-f-white { fill: #f6f3ec; }
.lg-f-green { fill: #2e9e5b; }
.lg-f-star { fill: #ffd166; }
.lg-f-egg { fill: #ffd6e7; }
.lg-f-zig { stroke: var(--voice); }