/* ============================================================================
   liquid-glass.css — Apple Liquid Glass treatment for Superior Chemical Co.
   ----------------------------------------------------------------------------
   Source of truth: Apple SDK (Xcode 27.0 / MacOSX27.0.sdk)
     SwiftUI  : Glass.regular | Glass.clear | Glass.identity
                .tint(_:)  .interactive(_:)
                glassEffect(_:in:), GlassEffectContainer(spacing:),
                glassEffectID/Union/Transition
     AppKit   : NSGlassEffectView{ cornerRadius, tintColor, style,
                                   effectIsInteractive (macOS 27.0+) }
                NSGlassEffectContainerView{ spacing }
     Availability: iOS/macOS 26.0+. visionOS unavailable.

   Load AFTER styles.css. This layer only refines surfaces — it does not
   change layout, structure, or the existing token system.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Glass tokens
   ------------------------------------------------------------------------ */
:root{
  /* .regular — standard adaptive glass (readable UI chrome) */
  --lg-blur:20px;
  --lg-saturate:180%;

  /* .clear — lighter glass for media-rich backdrops */
  --lg-blur-clear:8px;

  /* single radius value for all corners (Apple parity: no per-corner radii) */
  --lg-radius:22px;
  --lg-radius-sm:16px;

  /* light source: top-left, consistent across every surface */
  --lg-light-angle:135deg;

  /* specular highlight along the light-facing edge */
  --lg-edge:inset 0 1px 0 rgba(255,255,255,0.70);
  --lg-edge-soft:inset 0 1px 0 rgba(255,255,255,0.40);

  /* elevation — glass floats, it never sits flat */
  --lg-shadow:0 1px 2px rgba(0,0,0,0.05),
              0 10px 30px rgba(0,0,0,0.10),
              var(--lg-edge);

  --lg-tint:rgba(255,255,255,0.55);
  --lg-tint-strong:rgba(255,255,255,0.72);
  --lg-border:rgba(255,255,255,0.55);

  /* motion */
  --lg-ease:cubic-bezier(0.34,1.56,0.64,1);
  --lg-ease-out:cubic-bezier(0.25,0.46,0.45,0.94);
}

@media (prefers-color-scheme: dark){
  :root{
    --lg-edge:inset 0 1px 0 rgba(255,255,255,0.14);
    --lg-edge-soft:inset 0 1px 0 rgba(255,255,255,0.08);
    --lg-shadow:0 1px 2px rgba(0,0,0,0.35),
                0 10px 30px rgba(0,0,0,0.45),
                var(--lg-edge);
    --lg-tint:rgba(28,28,30,0.55);
    --lg-tint-strong:rgba(28,28,30,0.72);
    --lg-border:rgba(255,255,255,0.10);
  }
}

/* ---------------------------------------------------------------------------
   2. Base glass material — .regular
   ------------------------------------------------------------------------ */
.lg-glass{
  position:relative;
  isolation:isolate;
  border-radius:var(--lg-radius);
  background:var(--lg-tint);
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border:1px solid var(--lg-border);
  box-shadow:var(--lg-shadow);
  overflow:hidden;
}

/* specular highlight — the one thing that makes glass read as glass */
.lg-glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(
    var(--lg-light-angle),
    rgba(255,255,255,0.18) 0%,
    rgba(255,255,255,0.04) 22%,
    transparent 46%
  );
}

@media (prefers-color-scheme: dark){
  .lg-glass::before{
    background:linear-gradient(
      var(--lg-light-angle),
      rgba(255,255,255,0.09) 0%,
      rgba(255,255,255,0.02) 22%,
      transparent 46%
    );
  }
}

/* keep content above the specular layer */
.lg-glass > *{position:relative;z-index:1;}

/* ---------------------------------------------------------------------------
   3. .clear variant — for surfaces sitting over media / the 3D background
   ------------------------------------------------------------------------ */
.lg-glass-clear{
  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(var(--lg-blur-clear)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter:blur(var(--lg-blur-clear)) saturate(var(--lg-saturate));
  border-color:rgba(255,255,255,0.14);
}
@media (prefers-color-scheme: dark){
  .lg-glass-clear{background:rgba(255,255,255,0.04);}
}

/* ---------------------------------------------------------------------------
   4. Interactive glass — the macOS 27 `effectIsInteractive` behaviour.
      Apple: enable ONLY for glass backing interactive controls, or glass
      acting as the container of interactive controls. Never on decoration.
   ------------------------------------------------------------------------ */
.lg-interactive{
  transition:transform .28s var(--lg-ease),
             box-shadow .28s var(--lg-ease-out),
             filter .28s var(--lg-ease-out);
  will-change:transform;
}
.lg-interactive:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 2px 4px rgba(0,0,0,0.06),
             0 16px 40px rgba(0,0,0,0.14),
             var(--lg-edge);
}
.lg-interactive:active{
  transform:scale(0.985);
  filter:brightness(0.98);
  transition-duration:.10s;
}

/* ---------------------------------------------------------------------------
   5. Apply the material to the existing surfaces
   ------------------------------------------------------------------------ */

