/* ============================================================================
   Liquid Glass — Core Material
   ----------------------------------------------------------------------------
   The `.lg` class system creates Apple's Liquid Glass effect using:
     1. backdrop-filter blur + saturate
     2. SVG feTurbulence + feDisplacementMap for refraction
     3. layered inset shine for the bevel
     4. outer lift shadow

   Required: import `colors_and_type.css` first, AND include the SVG filter
   block (<svg id="lg-filters">…) once per document — see ./liquid-glass-svg.html
   or copy the block from any preview/ file.
   ============================================================================ */

/* ── 1. Wrapper. Holds layers and provides the shape. ──────────────── */
.lg {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  color: var(--fg-on-glass);
  cursor: pointer;
  box-shadow: var(--glass-lift);
  transition: padding var(--dur-spring) var(--ease-spring),
              border-radius var(--dur-spring) var(--ease-spring),
              transform var(--dur-base) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out);
  overflow: hidden;
  border-radius: var(--r-2xl);
}

/* The actual blurred/refracted backdrop layer */
.lg__effect {
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(var(--glass-blur-light)) saturate(var(--glass-saturation));
  -webkit-backdrop-filter: blur(var(--glass-blur-light)) saturate(var(--glass-saturation));
  filter: url(#lg-distortion);
  overflow: hidden;
  isolation: isolate;
}

/* White tint to lift legibility */
.lg__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--glass-tint-default);
}

/* Specular bevel — top-left + bottom-right inner highlights */
.lg__shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: var(--glass-shine);
  border-radius: inherit;
}

/* Content layer */
.lg__content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}

/* ── 2. Variants ───────────────────────────────────────────────────── */

/* Tint variants */
.lg--over-light .lg__tint { background: var(--glass-tint-over-light); }
.lg--over-dark  .lg__tint { background: var(--glass-tint-over-dark); }
.lg--dark       .lg__tint { background: var(--glass-tint-dark); }
.lg--dark { color: var(--fg-on-dark-glass); }

/* Blur strength */
.lg--blur-medium .lg__effect { backdrop-filter: blur(var(--glass-blur-medium)) saturate(var(--glass-saturation)); }
.lg--blur-heavy  .lg__effect { backdrop-filter: blur(var(--glass-blur-heavy))  saturate(var(--glass-saturation)); }

/* Shape variants */
.lg--pill   { border-radius: var(--r-pill); }
.lg--card   { border-radius: var(--r-lg);   padding: var(--space-5); }
.lg--sheet  { border-radius: var(--r-2xl);  padding: var(--space-6); }
.lg--button { border-radius: var(--r-pill); padding: 12px 22px; font-weight: var(--w-semibold); }
.lg--menu   { border-radius: var(--r-3xl);  padding: var(--space-2); flex-direction: column; align-items: stretch; }
.lg--dock   { border-radius: var(--r-3xl);  padding: 10px; gap: 8px; }
.lg--chip   { border-radius: var(--r-pill); padding: 6px 12px; font-size: var(--t-footnote); font-weight: var(--w-medium); }

/* ── 3. States ────────────────────────────────────────────────────── */
.lg:hover {
  /* glass grows + brightens; never darkens */
}
.lg--button:hover {
  padding: 14px 24px;
}
.lg--button:active {
  transform: scale(0.96);
  box-shadow: var(--glass-lift), var(--glass-press);
}

.lg--dock:hover {
  padding: 12px;
}

/* Children inside a menu — separately hover-styled */
.lg__menu-item {
  font-size: var(--t-callout);
  font-weight: var(--w-medium);
  color: var(--fg-on-glass);
  padding: 8px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.lg__menu-item:hover {
  background: rgba(255, 255, 255, 0.45);
  box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(2px);
}
.lg__menu-item:active {
  background: rgba(255, 255, 255, 0.6);
}

/* Dock icons */
.lg__dock-icon {
  width: 56px;
  height: 56px;
  transition: transform var(--dur-spring) var(--ease-spring);
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
}
.lg__dock-icon:hover  { transform: translateY(-4px) scale(1.05); }
.lg__dock-icon:active { transform: translateY(-2px) scale(0.95); }

/* ── 4. Backgrounds for previewing glass ──────────────────────────── */
.lg-backdrop-floral   { background: url("./assets/flowers.jpg") center / cover; }
.lg-backdrop-mesh-warm{
  background:
    radial-gradient(at 20% 20%, #FF6B6B 0%, transparent 50%),
    radial-gradient(at 80% 10%, #FFD93D 0%, transparent 55%),
    radial-gradient(at 60% 80%, #FF9F45 0%, transparent 50%),
    radial-gradient(at 10% 90%, #C56BFF 0%, transparent 50%),
    #FF8A65;
}
.lg-backdrop-mesh-cool{
  background:
    radial-gradient(at 25% 30%, #5B6BFF 0%, transparent 55%),
    radial-gradient(at 80% 20%, #32ADE6 0%, transparent 50%),
    radial-gradient(at 70% 80%, #5856D6 0%, transparent 55%),
    radial-gradient(at 20% 85%, #00C7BE 0%, transparent 50%),
    #1E1B4B;
}
.lg-backdrop-mesh-sunset{
  background:
    radial-gradient(at 30% 30%, #FF2D55 0%, transparent 50%),
    radial-gradient(at 75% 25%, #FF9500 0%, transparent 55%),
    radial-gradient(at 65% 75%, #AF52DE 0%, transparent 55%),
    radial-gradient(at 15% 80%, #007AFF 0%, transparent 50%),
    #2C0F3D;
}

/* ── 5. App icon (Liquid Glass tile) ──────────────────────────────── */
.lg-app-icon {
  width: 64px;
  height: 64px;
  border-radius: 22.37%; /* iOS superellipse approximation */
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  background-size: cover;
  background-position: center;
}