/* ============================================================
   FROSTED GLASS ENGINE - CORE STYLESHEET v1.3
   src/core.css

   The three laws of convincing CSS glass:
     1. The fill must be LOW opacity so the scene bleeds through.
     2. The blobs behind must be VIVID and CLOSE so there is
        something colorful to blur and distort.
     3. The surface needs MULTIPLE specular layers at rest, not
        only on hover — a static edge shimmer, a persistent
        diagonal streak, and a dynamic pointer glare on top.
   ============================================================ */


/* ------------------------------------------------------------
   DESIGN TOKENS
   ------------------------------------------------------------ */

:root {
  /* --- Glass surface physics --- */
  --glass-blur:            24px;
  --glass-saturation:      2.2;          /* punchy: amplifies blob colors through the pane */
  --glass-brightness:      1.06;         /* slightly brighter than the scene = lit glass */
  --glass-bg-opacity:      0.18;         /* LOW — the key to transparency */
  --glass-bg-tint:         255, 255, 255;

  /* --- Border: bright top, softer sides, barely-there bottom --- */
  --glass-border-top:      rgba(255, 255, 255, 0.90);
  --glass-border-side:     rgba(255, 255, 255, 0.55);
  --glass-border-bottom:   rgba(200, 210, 230, 0.25);

  /* --- Static diagonal specular streak (the "glass identity") --- */
  --glass-streak-opacity:  0.12;         /* visible at rest, not distracting */

  /* --- Outer shadow --- */
  --glass-shadow-color:    60, 90, 140;
  --glass-shadow-opacity:  0.18;

  /* --- Dynamic pointer glare (injected by engine.js) --- */
  --mouse-x:               50%;
  --mouse-y:               50%;
  --glare-size:            500px;
  --glare-opacity:         0;            /* engine sets this on hover */

  /* --- Node geometry --- */
  --glass-radius:          20px;
  --glass-padding:         2.5rem 3rem;

  /* --- Typography --- */
  --font-display:          'DM Mono', 'Courier New', monospace;
  --font-body:             'DM Sans', 'Segoe UI', sans-serif;

  --text-primary:          #0c2040;
  --text-secondary:        #3a5a82;
  --text-accent:           #1756c8;

  /* --- Accent --- */
  --accent-primary:        #1756c8;
  --accent-rgb:            23, 86, 200;

  /* --- Transition speeds --- */
  --t-fast:                90ms;
  --t-mid:                 240ms;
  --t-slow:                480ms;
}


