/* ==========================================================================
   LIQUID GLASS THEME — That AI Guy
   ==========================================================================
   Applies glassmorphism to opted-in components via the .glass modifier class.
   Structurally independent: link/unlink this file to toggle the theme.
   Components opt in by adding .glass to their container in HTML.

   Pattern:
     HTML  → <div class="component glass">
     CSS   → .component.glass child { ... }   (chained class = theme override)

   Components:
   1. Tokens
   2. Badges  (.badges.glass)
   3. Contact form  (.contact-form.glass)
   4. Reviews  (.promo-reviews.glass)

   Dark mode tokens follow @media (prefers-color-scheme: dark) — same scope as theme.css.
========================================================================== */


/* ==========================================================================
   1. Tokens
========================================================================== */

:root {
  /* Shared */
  --glass-blur:              blur(24px) saturate(200%);

  /* Download button glass — light */
  --glass-btn-bg:            rgba(255, 255, 255, 0.28);
  --glass-btn-border:        rgba(255, 255, 255, 0.65);
  --glass-btn-shine:         rgba(255, 255, 255, 0.90);
  --glass-btn-shadow:        rgba(0, 0, 0, 0.10);

  /* Form glass — light */
  --glass-form-bg:           rgba(255, 255, 255, 0.35);
  --glass-form-input-bg:     rgba(255, 255, 255, 0.50);
  --glass-form-border:       rgba(255, 255, 255, 0.65);
  --glass-form-shine:        rgba(255, 255, 255, 0.90);
  --glass-form-shadow:       rgba(0, 0, 0, 0.12);
  --glass-form-neu-lo:       #a3b1c6;
  --glass-form-neu-hi:       #ffffff;

  /* Review card glass — light */
  --glass-review-bg:         rgba(255, 255, 255, 0.35);
  --glass-review-border:     rgba(255, 255, 255, 0.60);
  --glass-review-shine:      rgba(255, 255, 255, 0.85);
  --glass-review-shadow:     rgba(0, 0, 0, 0.12);

  /* Badge glass — light */
  --glass-badge-bg:          rgba(210, 220, 248, 0.10);
  --glass-badge-fill:        rgba(190, 210, 255, 0.72);
  --glass-badge-border:      rgba(255, 255, 255, 0.65);
  --glass-badge-shine:       rgba(255, 255, 255, 0.90);
  --glass-badge-shadow:      rgba(0, 0, 0, 0.10);
  --glass-badge-ring:        rgba(180, 200, 240, 0.60);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Form glass — dark */
    --glass-form-bg:           rgba(255, 255, 255, 0.07);
    --glass-form-input-bg:     rgba(255, 255, 255, 0.05);
    --glass-form-border:       rgba(255, 255, 255, 0.14);
    --glass-form-shine:        rgba(255, 255, 255, 0.10);
    --glass-form-shadow:       rgba(0, 0, 0, 0.45);
    --glass-form-neu-lo:       #0a0c12;
    --glass-form-neu-hi:       rgba(255, 255, 255, 0.10);

    /* Review card glass — dark */
    --glass-review-bg:         rgba(255, 255, 255, 0.07);
    --glass-review-border:     rgba(255, 255, 255, 0.12);
    --glass-review-shine:      rgba(255, 255, 255, 0.10);
    --glass-review-shadow:     rgba(0, 0, 0, 0.45);

    /* Download button glass — dark */
    --glass-btn-bg:            rgba(255, 255, 255, 0.06);
    --glass-btn-border:        rgba(255, 255, 255, 0.13);
    --glass-btn-shine:         rgba(255, 255, 255, 0.10);
    --glass-btn-shadow:        rgba(0, 0, 0, 0.40);

    /* Badge glass — dark */
    --glass-badge-bg:          rgba(100, 130, 210, 0.03);
    --glass-badge-fill:        rgba(22, 48, 108, 0.75);
    --glass-badge-border:      rgba(255, 255, 255, 0.13);
    --glass-badge-shine:       rgba(255, 255, 255, 0.10);
    --glass-badge-shadow:      rgba(0, 0, 0, 0.45);
    --glass-badge-ring:        rgba(255, 255, 255, 0.22);
  }
}


/* ==========================================================================
   2. Badges — .badges.glass
   ==========================================================================
   Base CSS (.badges dl) renders a text gradient on a transparent surface
   using background-clip: text + mix-blend-mode: plus-lighter.

   Glass variant overrides the surface to frosted glass, then re-applies the
   gradient directly to dt so badge titles keep their colour. The clip-path
   morph defined in badges.css is untouched — backdrop-filter follows the
   morphing polygon automatically.
========================================================================== */

/* Badge body — frosted glass surface */
.badges.glass dl {
  backdrop-filter: var(--glass-blur);
  background: var(--glass-badge-bg);
  background-clip: border-box;
  box-shadow:
    inset 0 1.5px 0 var(--glass-badge-shine),
    inset 0 0 0 1px var(--glass-badge-border),
    0 6px 20px var(--glass-badge-shadow);
  color: var(--color-text);
  mix-blend-mode: normal;
}

/* Badge title — gradient text preserved on glass surface */
.badges.glass dl dt {
  background: var(--text-gradient);
  background-clip: text;
  border-color: var(--glass-badge-ring);
  color: transparent;
  opacity: 0.5;
}

