/*
  Apple Liquid UI — glass.css
  Liquid Glass materials. Use these for layers that float ABOVE content:
  nav bars, tab bars, sheets, floating panels, toasts, sidebars over
  scrolling content. Do not apply to flat cards with nothing behind them
  — see AI_INSTRUCTIONS.md section 3.
*/

.glass-thin,
.glass-regular,
.glass-thick,
.glass-chrome {
  position: relative;
  border: 1px solid var(--glass-border);
  background-clip: padding-box;
  isolation: isolate;
}

/* Thin — subtle, content-forward. Good for inline chips, small floating
   badges, lightweight overlays. */
.glass-thin {
  background: rgba(var(--glass-tint), 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  box-shadow: 0 4px 16px var(--glass-shadow);
}

/* Regular — the default. Sheets, cards that float over scroll content,
   dropdown menus, popovers. */
.glass-regular {
  background: rgba(var(--glass-tint), 0.62);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 8px 24px var(--glass-shadow);
}

/* Thick — heavier separation. Modals, side panels, command palettes. */
.glass-thick {
  background: rgba(var(--glass-tint), 0.78);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 16px 40px var(--glass-shadow);
}

/* Chrome — system-level persistent surfaces: primary nav bar, tab bar,
   the "always there" app chrome. */
.glass-chrome {
  background: rgba(var(--glass-tint), 0.86);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
  backdrop-filter: blur(36px) saturate(190%);
  box-shadow: 0 1px 0 var(--glass-border) inset,
              0 8px 24px var(--glass-shadow);
}

/* Liquid Glass specular highlight — a soft light sweep along the top
   edge, mimicking the way Liquid Glass catches light. Apply alongside
   any .glass-* class on a prominent panel (sheet headers, hero cards). */
.glass-specular::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    var(--glass-highlight) 0%,
    transparent 35%,
    transparent 65%,
    var(--glass-highlight) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.5;
}

/* Liquid Glass refraction ripple — an ambient, extremely subtle moving
   highlight. Opt-in only, for hero/signature panels. Disabled entirely
   under prefers-reduced-motion (see animations.css). */
.glass-liquid {
  overflow: hidden;
}
.glass-liquid::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--glass-highlight) 40deg,
    transparent 90deg,
    transparent 260deg,
    var(--glass-highlight) 300deg,
    transparent 340deg
  );
  opacity: 0.35;
  animation: liquid-sheen 14s linear infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Continuous "squircle" corners — Apple's superellipse curvature rather
   than plain circular border-radius. Approximated via clip-path for
   larger tiles (icons, hero cards); falls back to border-radius on
   browsers without clip-path support for basic shapes. */
.corner-continuous {
  border-radius: var(--radius-lg);
}
@supports (clip-path: inset(0 round 0)) {
  .corner-continuous {
    clip-path: inset(0 round var(--radius-lg));
  }
}

/* Solid elevated surface — the non-glass alternative for flat cards
   that don't have meaningful content behind them to blur. */
.surface-elevated {
  background: var(--system-background-tertiary);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
}