/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html {
  font-size:               16px;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ------------------------------------------------------------
   BODY - The scene the glass sits inside.
   Everything here is deliberate: the blobs must be CLOSE
   (low blur, tight gradient stops) and SATURATED so they
   punch through the low-opacity glass fill.
   ------------------------------------------------------------ */

body {
  min-height:   100dvh;
  font-family:  var(--font-body);
  color:        var(--text-primary);
  overflow-x:   hidden;
  position:     relative;

  /*
    Single-family background: a calm, slightly cool off-white.
    Not pure white — pure white kills the glass rim contrast.
    This pale blue-grey gives the blobs a neutral canvas to sit
    on while keeping the overall read as "clean daylight".
  */
  background: linear-gradient(160deg, #e8eff8 0%, #eef3fa 50%, #f0f4f9 100%);
}

/* Global grain — the texture that separates frosted glass from plastic */
body::before {
  content:        '';
  position:       fixed;
  inset:          0;
  pointer-events: none;
  z-index:        9999;
  opacity:        0.038;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}


/* ------------------------------------------------------------
   BLOBS — vivid, close, layered color masses.
   Low blur = sharp-ish color boundaries = the glass has
   something to distort and blur, making the effect visible.
   ------------------------------------------------------------ */

.blob {
  position:       fixed;
  border-radius:  50%;
  pointer-events: none;
  z-index:        0;
}

/* Add to src/core.css below the .blob classes */

@keyframes fluid-drift {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  33% { transform: translate(3vw, -4vh) rotate(120deg) scale(1.05); }
  66% { transform: translate(-2vw, 3vh) rotate(240deg) scale(0.95); }
  100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}

.blob--a { animation: fluid-drift 28s infinite ease-in-out alternate; }
.blob--b { animation: fluid-drift 34s infinite ease-in-out alternate-reverse; }
.blob--c { animation: fluid-drift 22s infinite ease-in-out alternate; }
.blob--d { animation: fluid-drift 26s infinite ease-in-out alternate-reverse; }

/*
  All four blobs live inside a single blue-slate family.
  The variation is VALUE (light vs dark) and TEMPERATURE
  (slightly warmer vs cooler within the same hue), not hue.
  This gives the glass enough tonal contrast to reveal its
  frosted depth while reading as one unified, calm palette.

  Hue anchor: ~215 (cool sky blue)
  Light blob:  #a8c8f0  (pale sky, top-left)
  Mid blob:    #6ea8e0  (clear blue, bottom-right)
  Cool accent: #c0d4ee  (powder, centre — very soft)
  Warm accent: #b8cce4  (blue-grey, upper-right — subtle warmth)
*/

/* Pale sky — top-left, large, the dominant wash */
.blob--a {
  width:      720px;
  height:     720px;
  top:        -200px;
  left:       -160px;
  background: radial-gradient(circle at 40% 40%,
    #b8d8f8 0%,
    #7ab0e8 28%,
    #4a88cc 52%,
    transparent 70%
  );
  filter:  blur(55px);
  opacity: 0.65;
}

/* Clear blue — bottom-right, second anchor */
.blob--b {
  width:      560px;
  height:     560px;
  bottom:     -120px;
  right:      -100px;
  background: radial-gradient(circle at 55% 55%,
    #9ec4ec 0%,
    #5a90d4 30%,
    #2e62a8 56%,
    transparent 72%
  );
  filter:  blur(52px);
  opacity: 0.55;
}

/* Powder — centre, very soft, creates mid-field depth */
.blob--c {
  width:      440px;
  height:     440px;
  top:        38%;
  left:       45%;
  background: radial-gradient(circle at 50% 50%,
    #d0e4f8 0%,
    #9abce8 32%,
    #5a88c4 58%,
    transparent 74%
  );
  filter:  blur(60px);
  opacity: 0.40;
}

/* Blue-grey — upper right, the warm-toned counterpoint within the family */
.blob--d {
  width:      380px;
  height:     380px;
  top:        6%;
  right:      8%;
  background: radial-gradient(circle at 50% 50%,
    #c8daf0 0%,
    #8aaed8 34%,
    #4a78b0 60%,
    transparent 76%
  );
  filter:  blur(65px);
  opacity: 0.35;
}


/* ------------------------------------------------------------
   GLASS NODE - Base surface
   The heart of the engine. Three pseudo-elements work together:
     ::before  — dynamic pointer glare (engine-driven)
     ::after   — static specular streak (always visible)
   ------------------------------------------------------------ */

[data-glass-node] {
  position:     relative;
  isolation:    isolate;
  padding:      var(--glass-padding);
  border-radius: var(--glass-radius);
  overflow:     hidden;

  /* LOW fill opacity = transparency = glass, not paint */
  background-color: rgba(var(--glass-bg-tint), var(--glass-bg-opacity));

  /* The core frosting — saturation amplifies blob colors seen through the pane */
  backdrop-filter:
    blur(var(--glass-blur))
    saturate(var(--glass-saturation))
    brightness(var(--glass-brightness));
  -webkit-backdrop-filter:
    blur(var(--glass-blur))
    saturate(var(--glass-saturation))
    brightness(var(--glass-brightness));

  /* Four-sided border: bright top rim, medium sides, whisper bottom */
  border-top:    1px solid var(--glass-border-top);
  border-left:   1px solid var(--glass-border-side);
  border-right:  1px solid var(--glass-border-side);
  border-bottom: 1px solid var(--glass-border-bottom);

  /* Layered shadows: broad ambient + tight contact + inset top specular */
  box-shadow:
    0 8px  48px rgba(var(--glass-shadow-color), var(--glass-shadow-opacity)),
    0 2px  12px rgba(var(--glass-shadow-color), 0.10),
    0 1px   3px rgba(var(--glass-shadow-color), 0.08),
    inset 0  1px 0   rgba(255, 255, 255, 0.80),   /* bright top edge */
    inset 0 -1px 0   rgba(255, 255, 255, 0.20),   /* subtle bottom edge */
    inset 1px 0  0   rgba(255, 255, 255, 0.35),   /* left inner rim */
    inset -1px 0 0   rgba(255, 255, 255, 0.15);   /* right inner rim */

  transition:
    box-shadow var(--t-mid) ease,
    transform  var(--t-mid) ease,
    border-top-color var(--t-mid) ease;

  will-change: transform, backdrop-filter;
}


/* Dynamic pointer glare — tracks mouse via engine.js CSS var writes */
[data-glass-node]::before {
  content:        '';
  position:       absolute;
  inset:          0;
  border-radius:  inherit;
  pointer-events: none;
  z-index:        3;

  /* Three-stop chromatic glare: white core → blue haze → transparent */
  background: radial-gradient(
    circle var(--glare-size) at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255,          var(--glare-opacity))                 0%,
    rgba(210, 230, 255, calc(var(--glare-opacity) * 0.70))            18%,
    rgba(180, 215, 255, calc(var(--glare-opacity) * 0.35))            38%,
    rgba(160, 200, 255, calc(var(--glare-opacity) * 0.10))            56%,
    transparent                                                         70%
  );

  /* No CSS transition here — JS lerp handles smoothing */
}


/* Replace the existing [data-glass-node]::after in src/core.css */

[data-glass-node]::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 2;

  /* Expanded gradient for continuous panning */
  background: linear-gradient(
    108deg,
    transparent 0%,
    transparent 40%,
    rgba(255, 255, 255, var(--glass-streak-opacity)) 48%,
    rgba(255, 255, 255, calc(var(--glass-streak-opacity) * 1.8)) 50%,
    rgba(255, 255, 255, var(--glass-streak-opacity)) 52%,
    transparent 60%,hover
    transparent 100%
  );
  
  background-size: 200% 200%;
  transform: rotate(0deg);
  /* The liquid panning animation */
  animation: liquid-shimmer 12s infinite linear;
}

