/* =====================================================================
   rYo_STUDIO — styles.css
   Design system: Alchemical × Pantheon · dark · esoteric · permacomputing
   ===================================================================== */

@import url("assets/fonts/fonts.css");

/* ── 1. DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
  /* Base palette — shadow theme defaults / no-JS fallback */
  --bg-color:    #0a0a0c;
  --text-color:  #9f50e6;
  --ui-border:   1px solid #121212;

  /* Accent palette */
  --accent-calc:  #b388f0;
  --accent-ferm:  #2fd06a;
  --accent-dist:  #ff8a4d;
  --accent-amber: #e5b83b;
  --accent-moon:  #9ec9ee;
  --con-accent:   #ff6a1a;

  /* Glass system */
  --glass-bg:     rgba(10, 10, 14, 0.72);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-blur:   blur(10px);

  /* Elevation shadows */
  --shadow-sm:  0 2px 8px  rgba(0, 0, 0, 0.45);
  --shadow-md:  0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.75);

  /* Column accent RGB values (for rgba() in pseudo gradients) */
  --calc-rgb: 179, 136, 240;
  --ferm-rgb:  47, 208, 106;
  --dist-rgb: 255, 138,  77;
}

/* ── 2. BASE ────────────────────────────────────────────────────────── */
html, body {
  margin: 0; padding: 0;
  min-height: 100%;
  background: #0a0a0c;
}
html { overflow-x: hidden; }
* { box-sizing: border-box; }

::selection {
  background: rgba(159, 80, 230, 0.28);
  color: #ece8df;
}

:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.redact:focus {
  background: transparent !important;
  color: inherit !important;
  transition: none !important;
}

/* Scrollbar — thin, accent-tinted */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(159, 80, 230, 0.3);
  border-radius: 0;
  transition: background 200ms;
}
::-webkit-scrollbar-thumb:hover { background: rgba(159, 80, 230, 0.6); }

/* ── 3. KEYFRAMES ───────────────────────────────────────────────────── */
@keyframes nodepulse    { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes emberglow    { 0%,100% { filter: drop-shadow(0 0 18px rgba(255,106,26,.55)); } 50% { filter: drop-shadow(0 0 44px rgba(255,106,26,.95)); } }
@keyframes blink        { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
@keyframes scanline     { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } }
@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.68; } }
@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); } }
@keyframes feedFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes feedGlitchIn {
  0%   { opacity: 0; transform: translateY(12px); 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); }
}

