/*
 * Theme Name: Modmotif Studios Core Theme
 * Description: Synesthetic Fluid Dynamics / Real-time Interactive Liquid Paint
 * Version: 7.0.0
 * Author: Antigravity AI
 */

/* ── Design System Tokens ── */
:root {
  --color-fluid-bg: #040406;
  --color-ink-silver: #e2e8f0;
  --color-ink-copper: #ea580c;
  --color-ink-gold: #f59e0b;
  --color-ink-cyan: #06b6d4;
  --color-border: rgba(255, 255, 255, 0.07);
  --color-glass-bg: rgba(4, 4, 6, 0.6);
  --font-sans: 'Space Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

body {
  background-color: var(--color-fluid-bg);
  color: var(--color-ink-silver);
  font-family: var(--font-sans);
  overflow: hidden;
  margin: 0;
  height: 100vh;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Interactive Fluid Canvas ── */
#fluid-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Blur and contrast upscales the low-res solver into high-fidelity paint swirls! */
  filter: blur(14px) contrast(1.75) saturate(1.35);
  pointer-events: none;
}

/* ── Hero Typography Window ── */
/* Solid mask everywhere except the cutout letterforms, where the fluid canvas shows through. */
.hero-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.hero-mask-text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 150px;
  letter-spacing: 0.01em;
}

.hero-mask-subtext {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 64px;
  letter-spacing: 0.5em;
}

/* ── Custom Pointer Brush Reticle ── */
.brush-cursor {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-ink-gold);
  border-radius: 50%;
  position: fixed;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: screen;
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
}

.brush-cursor.dragging {
  width: 48px;
  height: 48px;
  border-color: var(--color-ink-cyan);
  background-color: rgba(6, 182, 212, 0.05);
}

/* ── Cursor Liquid Trail ── */
/* Soft glow that lags behind the cursor, swells with fluid turbulence, and is tinted by
   the active panel's dye color. Position/transform/background set every frame in JS. */
.brush-cursor-trail {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9998;
  mix-blend-mode: screen;
  filter: blur(6px);
}

/* ── Whole-UI Fluid Reactivity (Option F) ── */
/* Nav, ink buttons, portfolio cards, header/footer chrome are nudged by the fluid
   velocity field beneath them every frame (see updateReactiveElements in studios-main.js). */
.fluid-reactive {
  will-change: transform;
}

/* ── Translucent Glass Panels ── */
.fluid-panel {
  position: relative;
  background: var(--color-glass-bg);
  backdrop-filter: blur(30px) saturate(130%);
  -webkit-backdrop-filter: blur(30px) saturate(130%);
  border-left: 1px solid var(--color-border);
  box-shadow: -15px 0 50px rgba(0, 0, 0, 0.9);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: text;
  -webkit-user-select: text;
  --panel-tint-r: 234;
  --panel-tint-g: 88;
  --panel-tint-b: 12;
}

/* Tints the glass with whatever dye color is currently flowing behind the panel
   (--panel-tint-* set every frame in JS via updatePanelTint). */
.fluid-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(var(--panel-tint-r) var(--panel-tint-g) var(--panel-tint-b));
  mix-blend-mode: overlay;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
  transition: background 0.3s linear;
}

.card-panel {
  transform: translateX(100%);
  pointer-events: none;
  box-shadow: none;
}

.card-panel.active {
  transform: translateX(0);
  pointer-events: auto;
}

/* ── Mobile Panel System ── */
body.is-mobile .card-panel {
  transform: translateY(105%);
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: 100%;
  height: 82vh;
  border-left: none;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,0.95);
}

body.is-mobile .card-panel.active {
  transform: translateY(0);
}

/* Mobile panel drag handle */
body.is-mobile .card-panel::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}

/* ── Mobile Nav Dock ── */
.mobile-nav-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  background: rgba(4, 4, 6, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 0 0 env(safe-area-inset-bottom, 0px);
}

