/* ──────────────────────────────────────────────
   LIQUID GLASS SYSTEM — tokens, utilities, animated scene.
   Loads after variables.css; extends those tokens.
─────────────────────────────────────────────── */
:root {
  /* Blur scale (ported from the reference pen) */
  --blur-sm: blur(8px) saturate(130%);
  --blur-md: blur(18px) saturate(135%);
  --blur-lg: blur(32px) saturate(140%);
  --blur-xl: blur(60px) saturate(150%);

  /* Glass tints — light theme defaults */
  --g-fill:        rgba(255, 255, 255, 0.55);
  --g-fill-strong: rgba(255, 255, 255, 0.72);
  --g-fill-soft:   rgba(255, 255, 255, 0.30);
  --g-border:      rgba(255, 255, 255, 0.65);
  --g-border-soft: rgba(255, 255, 255, 0.35);

  /* Top reflection + inner highlight (the "glass" tells) */
  --g-reflection: linear-gradient(135deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 48%);
  --g-inner: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 1px rgba(0,0,0,0.06);
  --g-shadow: 0 8px 32px rgba(6, 26, 43, 0.16);
  --g-shadow-float: 0 20px 60px rgba(6, 26, 43, 0.26), 0 4px 16px rgba(6,26,43,0.12);

  /* Scene blob colours (brand ocean palette) */
  --blob-1: radial-gradient(circle, #10c6d8, #1f7fd4);
  --blob-2: radial-gradient(circle, #74e3ef, #1f7fd4);
  --blob-3: radial-gradient(circle, #ffc14d, #ff6b35);
  --blob-opacity: 0.30;
}

html[data-theme="dark"] {
  --g-fill:        rgba(20, 42, 64, 0.45);
  --g-fill-strong: rgba(20, 42, 64, 0.62);
  --g-fill-soft:   rgba(255, 255, 255, 0.06);
  --g-border:      rgba(255, 255, 255, 0.18);
  --g-border-soft: rgba(255, 255, 255, 0.10);
  --g-reflection: linear-gradient(135deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 50%);
  --g-inner: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 -1px 1px rgba(0,0,0,0.25);
  --g-shadow: 0 8px 32px rgba(0,0,0,0.45);
  --g-shadow-float: 0 20px 60px rgba(0,0,0,0.55), 0 4px 16px rgba(0,0,0,0.4);
  --blob-opacity: 0.42;
}

/* Fallback when backdrop-filter is unsupported */
@supports not (backdrop-filter: blur(1px)) {
  .glass-surface { background: rgba(20,25,45,0.9); }
  html[data-theme="light"] .glass-surface { background: rgba(255,255,255,0.92); }
}

/* ── Utility: any glass panel ── */
.glass-surface {
  position: relative;
  background: var(--g-fill);
  -webkit-backdrop-filter: var(--blur-md);
  backdrop-filter: var(--blur-md);
  border: 1px solid var(--g-border);
  box-shadow: var(--g-shadow), var(--g-inner);
  overflow: hidden;
  isolation: isolate;
}
/* Diagonal top reflection — the signature glass highlight */
.glass-surface::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--g-reflection);
  pointer-events: none;
  z-index: 0;
}
.glass-surface > * { position: relative; z-index: 1; }

/* Hover refraction sweep for interactive cards */
.glass-hover { transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base); }
.glass-hover:hover {
  transform: translateY(-6px);
  box-shadow: var(--g-shadow-float), var(--g-inner);
  background: var(--g-fill-strong);
}

/* ── Animated background scene ── */
/* Single global backdrop behind the whole page: the themed base colour shows
   from body, with drifting blobs on top. Every section is transparent so this
   reads uniformly across the site (the same look the reviews section had). */
.page-scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.scene__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: var(--blob-opacity);
  animation: blobDrift var(--blob-dur, 20s) ease-in-out infinite alternate;
}
.scene__blob--1 { width: 640px; height: 640px; background: var(--blob-1); top: -180px; left: -120px; --blob-dur: 22s; }
.scene__blob--2 { width: 560px; height: 560px; background: var(--blob-2); bottom: -180px; right: -100px; --blob-dur: 18s; animation-delay: -8s; }
.scene__blob--3 { width: 380px; height: 380px; background: var(--blob-3); top: 45%; left: 55%; --blob-dur: 25s; animation-delay: -13s; }

@keyframes blobDrift {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(55px,-40px) scale(1.08); }
  66%  { transform: translate(-40px,55px) scale(0.94); }
  100% { transform: translate(30px,30px) scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .scene__blob { animation: none; }
}