/* New: subtle column header atmospheric shimmer */
@keyframes atmoPulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 0.85; }
}
/* New: logo glyph orbit */
@keyframes glyphFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-2px) rotate(6deg); }
}
/* New: card hover rise */
@keyframes cardRise {
  from { transform: translateY(0); }
  to   { transform: translateY(-3px); }
}
/* New: border accent flash on project card */
@keyframes accentFlash {
  0%   { box-shadow: inset 3px 0 0 transparent; }
  100% { box-shadow: inset 3px 0 0 var(--accent-dist, #ff8a4d); }
}

/* ── 4. HEADER ──────────────────────────────────────────────────────── */
[data-hero] header {
  background: rgba(10, 10, 12, 0.96);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  position: relative;
  z-index: 10;
}

/* Logo text — subtle gradient shimmer */
[data-hero] header > div:first-child {
  position: relative;
}
[data-hero] header > div:first-child > span:first-child {
  background: linear-gradient(135deg, var(--text-color, #9f50e6) 0%, rgba(255,255,255,0.9) 55%, var(--text-color, #9f50e6) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.015em;
}

/* Mercury glyph — floats gently */
[data-hero] header > div:first-child > span:last-child {
  display: inline-block;
  animation: glyphFloat 5s ease-in-out infinite;
  filter: drop-shadow(0 0 6px currentColor);
}

/* Ticker — tighter, more refined */
[data-ticker] {
  position: relative;
  overflow: hidden;
}
[data-ticker]::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 60px;
  background: linear-gradient(to right, transparent, var(--bg-color, #0a0a0c));
  pointer-events: none;
}

/* Status nodes — enhanced glow on pulse */
[data-status-nodes] i {
  transition: box-shadow 600ms ease;
}

/* Theme readout — glass panel */
[data-theme-readout] {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: background 400ms;
}

/* ── 5. TRIPTYCH COLUMNS ────────────────────────────────────────────── */

/* Column I — Calcination (purple) */
[data-hero] main > section:nth-child(1) {
  position: relative;
}
[data-hero] main > section:nth-child(1)::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 220px;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(var(--calc-rgb), 0.1) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Column II — Fermentation (green) */
[data-hero] main > section:nth-child(2)::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 220px;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(var(--ferm-rgb), 0.08) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Column III — Distillation (orange) */
[data-hero] main > section:nth-child(3)::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 220px;
  background: radial-gradient(ellipse 80% 100% at 50% 0%, rgba(var(--dist-rgb), 0.09) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Column header divs — subtle top border accent */
[data-hero] main > section:nth-child(1) > div:first-child {
  border-top: 1px solid rgba(var(--calc-rgb), 0.3);
}
[data-hero] main > section:nth-child(2) > div:first-child {
  border-top: 1px solid rgba(var(--ferm-rgb), 0.25);
}
[data-hero] main > section:nth-child(3) > div:first-child {
  border-top: 1px solid rgba(var(--dist-rgb), 0.25);
}

/* Column section headings — fluid size, refined weight */
[data-hero] main > section h2 {
  letter-spacing: -0.01em;
  text-shadow: 0 0 32px currentColor;
}

/* Inner scroll areas — custom scrollbar per column accent */
[data-hero] main > section:nth-child(1) > div:last-child::-webkit-scrollbar-thumb {
  background: rgba(var(--calc-rgb), 0.35);
}
[data-hero] main > section:nth-child(2) > div:last-child::-webkit-scrollbar-thumb {
  background: rgba(var(--ferm-rgb), 0.3);
}
[data-hero] main > section:nth-child(3) > div:last-child::-webkit-scrollbar-thumb {
  background: rgba(var(--dist-rgb), 0.3);
}

/* Stats grid — number emphasis */
[data-calc-stats] > div > div:first-child {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Data-term tooltippable keywords */
[data-term] {
  transition: color 160ms, border-color 160ms;
}
[data-term]:hover {
  color: var(--accent-amber, #e5b83b);
  border-color: var(--accent-amber, #e5b83b);
}

/* Directory nav links — lift on hover */
[data-nav] {
  position: relative;
  overflow: hidden;
}
[data-nav]::before {
  content: '→ ';
  opacity: 0;
  transform: translateX(-8px);
  display: inline-block;
  transition: opacity 160ms, transform 160ms;
  color: var(--accent-ferm, #2fd06a);
  font-size: 12px;
}
[data-nav]:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* ── 6. DISTILLATION — STONE + ARTIFACT BUTTON ──────────────────────── */

/* Stone canvas — accent glow ring */
#stone-model-viewer {
  filter: drop-shadow(0 0 8px rgba(255, 106, 26, 0.2));
  transition: filter 400ms;
}
#stone-model-viewer:hover {
  filter: drop-shadow(0 0 18px rgba(255, 106, 26, 0.5));
}

/* Artifact retrieve button — full premium treatment */
[data-distill-btn] {
  position: relative;
  overflow: hidden;
  letter-spacing: 0.2em;
  transition: background 220ms, color 220ms, box-shadow 220ms, transform 120ms;
}
[data-distill-btn]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.07) 50%, transparent 60%);
  background-size: 200% 200%;
  background-position: 200% 0;
  transition: background-position 500ms;
}
[data-distill-btn]:hover::after {
  background-position: -200% 0;
}
[data-distill-btn]:hover {
  box-shadow: 0 0 24px rgba(255, 106, 26, 0.4), inset 0 0 0 1px rgba(255, 106, 26, 0.6);
  transform: translateY(-1px);
}
[data-distill-btn]:active {
  transform: translateY(0);
}

/* Distillation tagline + tagline body */
[data-hero] main > section:nth-child(3) h3 {
  text-shadow: 0 2px 20px rgba(255, 138, 77, 0.15);
}

/* ── 7. TERMINAL / CONSOLE ──────────────────────────────────────────── */
[data-console] {
  background: rgba(8, 7, 10, 0.92) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: height 180ms ease;
}

/* Resize handle — stronger accent visibility */
[data-console-resize] {
  background: linear-gradient(90deg, transparent 0%, var(--con-accent, #ff6a1a) 50%, transparent 100%) !important;
  opacity: 0.22 !important;
  transition: opacity 200ms !important;
}
[data-console-resize]:hover { opacity: 0.55 !important; }

/* Console header bar */
[data-console] > div:nth-child(2) {
  background: rgba(0,0,0,0.28);
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* CLI log output */
[data-cli-log] {
  line-height: 1.6 !important;
}

/* CLI input line */
[data-cli-input] {
  caret-color: var(--con-accent, #ff6a1a);
  transition: color 200ms;
}
[data-cli-input]::placeholder {
  opacity: 0.28;
  font-style: italic;
}

/* Pop-out expand button */
[data-console-popout] {
  transition: background 180ms, color 180ms, border-color 180ms;
}
[data-console-popout]:hover {
  background: rgba(255, 106, 26, 0.12) !important;
  border-color: rgba(255, 106, 26, 0.4) !important;
  color: var(--con-accent, #ff6a1a) !important;
}

/* ── 8. ARCHIVES — SECTION SHELL ────────────────────────────────────── */
[data-archives] {
  position: relative;
}

/* Section headers — subtle left border accent + breathing glow */
[data-archives] section > div:first-child h2,
[data-archives] section > div:first-child h2[data-scroll-glitch] {
  text-shadow: 0 0 40px currentColor;
  letter-spacing: -0.01em;
}

/* Section header rows — glass background on hover */
[data-archives] section > div:first-child {
  transition: background 300ms;
}
[data-archives] section > div:first-child:hover {
  background: rgba(255,255,255,0.014);
}

/* ── 9. PROJECT CARDS ────────────────────────────────────────────────── */
[data-projects] a {
  position: relative;
  transition: background 180ms, transform 200ms, box-shadow 200ms !important;
}
[data-projects] a::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent-dist, #ff8a4d);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-projects] a:hover::before { transform: scaleY(1); }
[data-projects] a:hover {
  transform: translateX(3px) !important;
  box-shadow: -3px 0 0 var(--accent-dist, #ff8a4d) !important;
}

/* Project card — case file CTA link */
[data-projects] a span:last-child {
  transition: letter-spacing 200ms, opacity 200ms;
}
[data-projects] a:hover span:last-child {
  letter-spacing: 0.2em !important;
}

/* ── 10. APPARATUS / APP CARDS ──────────────────────────────────────── */
[data-apps] a {
  position: relative;
  transition: background 180ms, border-left-color 200ms !important;
}
[data-apps] a::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--accent-amber, #e5b83b);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
[data-apps] a:hover::before { transform: scaleY(1); }

[data-apps] a h3 {
  transition: letter-spacing 200ms;
}
[data-apps] a:hover h3 { letter-spacing: -0.005em; }

/* ── 11. TRANSMISSIONS ──────────────────────────────────────────────── */
[data-transmissions] a {
  position: relative;
  transition: background 180ms, padding-left 200ms !important;
}
[data-transmissions] a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 34px; right: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent-ferm, #2fd06a), transparent);
  opacity: 0;
  transition: opacity 300ms;
}
[data-transmissions] a:hover::after { opacity: 0.35; }

[data-transmissions] a span:first-child {
  transition: opacity 200ms, color 200ms;
}
[data-transmissions] a:hover span:first-child {
  opacity: 1 !important;
  color: var(--accent-ferm, #2fd06a);
}

/* ── 12. GRIMOIRE ───────────────────────────────────────────────────── */
#grimoire {
  position: relative;
}
#grimoire::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 40% at 85% 50%, rgba(229,184,59,0.04) 0%, transparent 70%);
  pointer-events: none;
}

[data-grimoire] {
  background: rgba(255, 255, 255, 0.012) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  transition: border-color 300ms;
}
[data-grimoire]:hover {
  border-color: rgba(229, 184, 59, 0.2) !important;
}

[data-book-panel] {
  background: rgba(10,8,6,0.5) !important;
  border: 1px solid rgba(229,184,59,0.12) !important;
  transition: border-color 300ms, box-shadow 300ms;
}
[data-book-panel]:hover {
  border-color: rgba(229, 184, 59, 0.3) !important;
  box-shadow: 0 0 20px rgba(229, 184, 59, 0.06) !important;
}

/* Grimoire rites — hover highlight */
[data-grimoire] > div {
  transition: background 160ms;
}
[data-grimoire] > div:hover {
  background: rgba(229, 184, 59, 0.04);
}

/* ── 13. FEED (THE WELL) ────────────────────────────────────────────── */
[data-feed] > div > div {
  transition: border-color 200ms, background 200ms, transform 200ms;
}
[data-feed] > div > div:hover {
  border-color: rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.022) !important;
  transform: translateY(-2px);
}

/* Feed section header */
#misc > div:first-child h2 {
  text-shadow: 0 0 40px rgba(158,201,238,0.4);
}

/* Feed end marker */
[data-feed-end] {
  letter-spacing: 0.25em;
  transition: opacity 400ms;
}

/* ── 14. CASE FILE OVERLAY ──────────────────────────────────────────── */
[data-detail] {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 200ms;
}

[data-detail] > div {
  background: rgba(9, 8, 12, 0.96) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: var(--shadow-lg);
}

[data-detail-close] {
  transition: background 160ms, border-color 160ms, color 160ms;
}
[data-detail-close]:hover {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.3) !important;
}

[data-detail-title] {
  line-height: 1.08 !important;
  letter-spacing: -0.015em;
}

/* ── 15. TOOLTIP ────────────────────────────────────────────────────── */
[data-tooltip] {
  background: rgba(8, 7, 12, 0.92) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: var(--shadow-md) !important;
  letter-spacing: 0.01em;
}

/* ── 16. PAGE FOOTER ────────────────────────────────────────────────── */
footer[data-footer] {
  background: rgba(10,10,12,0.95);
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.04em;
}

footer[data-footer] a {
  transition: color 180ms, border-color 180ms;
}
footer[data-footer] a:hover {
  color: var(--text-color, #9f50e6);
  border-bottom-color: currentColor !important;
}

/* ── 17. AUDIO TOGGLE ───────────────────────────────────────────────── */
[data-audio-toggle] {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.07) !important;
  transition: background 200ms, border-color 200ms, color 200ms, opacity 200ms, transform 120ms;
}
[data-audio-toggle]:hover {
  background: rgba(159,80,230,0.12) !important;
  border-color: rgba(159,80,230,0.4) !important;
  opacity: 1 !important;
  transform: scale(1.06);
}

/* ── 18. NOISE + SCAN OVERLAYS ─────────────────────────────────────── */
[data-dither] {
  opacity: 0.07 !important;
}

[data-scan] > div {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.018) 50%, transparent) !important;
}

/* ── 19. TRANSMUTATION CIRCLE OVERLAY ──────────────────────────────── */
[data-transmute] {
  background: radial-gradient(ellipse at center, rgba(10,8,6,0.3), rgba(10,8,6,0.7)) !important;
}

/* ── 20. SECTION HEADING REFINEMENT (archives) ──────────────────────── */
[data-archives] h2 {
  font-variant-ligatures: common-ligatures;
}

/* Count badges next to section headings */
[data-archives] section > div:first-child span:last-child {
  transition: opacity 200ms, color 200ms;
}
[data-archives] section:hover > div:first-child span:last-child {
  opacity: 0.8 !important;
}

/* ── 21. CIRCLE CANVASES (Calc / Ferm panes) ────────────────────────── */
#circle-calc {
  filter: drop-shadow(0 0 14px rgba(var(--calc-rgb), 0.35));
  transition: filter 400ms;
}
#circle-calc:hover {
  filter: drop-shadow(0 0 28px rgba(var(--calc-rgb), 0.6));
}
#circle-ferm {
  filter: drop-shadow(0 0 14px rgba(var(--ferm-rgb), 0.3));
  transition: filter 400ms;
}
#circle-ferm:hover {
  filter: drop-shadow(0 0 28px rgba(var(--ferm-rgb), 0.55));
}

