/* =====================================================================
   rYo_STUDIO — styles  (design tokens + base + keyframes + responsive)
   Tokens below are the shadow-theme defaults / no-JS fallback; applyTheme()
   in app.js overrides --bg-color / --text-color / --ui-border per elixir.
   Design system: 3 fonts, 1px hairlines, square corners, flat — only the
   ember Stone glows. Inline hex in the markup IS the house style.
   ===================================================================== */
/* VENDORED fonts — local woff2, no Google CDN (see assets/fonts/). */
@import url("assets/fonts/fonts.css");

:root{
  --bg-color:#0a0a0c; --text-color:#9f50e6; --ui-border:1px solid #121212;
  --accent-calc:#b388f0; --accent-ferm:#2fd06a; --accent-dist:#ff8a4d;
  --accent-amber:#e5b83b; --accent-moon:#9ec9ee; --con-accent:#ff6a1a;
}

  html, body { margin: 0; padding: 0; min-height: 100%; background: #0a0a0c; }
  html { overflow-x: hidden; }
  * { box-sizing: border-box; }
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: rgba(159,80,230,0.35); }
  @keyframes nodepulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
  @keyframes emberglow { 0%,100% { filter: drop-shadow(0 0 18px rgba(255,106,26,0.55)); } 50% { filter: drop-shadow(0 0 42px rgba(255,106,26,0.9)); } }
  @keyframes blink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
  @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
  /* transmutation circle — plays full-screen on every elixir transmutation (mix / theme) */
  @keyframes transmuteFade { 0% { opacity: 0; } 16% { opacity: 0.95; } 70% { opacity: 0.55; } 100% { opacity: 0; } }
  @keyframes transmuteSpin { from { transform: rotate(-55deg) scale(0.5); } to { transform: rotate(150deg) scale(1.08); } }
  @keyframes transmuteSpinRev { from { transform: rotate(40deg) scale(0.8); } to { transform: rotate(-120deg) scale(1.0); } }
  /* the transmutation seal sits in place and only rocks a few degrees (+ counter-rocking inner ring) */
  @keyframes ringspin { 0%,100% { transform: rotate(-3.5deg); } 50% { transform: rotate(3.5deg); } }
  @keyframes ringspinRev { 0%,100% { transform: rotate(2.5deg); } 50% { transform: rotate(-2.5deg); } }
  @keyframes sealpulse { 0%,100% { opacity: 0.42; } 50% { opacity: 0.62; } }
  /* feed cards enter smoothly; ~every 3rd glitches in (setupFeed) */
  @keyframes feedFadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes feedGlitchIn {
    0%   { opacity: 0; transform: translateY(10px); clip-path: inset(0 0 100% 0); }
    34%  { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(2px, 0); }
    46%  { transform: translate(-3px, 0); }
    58%  { transform: translate(2px, 0); }
    70%  { transform: translate(-1px, 0); }
    100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
  }
  /* keyboard focus ring — uses the active theme's text colour so it shows on any elixir */
  :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
  /* redacted client-brief decrypts on keyboard focus (mirrors the hover reveal).
     Authored CSS, not inline — support.js reconciles inline styles away but leaves
     stylesheet rules alone. color:inherit pulls the pane's text colour; transition:none
     so a re-render can't tug it back to transparent mid-fade. */
  .redact:focus { background: transparent !important; color: inherit !important; transition: none !important; }
  @media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

  /* ============ RESPONSIVE — narrow / mobile ============
     The hero is three fixed columns on desktop; below 720px we stack them
     vertically and let each pane flow into the page scroll (no nested scroll).
     Inline styles win on specificity, so these overrides need !important. */
  @media (max-width: 720px) {
    /* hero: stop pinning to 100vh, let it grow with stacked panes */
    [data-hero] { height: auto !important; min-height: 0 !important; }
    [data-hero] main { flex-direction: column !important; min-height: 0 !important; }
    [data-hero] main > section {
      flex: none !important;
      border-right: none !important;
      border-bottom: var(--ui-border, 1px solid #121212) !important;
    }
    /* each pane's body is the last child div — let it flow instead of inner-scrolling */
    [data-hero] main > section > div:last-child {
      overflow: visible !important;
      flex: none !important;
      padding-bottom: 40px !important;
    }
    /* header: drop the noisy ticker + mineral status nodes; keep logo + elixir readout */
    [data-ticker], [data-status-nodes] { display: none !important; }
    /* console eats less of a small screen */
    [data-console] { height: 116px !important; }
  }