@keyframes liquid-shimmer {
  0% { background-position: 200% -200%; }
  100% { background-position: -200% 200%; }
}


/* Content sits above both pseudo layers */
[data-glass-node] > * {
  position: relative;
  z-index:  4;
}


/* ------------------------------------------------------------
   HOVER STATE — deepen shadow, brighten top rim
   ------------------------------------------------------------ */

[data-glass-node]:hover {
  box-shadow:
    0 16px 60px rgba(var(--glass-shadow-color), 0.24),
    0 4px  18px rgba(var(--glass-shadow-color), 0.14),
    0 1px   4px rgba(var(--glass-shadow-color), 0.10),
    inset 0  1px 0   rgba(255, 255, 255, 0.95),
    inset 0 -1px 0   rgba(255, 255, 255, 0.25),
    inset 1px 0  0   rgba(255, 255, 255, 0.45),
    inset -1px 0 0   rgba(255, 255, 255, 0.20);

  border-top-color: rgba(255, 255, 255, 1.0);
}


/* ------------------------------------------------------------
   ACTIVE STATE — physical press
   ------------------------------------------------------------ */

[data-glass-node]:active {
  transform:   scale(0.993);
  transition:  all 0.07s ease;
  box-shadow:
    0 4px 20px rgba(var(--glass-shadow-color), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.70),
    0 0 0 2px rgba(var(--accent-rgb), 0.22);
}

/* Add this anywhere in src/core.css */
@keyframes caustic-pulse {
  0% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80), inset 0 -1px 0 rgba(255, 255, 255, 0.20), 0 8px 48px rgba(var(--glass-shadow-color), var(--glass-shadow-opacity)); }
  50% { box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.30), 0 12px 55px rgba(var(--accent-rgb), 0.15); }
  100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.80), inset 0 -1px 0 rgba(255, 255, 255, 0.20), 0 8px 48px rgba(var(--glass-shadow-color), var(--glass-shadow-opacity)); }
}

/* Update your existing hover block */
[data-glass-node]:hover {
  border-top-color: rgba(255, 255, 255, 1.0);
  /* Triggers the liquid light pulse when hovered */
  animation: caustic-pulse 2.5s infinite ease-in-out;
}

/* ------------------------------------------------------------
   VARIANTS
   ------------------------------------------------------------ */

