/* TOSY mobile — shared styles (ported from Velvet Hour design project) */

/* Fonts are loaded from <link> tags in index.html, not @import. An @import here
   forces a serial chain — HTML, then this stylesheet, then the Google CSS, then
   the woff2 files — so text can't paint until four round trips have completed.
   The <link> version starts the font CSS in parallel with this file, with a
   preconnect warming the gstatic connection ahead of it. */

:root {
  --oxblood: #2a0a0e;
  --ink: #070d1c;
  --bone: #eaf2ff;
  --bone-dim: #9fb3d1;
  --candle: #ff2e88;
  --candle-deep: #2e9bff;
  --pink: #ff2e88;
  --blue: #2e9bff;
  --yellow: #ffd23f;
  --serif: 'Playfair Display', 'Times New Roman', serif;
  --display: 'Archivo Black', 'Inter Tight', sans-serif;
  --sans: 'Inter Tight', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; -webkit-font-smoothing: antialiased; }

body { margin: 0; font-family: var(--sans); }

/* film grain overlay used across frames */
.grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.12; mix-blend-mode: overlay; z-index: 100;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* candle flicker */
@keyframes flicker {
  0%, 100% { opacity: 1; filter: brightness(1); }
  10% { opacity: 0.92; filter: brightness(0.95); }
  13% { opacity: 0.98; }
  40% { opacity: 0.88; filter: brightness(0.9); }
  42% { opacity: 1; }
  70% { opacity: 0.95; }
}
.flicker { animation: flicker 4s infinite; }

@keyframes slow-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* curtain rise */
@keyframes curtain-up {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes letter-in {
  from { opacity: 0; transform: translateY(40px) rotate(-2deg); filter: blur(6px); }
  to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}

@keyframes glow-pulse {
  0%, 100% { text-shadow: 0 0 20px rgba(232, 180, 120, 0.3), 0 0 40px rgba(232, 180, 120, 0.15); }
  50% { text-shadow: 0 0 30px rgba(232, 180, 120, 0.5), 0 0 60px rgba(232, 180, 120, 0.25); }
}

@keyframes scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* karaoke lyric-screen word fill (PhotoCycle lyric slide) */
@keyframes lyric-word {
  to {
    color: #ff2e88;
    text-shadow: 0 0 8px rgba(255, 46, 136, 0.8), 0 0 18px rgba(255, 46, 136, 0.4);
  }
}

/* hide scrollbars */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}