/* =============================================================
   STORYAT v2.0 — Liquid Glass utility layer
   ----------------------------------------------------------------
   Translates Apple's Liquid Glass material to the web:
   - .glass-thin     : sub-controls inside panels (light blur)
   - .glass-regular  : default chrome (nav, drawers, cards)
   - .glass-thick    : floating sheets, modals
   - .glass-overlay  : full-bleed scrim behind modals
   Plus tint modifiers, interactive helpers, and concentric radii.

   Load order: AFTER tokens.css and app.css so glass classes can
   override existing solid backgrounds where applied.
   ============================================================= */


/* ============================================================
   1. BASE MATERIAL TIERS
   ============================================================ */
.glass-thin,
.glass-regular,
.glass-thick,
.glass-overlay {
  position: relative;
  isolation: isolate;
  background-color: var(--glass-regular-bg);
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur-regular));
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur-regular));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge-highlight), var(--glass-shadow-rest);
  transition:
    background-color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.glass-thin {
  background-color: var(--glass-thin-bg);
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur-thin));
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur-thin));
}

.glass-regular {
  background-color: var(--glass-regular-bg);
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur-regular));
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur-regular));
}

.glass-thick {
  background-color: var(--glass-thick-bg);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-strong)) blur(var(--glass-blur-thick));
  backdrop-filter: saturate(var(--glass-saturate-strong)) blur(var(--glass-blur-thick));
  box-shadow: var(--glass-edge-highlight), var(--glass-shadow-float);
}

.glass-overlay {
  background-color: var(--glass-overlay-bg);
  -webkit-backdrop-filter: saturate(var(--glass-saturate-strong)) blur(var(--glass-blur-overlay));
  backdrop-filter: saturate(var(--glass-saturate-strong)) blur(var(--glass-blur-overlay));
  border: 0;
  box-shadow: none;
}


/* ============================================================
   2. ELEVATION VARIANTS
   ============================================================ */
.glass-raised {
  box-shadow: var(--glass-edge-highlight), var(--glass-shadow-raised);
}

.glass-floating {
  box-shadow: var(--glass-edge-highlight), var(--glass-shadow-float);
}

.glass-modal {
  box-shadow: var(--glass-edge-highlight), var(--glass-shadow-modal);
}


/* ============================================================
   3. TINT MODIFIERS — overlay a brand/semantic color on glass
   Layered as an inset linear-gradient so the blur underneath
   still bleeds through.
   ============================================================ */
.glass-tint-brand {
  background-image: linear-gradient(var(--glass-tint-brand), var(--glass-tint-brand));
}

.glass-tint-success {
  background-image: linear-gradient(var(--glass-tint-success), var(--glass-tint-success));
}

.glass-tint-warning {
  background-image: linear-gradient(var(--glass-tint-warning), var(--glass-tint-warning));
}

.glass-tint-danger {
  background-image: linear-gradient(var(--glass-tint-danger), var(--glass-tint-danger));
}


/* ============================================================
   4. INTERACTIVE GLASS — touch / pointer responsive
   ============================================================ */
.glass-interactive {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  will-change: transform, background-color;
}

.glass-interactive:hover {
  background-color: color-mix(in srgb, var(--glass-regular-bg) 88%, var(--glass-press-tint));
}

.glass-thin.glass-interactive:hover {
  background-color: color-mix(in srgb, var(--glass-thin-bg) 88%, var(--glass-press-tint));
}

.glass-thick.glass-interactive:hover {
  background-color: color-mix(in srgb, var(--glass-thick-bg) 92%, var(--glass-press-tint));
}

.glass-interactive:active {
  transform: scale(0.98);
  background-color: color-mix(in srgb, var(--glass-regular-bg) 82%, var(--glass-press-tint-active));
}

.glass-interactive:focus-visible {
  outline: none;
  box-shadow:
    var(--glass-edge-highlight),
    var(--glass-shadow-raised),
    var(--shadow-focus-ring);
}