/* ── 22. FERMENTATION — pre block / tags ────────────────────────────── */
[data-hero] main > section:nth-child(2) pre {
  border-color: rgba(47, 208, 106, 0.15) !important;
  background: rgba(0, 0, 0, 0.35) !important;
  transition: border-color 300ms;
}
[data-hero] main > section:nth-child(2) pre:hover {
  border-color: rgba(47, 208, 106, 0.3) !important;
}

/* Active cultures table */
[data-hero] main > section:nth-child(2) > div:last-child > div:nth-child(6) {
  border-color: rgba(47,208,106,0.12) !important;
}
[data-hero] main > section:nth-child(2) > div:last-child > div:nth-child(6) > div {
  transition: background 180ms;
}
[data-hero] main > section:nth-child(2) > div:last-child > div:nth-child(6) > div:hover {
  background: rgba(47,208,106,0.04) !important;
}

/* ── 23. RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  [data-hero] main > section h2 {
    font-size: clamp(28px, 3.5vw, 38px) !important;
  }
}

@media (max-width: 720px) {
  /* Hero: stack panes vertically */
  [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; }
  [data-hero] main > section > div:last-child { overflow: visible !important; flex: none !important; padding-bottom: 40px !important; }

  /* Atmospheric pseudo-elements: taller on mobile to compensate for vertical layout */
  [data-hero] main > section:nth-child(1)::after,
  [data-hero] main > section:nth-child(2)::after,
  [data-hero] main > section:nth-child(3)::after {
    height: 140px;
  }

  /* Hide the noisy ticker / status nodes on small screens */
  [data-ticker], [data-status-nodes]   { display: none !important; }

  /* Console eats less of small screens */
  [data-console]                       { height: 116px !important; }

  /* Archives: single column */
  [data-archives] { padding-bottom: 140px; }
  [data-projects] { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  [data-hero] header > div:first-child span:first-child {
    font-size: 22px !important;
  }
  [data-archives] section > div:first-child h2,
  [data-archives] section > div:first-child h2[data-scroll-glitch] {
    font-size: 36px !important;
  }
}

/* ── 24. REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}