.mobile-nav-item {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  transition: color 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-nav-item .nav-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-nav-item.active {
  color: var(--color-ink-copper);
}

.mobile-nav-item.active .nav-dot {
  opacity: 1;
}

/* ── Mobile Header ── */
body.is-mobile #fluid-canvas {
  filter: blur(8px) contrast(1.6) saturate(1.3);
}

/* Mobile footer hidden — replaced by dock */
body.is-mobile footer {
  display: none;
}

/* ── Mobile Header Sizing ── */
/* Reduce font/padding so tagline stays on one line next to the Monitor button */
body.is-mobile header > span {
  font-size: 6px;
  letter-spacing: 0.2em;
  white-space: nowrap;
}

body.is-mobile #atmosphere-btn {
  padding: 4px 8px;
  font-size: 7px;
  gap: 5px;
}

body.is-mobile #diagnostics-indicator {
  width: 5px;
  height: 5px;
  min-width: 5px;
}

/* ── Mobile Panel Tint — disabled ── */
/* Color tint overlay is off on mobile; dark glass looks cleaner without it. */
body.is-mobile .card-panel::before {
  display: none;
}

/* ── Navigation Indicators ── */
.fluid-nav-btn {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4);
  transition: all 0.4s ease;
  position: relative;
}

.fluid-nav-btn::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1.5px;
  background-color: var(--color-ink-copper);
  transition: width 0.4s ease;
}

.fluid-nav-btn:hover {
  color: #ffffff;
}

.fluid-nav-btn:hover::after {
  width: 14px;
}

.fluid-nav-btn.active {
  color: #ffffff;
}

.fluid-nav-btn.active::after {
  width: 14px;
}

/* ── Footer Link Underline Motion ── */
footer a {
  position: relative;
  transition: color 0.4s ease;
}

footer a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background-color: var(--color-ink-copper);
  transition: width 0.4s ease;
}

footer a:hover::after {
  width: 100%;
}

/* ── Cybernetic Action Buttons ── */
.ink-btn {
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.4s ease;
}

.ink-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
}

/* Portfolio items */
.portfolio-item {
  border: 1px solid rgba(255, 255, 255, 0.03);
  background-color: rgba(0, 0, 0, 0.4);
  transition: border-color 0.4s ease;
}

.portfolio-item:hover {
  border-color: var(--color-ink-copper);
}

/* Scrollbars */
.custom-scroll::-webkit-scrollbar {
  width: 2px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.05);
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--color-ink-gold);
}

/* ── Stream Card Plasma Field (JS-driven, closed-form sine plasma — no simulation) ── */
.stream-plasma-canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: blur(2px) contrast(1.3) saturate(1.4);
  /* pixel content set each frame via JS */
}

/* Fade in when playback starts, fade out when it pauses/ends — toggled by adding/
   removing .is-playing on SC.Widget PLAY/PAUSE/FINISH events (see studios-main.js /
   studios-mobile.js). Pure CSS transition, no per-frame JS involved. Slow on purpose —
   this should feel like it's gradually waking up / settling down, not popping. */
#stream-plasma-viz {
  opacity: 0;
  transition: opacity 8s ease;
}

#stream-plasma-viz.is-playing {
  opacity: 1;
}

/* True lava-lamp motion: the container itself ("glass jar") keeps a fixed shape — see
   rounded-xl on the element — and these blobs drift very slowly inside it. The SVG #
   stream-goo filter (blur + contrast) makes overlapping blobs visually fuse into one
   shape and separate again as they drift apart, instead of a single element's
   border-radius merely morphing (which can never actually split into pieces). Blended
   with screen mode so the warm blob color adds onto the plasma canvas beneath rather
   than covering it. All native CSS animation — independent of the canvas JS loop. */