/* ============================================================
   5. GLASS CONTAINER — group adjacent glass surfaces so they
   read as one continuous material instead of fighting each other.
   ============================================================ */
.glass-container {
  isolation: isolate;
  position: relative;
}

/* When children sit close together, soften their seams */
.glass-container > .glass-thin + .glass-thin,
.glass-container > .glass-regular + .glass-regular,
.glass-container > .glass-thin + .glass-regular,
.glass-container > .glass-regular + .glass-thin {
  margin-top: var(--space-2);
}


/* ============================================================
   6. CONCENTRIC RADIUS HELPERS
   Use on inner elements so their corners fit inside parents.
   ============================================================ */
.radius-inner-sm  { border-radius: var(--radius-inner-from-sm); }
.radius-inner-md  { border-radius: var(--radius-inner-from-md); }
.radius-inner-lg  { border-radius: var(--radius-inner-from-lg); }
.radius-inner-xl  { border-radius: var(--radius-inner-from-xl); }


/* ============================================================
   7. SHEET HANDLE — drag affordance for bottom-sheet modals
   ============================================================ */
.sheet-handle {
  display: block;
  width: 40px;
  height: 5px;
  margin: 8px auto 12px;
  border-radius: 999px;
  background: var(--glass-border-strong);
  cursor: grab;
  flex-shrink: 0;
  transition: background-color var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.sheet-handle:hover,
.sheet-handle.is-dragging {
  background: var(--fg-tertiary);
}

.sheet-handle.is-dragging {
  cursor: grabbing;
  transform: scale(1.08);
}


/* ============================================================
   8. BACKGROUND EXTENSION — visually extend content under a
   sibling glass panel (e.g., canvas peeking through tab bar).
   ============================================================ */
.bg-extend-bottom {
  margin-block-end: calc(var(--space-5) * -1);
  padding-block-end: var(--space-5);
}


/* ============================================================
   9. ANIMATIONS — Liquid Glass micro-interactions
   ============================================================ */
@keyframes glass-press {
  0%   { transform: scale(1);    filter: brightness(1); }
  50%  { transform: scale(0.97); filter: brightness(1.05); }
  100% { transform: scale(1);    filter: brightness(1); }
}

@keyframes sheet-rise {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sheet-dismiss {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(20px); }
}

@keyframes tabbar-recede {
  from {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  to {
    transform: translateY(8px) scale(0.96);
    opacity: 0.78;
  }
}

@keyframes handle-pulse {
  0%, 100% { transform: scaleX(1); }
  50%      { transform: scaleX(1.15); }
}

@keyframes glass-tab-morph {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}


/* ============================================================
   10. ACCESSIBILITY FALLBACKS
   ============================================================ */

/* Reduced transparency: collapse all glass to solid surfaces */
@media (prefers-reduced-transparency: reduce) {
  .glass-thin,
  .glass-regular,
  .glass-thick,
  .glass-overlay {
    background-color: var(--bg-panel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--border-default);
  }
  .glass-thin {
    background-color: var(--bg-elevated);
  }
  .glass-overlay {
    background-color: color-mix(in srgb, var(--bg-app) 92%, transparent);
  }
}

/* Reduced motion: cancel morph animations */
@media (prefers-reduced-motion: reduce) {
  .glass-thin,
  .glass-regular,
  .glass-thick,
  .glass-overlay,
  .glass-interactive {
    transition: none !important;
  }
  .glass-interactive:active {
    transform: none;
  }
  .sheet-handle.is-dragging {
    transform: none;
  }
}

/* Forced colors (Windows High Contrast): bring back hard borders */
@media (forced-colors: active) {
  .glass-thin,
  .glass-regular,
  .glass-thick {
    border: 1px solid CanvasText !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}


/* ============================================================
   11. VIEW TRANSITIONS API support — opt-in tab morph
   (Browsers without support fall back silently to keyframes.)
   ============================================================ */
@supports (view-transition-name: none) {
  ::view-transition-old(mobile-tab),
  ::view-transition-new(mobile-tab) {
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}