/* =====================================================
 * Grow · Liquid Glass Design System v1.0
 * Dark-optimised glass surfaces with specular lighting
 * ===================================================== */

:root {
  --glass-blur: 20px;
  --glass-saturate: 160%;

  --glass-bg:           rgba(255,255,255,0.028);
  --glass-bg-mid:       rgba(255,255,255,0.052);
  --glass-bg-hover:     rgba(255,255,255,0.072);
  --glass-border:       rgba(255,255,255,0.088);
  --glass-border-mid:   rgba(255,255,255,0.12);
  --glass-border-hover: rgba(255,255,255,0.18);
  --glass-spec-top:     rgba(255,255,255,0.065);
  --glass-spec-body:    rgba(255,255,255,0.028);
  --glass-shadow:       0 2px 12px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.25);
  --glass-shadow-md:    0 6px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.3);
  --glass-shadow-lg:    0 12px 48px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.35);

  --glass-lime-bg:      rgba(200,240,69,0.048);
  --glass-lime-bg-h:    rgba(200,240,69,0.088);
  --glass-lime-border:  rgba(200,240,69,0.16);
  --glass-lime-border-h:rgba(200,240,69,0.28);
  --glass-lime-spec:    rgba(200,240,69,0.09);
  --glass-lime-glow:    0 0 28px rgba(200,240,69,0.09);

  --glass-r:    10px;
  --glass-r-sm:  6px;
  --glass-r-lg: 16px;
}

/* =====================================================
 * .glass-card — base glass surface
 * ===================================================== */
.glass-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-r);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-spec-top);
}

/* Top-edge specular "rim" */
.glass-card::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, var(--glass-spec-top) 30%,
    var(--glass-spec-top) 70%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Diagonal diffuse sweep */
.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(132deg, var(--glass-spec-body) 0%, transparent 52%);
  pointer-events: none;
  z-index: 0;
}

/* Children above pseudo-elements */
.glass-card > * { position: relative; z-index: 2; }

/* ─── Modifiers ─────────────────────────────────── */

.glass-card--mid {
  background: var(--glass-bg-mid);
  border-color: var(--glass-border-mid);
}

.glass-card--subtle {
  background: rgba(255,255,255,0.014);
  border-color: rgba(255,255,255,0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.glass-card--sharp { border-radius: 4px; }
.glass-card--flush { border-radius: 0; }

.glass-card--interactive {
  transition:
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s cubic-bezier(0.16,1,0.3,1);
}
.glass-card--interactive:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  box-shadow: var(--glass-shadow-md), inset 0 1px 0 rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

/* Lime-accent glass */
.glass-card--lime {
  background: var(--glass-lime-bg);
  border-color: var(--glass-lime-border);
  box-shadow: var(--glass-lime-glow), var(--glass-shadow),
              inset 0 1px 0 var(--glass-lime-spec);
}
.glass-card--lime::before {
  background: linear-gradient(90deg,
    transparent, var(--glass-lime-spec), transparent);
}
.glass-card--lime::after {
  background: linear-gradient(132deg, rgba(200,240,69,0.04) 0%, transparent 52%);
}
.glass-card--lime:hover {
  background: var(--glass-lime-bg-h);
  border-color: var(--glass-lime-border-h);
  box-shadow: 0 0 40px rgba(200,240,69,0.14), var(--glass-shadow-md),
              inset 0 1px 0 rgba(200,240,69,0.12);
}

/* =====================================================
 * .glass-panel — section-level glass surface
 * ===================================================== */
.glass-panel {
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(40px) saturate(145%);
  -webkit-backdrop-filter: blur(40px) saturate(145%);
  border-top: 1px solid rgba(255,255,255,0.065);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* =====================================================
 * Page transition animations
 * ===================================================== */
@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
  }
}

@keyframes pageOut {
  to {
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(3px);
  }
}

.grow-root {
  animation: pageIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  will-change: opacity, transform, filter;
}

.grow-root.is-leaving {
  animation: pageOut 0.28s cubic-bezier(0.4, 0, 1, 1) forwards;
  pointer-events: none;
}