/* Accent: deeper indigo-blue tint, white text, stronger saturation */
[data-glass-node="accent"] {
  --glass-bg-tint:        50, 100, 200;
  --glass-bg-opacity:     0.30;
  --glass-saturation:     2.6;
  --glass-border-top:     rgba(180, 210, 255, 0.92);
  --glass-border-side:    rgba(160, 195, 245, 0.55);
  --glass-border-bottom:  rgba(130, 170, 230, 0.25);
  --glass-shadow-color:   15, 45, 140;
  --glass-shadow-opacity: 0.28;
  --glass-streak-opacity: 0.22;
  --text-primary:         #ffffff;
  --text-secondary:       rgba(210, 228, 255, 0.88);
  --text-accent:          rgba(185, 215, 255, 0.96);
  --accent-primary:       #a8ccff;
  --accent-rgb:           168, 204, 255;
}

/* Elevated: maximum depth and opacity — the "hero card" */
[data-glass-node="elevated"] {
  --glass-blur:            36px;
  --glass-saturation:      2.5;
  --glass-brightness:      1.08;
  --glass-bg-opacity:      0.28;         /* slightly more fill for depth */
  --glass-shadow-opacity:  0.22;
  --glass-streak-opacity:  0.16;
}

/* Subtle: barely-there, mostly see-through */
[data-glass-node="subtle"] {
  --glass-blur:            14px;
  --glass-saturation:      1.6;
  --glass-brightness:      1.03;
  --glass-bg-opacity:      0.10;
  --glass-border-top:      rgba(255, 255, 255, 0.65);
  --glass-border-side:     rgba(255, 255, 255, 0.35);
  --glass-border-bottom:   rgba(255, 255, 255, 0.15);
  --glass-shadow-opacity:  0.08;
  --glass-streak-opacity:  0.07;
}


/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */

.scene {
  position:              relative;
  z-index:               1;
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:                   1.75rem;
  max-width:             1100px;
  margin:                0 auto;
  padding:               5rem 2rem 6rem;
  align-items:           start;
}

.scene__header {
  grid-column:   1 / -1;
  margin-bottom: 1.5rem;
}


/* ------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------ */

[data-glass-node] .label {
  display:        block;
  font-family:    var(--font-display);
  font-size:      0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--text-accent);
  margin-bottom:  0.75rem;
}

[data-glass-node] h2 {
  font-family:   var(--font-display);
  font-size:     1.4rem;
  font-weight:   500;
  line-height:   1.3;
  color:         var(--text-primary);
  margin-bottom: 0.75rem;
}

[data-glass-node] p {
  font-size:   0.9rem;
  line-height: 1.72;
  color:       var(--text-secondary);
}

[data-glass-node] code {
  font-family:  var(--font-display);
  font-size:    0.82em;
  background:   rgba(var(--accent-rgb), 0.12);
  color:        var(--accent-primary);
  padding:      0.1em 0.38em;
  border-radius: 4px;
}

[data-glass-node] .rule {
  display:    block;
  height:     1px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.45), transparent 80%);
  margin:     1.4rem 0;
}

[data-glass-node] .stat {
  font-family:    var(--font-display);
  font-size:      2.8rem;
  font-weight:    300;
  color:          var(--text-primary);
  letter-spacing: -0.03em;
  line-height:    1;
}

[data-glass-node] .stat-unit {
  font-family:    var(--font-display);
  font-size:      0.70rem;
  color:          var(--text-secondary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top:     0.4rem;
}


/* ------------------------------------------------------------
   ENGINE STATE - Entry animation
   ------------------------------------------------------------ */

[data-glass-node][data-glass-ready] {
  animation:       glass-enter var(--t-slow) cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--glass-index, 0) * 90ms);
}

@keyframes glass-enter {
  from {
    opacity:   0;
    transform: translateY(22px) scale(0.96);
    filter:    blur(6px);
  }
  to {
    opacity:   1;
    transform: translateY(0)     scale(1);
    filter:    blur(0px);
  }
}


/* ------------------------------------------------------------
   SCENE HEADER
   ------------------------------------------------------------ */

.scene__header .engine-label {
  display:        block;
  font-family:    var(--font-display);
  font-size:      0.65rem;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          var(--text-accent);
  margin-bottom:  0.6rem;
  opacity:        0.70;
}

.scene__header h1 {
  font-family:    var(--font-display);
  font-size:      2.2rem;
  font-weight:    400;
  color:          var(--text-primary);
  letter-spacing: -0.02em;
  line-height:    1.2;
}