/* --- navbar: floating chrome, stays legible → .regular ------------------- */
.navbar{
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border-bottom:1px solid var(--lg-border);
  box-shadow:0 1px 0 rgba(0,0,0,0.03),
             0 8px 24px rgba(0,0,0,0.06);
}
@media (prefers-color-scheme: dark){
  .navbar{box-shadow:0 1px 0 rgba(0,0,0,0.30), 0 8px 24px rgba(0,0,0,0.35);}
}

/* --- product widgets: the focal glass ----------------------------------- */
.widget{
  position:relative;
  isolation:isolate;
  border-radius:var(--lg-radius);
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border:1px solid var(--lg-border);
  box-shadow:var(--lg-shadow);
  overflow:hidden;
  transition:transform .32s var(--lg-ease),
             box-shadow .32s var(--lg-ease-out),
             filter .32s var(--lg-ease-out);
  will-change:transform;
}
.widget::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(
    var(--lg-light-angle),
    rgba(255,255,255,0.16) 0%,
    rgba(255,255,255,0.03) 20%,
    transparent 44%
  );
}
@media (prefers-color-scheme: dark){
  .widget::before{
    background:linear-gradient(
      var(--lg-light-angle),
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.02) 20%,
      transparent 44%
    );
  }
}
.widget > *{position:relative;z-index:1;}

/* the widget's own hover IS the interactive-glass response */
.widget:hover{
  transform:translateY(-2px);
  filter:brightness(1.04);
  box-shadow:0 2px 4px rgba(0,0,0,0.06),
             0 18px 44px rgba(0,0,0,0.16),
             var(--lg-edge);
}
@media (prefers-color-scheme: dark){
  .widget:hover{
    box-shadow:0 2px 4px rgba(0,0,0,0.40),
               0 18px 44px rgba(0,0,0,0.55),
               var(--lg-edge);
  }
}
.widget:active{transform:scale(0.995);}

/* --- register panel: large focal glass ---------------------------------- */
.register-widget{
  position:relative;
  isolation:isolate;
  border-radius:var(--lg-radius);
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate));
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate));
  border:1px solid var(--lg-border);
  box-shadow:var(--lg-shadow);
  overflow:hidden;
}
.register-widget::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(
    var(--lg-light-angle),
    rgba(255,255,255,0.14) 0%,
    transparent 42%
  );
}
.register-widget > *{position:relative;z-index:1;}

/* --- trust cards: small glass chips, light blur to stay in budget -------- */
.trust-card{
  border-radius:var(--lg-radius-sm);
  background:var(--lg-tint);
  backdrop-filter:blur(12px) saturate(var(--lg-saturate));
  -webkit-backdrop-filter:blur(12px) saturate(var(--lg-saturate));
  border:1px solid var(--lg-border);
  box-shadow:var(--lg-edge-soft),
             0 4px 14px rgba(0,0,0,0.06);
}

/* --- chips: NON-blurred glass appearance ---------------------------------
   Chips appear in long runs (11 in the blends card alone). Blurring each one
   would blow the compositor budget, so they get the glass *look* — tint,
   hairline border, specular edge — without a backdrop pass.               */
.chip{
  border:1px solid var(--lg-border);
  background:var(--lg-tint-strong);
  box-shadow:var(--lg-edge-soft);
  border-radius:980px;
  transition:filter .2s var(--lg-ease-out), transform .2s var(--lg-ease-out);
}
.chip:hover{filter:brightness(1.06);transform:translateY(-1px);}

/* --- buttons: interactive glass response --------------------------------- */
.btn{transition:transform .16s var(--lg-ease),
                 filter .16s var(--lg-ease-out),
                 box-shadow .16s var(--lg-ease-out);}
.btn:hover{filter:brightness(1.06);}
.btn:active{transform:scale(0.97);}
.btn-tint{
  background:var(--lg-tint-strong);
  backdrop-filter:blur(10px) saturate(var(--lg-saturate));
  -webkit-backdrop-filter:blur(10px) saturate(var(--lg-saturate));
  border:1px solid var(--lg-border);
  box-shadow:var(--lg-edge-soft);
  color:var(--label) !important;
}

/* ---------------------------------------------------------------------------
   6. Accessibility + low-power fallbacks
   ------------------------------------------------------------------------ */

/* Users who ask the OS to reduce transparency get solid, still-layered surfaces */
@media (prefers-reduced-transparency: reduce){
  .lg-glass, .widget, .register-widget, .navbar, .trust-card, .btn-tint{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:var(--sys-bg-elevated);
  }
  .lg-glass::before, .widget::before, .register-widget::before{display:none;}
}

/* Reduced motion: keep the material, drop the movement (blur is not motion) */
@media (prefers-reduced-motion: reduce){
  .lg-interactive, .widget, .btn, .chip{
    transition:none !important;
  }
  .lg-interactive:hover, .widget:hover, .btn:hover, .chip:hover{
    transform:none !important;
  }
  .float-ambient{animation:none !important;}
}

/* Narrow screens: fewer simultaneous backdrop passes */
@media (max-width:700px){
  .widget{
    backdrop-filter:blur(16px) saturate(var(--lg-saturate));
    -webkit-backdrop-filter:blur(16px) saturate(var(--lg-saturate));
  }
  .trust-card{
    backdrop-filter:blur(8px) saturate(var(--lg-saturate));
    -webkit-backdrop-filter:blur(8px) saturate(var(--lg-saturate));
  }
}