/* ============================================================
   fluid.css — Mor Fluid Interactive, monochrome
   The motion + gradient layer. Everything here is white/gray/black:
   depth comes from luminance, never hue.

   Ported from mor_blogger_theme_editor/theme_presets/mor_fluid_interactive.toml:
     · moon-glow backwash — three white pools drifting over black
     · glassy luminous panels lit from above
     · waterline hairlines under the header / over the footer
     · springy hover physics (transform/opacity only, GPU-cheap)
     · prose underlines that pour in from the left

   Dark theme only where translucency matters; light theme stays
   flat Wikipedia Vector. Structure/tokens live in looks.css,
   layout in panels.css, component chrome in components.css.
   ============================================================ */

:root {
  --fluid-ease: cubic-bezier(0.34, 1.4, 0.5, 1); /* gentle overshoot */
  --fluid-speed: 240ms;
}

/* ---- Moon-glow backwash: three white pools over ink ---- */

html,
body {
  background-color: var(--bg-base);
}

html:not([data-theme="light"]) body {
  min-height: 100vh;
  background-image:
    radial-gradient(circle at 14% 16%, rgba(255, 255, 255, 0.055) 0, transparent 30rem),
    radial-gradient(circle at 84% 8%, rgba(255, 255, 255, 0.035) 0, transparent 26rem),
    radial-gradient(circle at 50% 96%, rgba(255, 255, 255, 0.05) 0, transparent 34rem);
  background-size: 150% 150%, 140% 140%, 160% 160%;
  background-position: 0% 0%, 100% 0%, 50% 100%;
  background-attachment: fixed;
  animation: mor-fluid-drift 36s ease-in-out infinite alternate;
}

@keyframes mor-fluid-drift {
  from { background-position: 0% 0%, 100% 0%, 50% 100%; }
  to   { background-position: 24% 12%, 74% 20%, 36% 84%; }
}

/* ---- Glassy chrome: header and side panels float on the glow ---- */

html:not([data-theme="light"]) .main-header {
  background: color-mix(in srgb, var(--bg-base) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html:not([data-theme="light"]) .mor-panel {
  background: color-mix(in srgb, var(--bg-panel) 62%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html:not([data-theme="light"]) .panel-header {
  background: color-mix(in srgb, var(--fg-base) 6%, transparent);
}

/* ---- Waterlines: white hairlines that fade at both ends ---- */

.main-header {
  position: relative;
}

html:not([data-theme="light"]) .main-header::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg-base) 55%, transparent), transparent);
  pointer-events: none;
}

.mor-footer {
  position: relative;
  margin-top: auto;
}

html:not([data-theme="light"]) .mor-footer::before {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg-base) 45%, transparent), transparent);
  pointer-events: none;
}

/* ---- Luminous panels: lit from above, grounded by depth ---- */

html:not([data-theme="light"]) .card,
html:not([data-theme="light"]) .lexicosphere-note,
html:not([data-theme="light"]) .deweyverse-note,
html:not([data-theme="light"]) .hero-consumers,
html:not([data-theme="light"]) .mor-footer {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-panel) 93%, var(--fg-base)) 0%,
    color-mix(in srgb, var(--bg-panel) 55%, var(--bg-base)) 100%
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ---- Cards: surface tension. Springy lift inside a faint ring ---- */

.card {
  transition:
    transform var(--fluid-speed) var(--fluid-ease),
    border-color var(--fluid-speed) ease,
    box-shadow var(--fluid-speed) ease,
    background var(--fluid-speed) ease;
  will-change: transform;
}

.card:hover,
.card-link:hover .card,
.card-link:focus-visible .card {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.5),
    0 0 0 3px rgba(255, 255, 255, 0.07);
}

html:not([data-theme="light"]) .card:hover,
html:not([data-theme="light"]) .card-link:hover .card,
html:not([data-theme="light"]) .card-link:focus-visible .card {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg-elevated) 90%, var(--fg-base)) 0%,
    color-mix(in srgb, var(--bg-elevated) 65%, var(--bg-base)) 100%
  );
}

/* ---- Nav: buoyant links (monochrome inversion from header.css stays) ---- */

.mor-nav a {
  transition:
    transform var(--fluid-speed) var(--fluid-ease),
    background var(--fluid-speed) ease,
    color var(--fluid-speed) ease;
}

.mor-nav a:hover,
.mor-nav a:focus-visible {
  transform: translateY(-2px);
}

/* ---- Buttons: springy lift ---- */

.btn-primary,
.btn-ghost,
.pill {
  border-radius: 2px;
  transition:
    transform var(--fluid-speed) var(--fluid-ease),
    background var(--fluid-speed) ease,
    color var(--fluid-speed) ease,
    border-color var(--fluid-speed) ease,
    box-shadow var(--fluid-speed) ease;
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-ghost:hover,
.btn-ghost:focus-visible,
.pill:hover,
.pill:focus-visible {
  transform: translateY(-2px);
}

/* ---- Prose links: the underline pours in from the left ---- */

.prose a,
.hero-tagline a,
.philosophy-body a,
.section-sub a {
  color: var(--link-color);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--link-color), color-mix(in srgb, var(--link-color) 45%, transparent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size var(--fluid-speed) var(--fluid-ease);
}

.prose a:visited,
.hero-tagline a:visited,
.philosophy-body a:visited,
.section-sub a:visited {
  color: var(--link-visited);
}

.prose a:hover,
.prose a:focus-visible,
.hero-tagline a:hover,
.hero-tagline a:focus-visible,
.philosophy-body a:hover,
.philosophy-body a:focus-visible,
.section-sub a:hover,
.section-sub a:focus-visible {
  background-color: transparent;
  background-size: 100% 1px;
  text-decoration: none;
}

/* ---- Still water: honor reduced motion ---- */
/* looks.css zeroes all durations globally; this also removes the
   drift and pins hover transforms so nothing jumps. */

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
  }

  .card:hover,
  .card-link:hover .card,
  .card-link:focus-visible .card,
  .mor-nav a:hover,
  .mor-nav a:focus-visible,
  .btn-primary:hover,
  .btn-primary:focus-visible,
  .btn-ghost:hover,
  .btn-ghost:focus-visible,
  .pill:hover,
  .pill:focus-visible,
  .hero-image-link:hover .hero-image,
  .hero-image-link:focus-visible .hero-image {
    transform: none;
  }
}