/* Badge reveal panel — stronger fill for legibility, inherits blur from parent */
.badges.glass dl dd {
  background: var(--glass-badge-fill);
  border-color: var(--glass-badge-border);
}


/* ==========================================================================
   3. Contact form — .contact-form.glass
   ==========================================================================
   Replaces the neumorphic card/pill with frosted glass. Inputs go transparent
   with a glass border. Button keeps its teal CTA identity, gains a glass shine.
   .sent-modal already has .glass in HTML — picks up these same form tokens.
========================================================================== */

/* Form container */
.contact-form.glass {
  backdrop-filter: var(--glass-blur);
  background: var(--glass-form-bg);
  box-shadow:
    inset 0 1.5px 0 var(--glass-form-shine),
    inset 0 0 0 1px var(--glass-form-border),
    0 8px 32px var(--glass-form-shadow),
    10px 10px 20px var(--glass-form-neu-lo),
    -10px -10px 20px var(--glass-form-neu-hi);
}

/* Text — replace hardcoded colours with design system tokens */
.contact-form.glass h2 { color: var(--color-text); }
.contact-form.glass p  { color: var(--color-text-muted); }
.contact-form.glass .input-field i { color: var(--color-text-muted); }

/* Inputs — transparent glass fields */
.contact-form.glass .input-field input {
  background: var(--glass-form-input-bg);
  box-shadow:
    inset 0 0 0 1px var(--glass-form-border),
    inset 6px 6px 10px var(--glass-form-neu-lo),
    inset -6px -6px 10px var(--glass-form-neu-hi);
  color: var(--color-text);
}

.contact-form.glass .input-field input::placeholder {
  color: var(--color-text-muted);
}

.contact-form.glass .input-field input:focus-visible {
  box-shadow:
    inset 0 0 0 1px var(--glass-form-border),
    0 0 0 2px rgba(64, 169, 195, 0.45);
}

/* Button — teal glass capsule */
.contact-form.glass .btn {
  backdrop-filter: var(--glass-blur);
  background: linear-gradient(
    180deg,
    rgba(80, 195, 220, 0.88) 0%,
    rgba(50, 155, 180, 0.88) 100%
  );
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.25),
    0 4px 14px rgba(64, 169, 195, 0.45),
    5px 5px 15px var(--glass-form-neu-lo),
    -5px -5px 15px var(--glass-form-neu-hi);
}

.contact-form.glass .btn:hover {
  background: linear-gradient(
    180deg,
    rgba(90, 205, 230, 0.92) 0%,
    rgba(60, 165, 190, 0.92) 100%
  );
}

.contact-form.glass .btn:active,
.contact-form.glass .btn:focus-visible {
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.20),
    0 2px 6px rgba(64, 169, 195, 0.30),
    5px 5px 15px var(--glass-form-neu-lo),
    -5px -5px 15px var(--glass-form-neu-hi);
}

/* Sent confirmation modal — already has .glass in HTML */
.sent-modal.glass {
  backdrop-filter: var(--glass-blur);
  background: var(--glass-form-bg);
  box-shadow:
    inset 0 1.5px 0 var(--glass-form-shine),
    inset 0 0 0 1px var(--glass-form-border),
    0 8px 32px var(--glass-form-shadow);
}


/* ==========================================================================
   4. Reviews — .promo-reviews.glass
   ==========================================================================
   Targets .slider-card only — .slider__item and all its transforms are
   untouched. backdrop-filter follows the card's border-radius naturally.
========================================================================== */

.promo-reviews.glass .slider-card {
  backdrop-filter: var(--glass-blur);
  background: var(--glass-review-bg);
  box-shadow:
    inset 0 1.5px 0 var(--glass-review-shine),
    inset 0 0 0 1px var(--glass-review-border),
    0 8px 24px var(--glass-review-shadow);
}


/* ==========================================================================
   5. Download button — .promo-download.glass
   ==========================================================================
   Stops the neumorphic keyframe animation — replaces it with a static
   frosted glass surface. Reuses form neumorphic tokens for shadow depth.
   Dark mode uses existing dark glass tokens.
========================================================================== */

/* Stop animation, apply glass surface */
.promo-download.glass .btn-appstore,
.promo-download.glass .btn-appstore:hover {
  /* animation: none; */
  backdrop-filter: var(--glass-blur);
  background: var(--glass-btn-bg);
  box-shadow:
    inset 0 1.5px 0 var(--glass-btn-shine),
    inset 0 0 0 1px var(--glass-btn-border),
    0 8px 32px var(--glass-btn-shadow),
    10px 10px 20px var(--glass-form-neu-lo),
    -10px -10px 20px var(--glass-form-neu-hi);
}

.promo-download.glass .btn-appstore:hover {
  background: rgba(255, 255, 255, 0.38);
}

/* Active / focus — inset glass press */
.promo-download.glass .btn-appstore:active,
.promo-download.glass .btn-appstore:focus-visible {
  animation: none;
  backdrop-filter: var(--glass-blur);
  background: var(--glass-btn-bg);
  box-shadow:
    inset 0 2px 8px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px var(--glass-btn-border),
    5px 5px 15px var(--glass-form-neu-lo),
    -5px -5px 15px var(--glass-form-neu-hi);
}