.stream-lava-layer {
  position: absolute;
  inset: 0;
  filter: url(#stream-goo);
  mix-blend-mode: screen;
  pointer-events: none;
}

.stream-lava-blob {
  position: absolute;
  /* ellipse (not circle) follows the box's own clipped shape instead of always
     rendering a perfect round glow regardless of the border-radius outline */
  background: radial-gradient(ellipse, rgba(255, 180, 80, 0.9), rgba(234, 88, 12, 0.5) 60%, transparent 80%);
}

/* Sized more modestly than the first pass (that version had blob-1 filling 75% of the
   container's height, leaving it almost no room to actually go anywhere) so each blob
   has real open space to travel through, pass behind one another, and separate again —
   plus its own border-radius wobbles alongside the position, so it isn't just the same
   perfect circle sliding around (the "nipple" look) but an outline that keeps changing. */
.stream-lava-blob-1 {
  width: 40%;
  height: 58%;
  left: 3%;
  top: 18%;
  animation: lavaDrift1 26s ease-in-out infinite;
}

.stream-lava-blob-2 {
  width: 34%;
  height: 50%;
  left: 52%;
  top: 32%;
  animation: lavaDrift2 31s ease-in-out infinite;
}

.stream-lava-blob-3 {
  width: 30%;
  height: 46%;
  left: 30%;
  top: 6%;
  animation: lavaDrift3 35s ease-in-out infinite;
}

@keyframes lavaDrift1 {
  0%   { transform: translate(0%, 0%) scale(1); border-radius: 62% 38% 55% 45% / 40% 50% 50% 60%; }
  25%  { transform: translate(90%, 40%) scale(1.25); border-radius: 35% 65% 40% 60% / 65% 35% 60% 40%; }
  50%  { transform: translate(140%, -30%) scale(0.85); border-radius: 70% 30% 60% 40% / 45% 60% 40% 55%; }
  75%  { transform: translate(50%, -55%) scale(1.1); border-radius: 40% 60% 70% 30% / 55% 40% 65% 35%; }
  100% { transform: translate(0%, 0%) scale(1); border-radius: 62% 38% 55% 45% / 40% 50% 50% 60%; }
}

@keyframes lavaDrift2 {
  0%   { transform: translate(0%, 0%) scale(1); border-radius: 40% 60% 45% 55% / 55% 40% 60% 45%; }
  30%  { transform: translate(-110%, -45%) scale(1.2); border-radius: 65% 35% 60% 40% / 35% 65% 30% 70%; }
  60%  { transform: translate(-60%, 60%) scale(0.8); border-radius: 30% 70% 35% 65% / 60% 40% 65% 35%; }
  100% { transform: translate(0%, 0%) scale(1); border-radius: 40% 60% 45% 55% / 55% 40% 60% 45%; }
}

@keyframes lavaDrift3 {
  0%   { transform: translate(0%, 0%) scale(1); border-radius: 55% 45% 65% 35% / 45% 55% 40% 60%; }
  35%  { transform: translate(60%, -70%) scale(0.85); border-radius: 30% 70% 40% 60% / 65% 30% 70% 35%; }
  65%  { transform: translate(-70%, 35%) scale(1.15); border-radius: 68% 32% 55% 45% / 35% 60% 45% 65%; }
  100% { transform: translate(0%, 0%) scale(1); border-radius: 55% 45% 65% 35% / 45% 55% 40% 60%; }
}

/* ── Stream Card Scrubber ── */
.stream-scrubber-track {
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  position: relative;
  transition: height 0.2s ease;
  cursor: pointer;
}

#stream-scrubber-container:hover .stream-scrubber-track {
  height: 4px;
}

.stream-scrubber-fill {
  height: 100%;
  background: var(--color-ink-copper);
  width: 0%;
  transition: width 0.1s linear;
}

/* ── Stream Volume Slider ── */
.stream-vol-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
  cursor: pointer;
  transition: height 0.2s ease;
}

.stream-vol-slider:hover {
  height: 3px;
}

.stream-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ink-copper);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.stream-vol-slider:hover::-webkit-slider-thumb {
  transform: scale(1.4);
}

.stream-vol-slider::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-ink-copper);
  border: none;
  cursor: pointer;
}