/**
 * glass.css - Ascenra Glass Visual System
 *
 * Defines the four-level translucent Glass_System (.glass-l1 through .glass-l4),
 * all design tokens (colours, typography, spacing, easing, breakpoints),
 * the @supports backdrop-filter fallback, and the prefers-reduced-motion override.
 *
 * Load order: first in the CSS dependency chain (no dependencies).
 * Requirements: 1.1-1.7, 2.1, 2.3, 2.6
 */

/* ==========================================================================
   Design Tokens - :root custom properties
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     Colour Palette (Requirement 2.1)
     -------------------------------------------------------------------------- */
  --color-bg:           #050509;
  --color-bg-secondary: #0A0A10;
  --color-red:          #FF2A2A;
  --color-blue:         #168CFF;
  --color-violet:       #7A3CFF;
  --color-cyan:         #19D9FF;
  --color-text:         #FFFFFF;
  --color-text-muted:   rgba(255, 255, 255, 0.65);
  --color-text-faint:   rgba(255, 255, 255, 0.35);

  /* --------------------------------------------------------------------------
     Glass System - Level 1 (lightest)
     blur: 12px | saturate: 140%
     bg alpha: ~0.05-0.08 | border alpha: 0.10
     -------------------------------------------------------------------------- */
  --glass-l1-bg:     linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  --glass-l1-border: 1px solid rgba(255, 255, 255, 0.10);
  --glass-l1-blur:   blur(12px) saturate(140%);
  --glass-l1-shadow: 0 4px 24px rgba(0, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --glass-l1-radius: 12px;

  /* --------------------------------------------------------------------------
     Glass System - Level 2 (medium)
     blur: 20px (+8) | saturate: 150% (+10pp)
     bg alpha: ~0.035-0.12 | border alpha: 0.14
     -------------------------------------------------------------------------- */
  --glass-l2-bg:     linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035));
  --glass-l2-border: 1px solid rgba(255, 255, 255, 0.14);
  --glass-l2-blur:   blur(20px) saturate(150%);
  --glass-l2-shadow: 0 12px 48px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --glass-l2-radius: 16px;

  /* --------------------------------------------------------------------------
     Glass System - Level 3 (strong)
     blur: 30px (+10) | saturate: 160% (+10pp)
     bg alpha: ~0.05-0.16 | border alpha: 0.20
     -------------------------------------------------------------------------- */
  --glass-l3-bg:     linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.05));
  --glass-l3-border: 1px solid rgba(255, 255, 255, 0.20);
  --glass-l3-blur:   blur(30px) saturate(160%);
  --glass-l3-shadow: 0 20px 80px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --glass-l3-radius: 20px;

  /* --------------------------------------------------------------------------
     Glass System - Level 4 (premium / deepest)
     blur: 40px (+10) | saturate: 180% (+20pp)
     bg alpha: ~0.07-0.20 | border alpha: 0.26
     -------------------------------------------------------------------------- */
  --glass-l4-bg:     linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.07));
  --glass-l4-border: 1px solid rgba(255, 255, 255, 0.26);
  --glass-l4-blur:   blur(40px) saturate(180%);
  --glass-l4-shadow: 0 32px 120px rgba(0, 0, 0, 0.45),
                     inset 0 2px 0 rgba(255, 255, 255, 0.18),
                     inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  --glass-l4-radius: 24px;

  /* --------------------------------------------------------------------------
     Typography (Requirements 2.2-2.6)
     -------------------------------------------------------------------------- */
  --font-primary:           'Didact Gothic', sans-serif;
  --font-size-base:         16px;
  --font-size-h1:           2.5rem;   /* ≥ 2rem per Req 2.6 */
  --font-size-h2:           1.75rem;  /* ≥ 1.5rem per Req 2.6 */
  --font-size-h3:           1.375rem; /* ≥ 1.25rem per Req 2.6 */
  --font-size-body:         1rem;     /* ≥ 1rem per Req 2.6 */
  --line-height-base:       1.6;
  --letter-spacing-wide:    0.08em;
  --letter-spacing-widest:  0.16em;

  /* --------------------------------------------------------------------------
     Spacing Scale
     -------------------------------------------------------------------------- */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   6rem;
  --space-2xl:  10rem;

  /* --------------------------------------------------------------------------
     Easing and Transitions
     -------------------------------------------------------------------------- */
  --ease-apple:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard:     cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:   150ms var(--ease-standard);
  --transition-base:   300ms var(--ease-apple);
  --transition-slow:   600ms var(--ease-apple);

  /* --------------------------------------------------------------------------
     Breakpoints (used in JS via CSS custom properties)
     -------------------------------------------------------------------------- */
  --bp-tablet:  768px;
  --bp-desktop: 1024px;
  --bp-wide:    1440px;
}


/* ==========================================================================
   Base Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ==========================================================================
   Glass Utility Classes (Requirements 1.1-1.4)
   ========================================================================== */

html {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

ul, ol {
  list-style: none;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 0.75rem 1.25rem;
  background: var(--color-red);
  color: #fff;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.site-main {
  position: relative;
  z-index: 1;
}

.container {
  width: min(1200px, calc(100% - 2rem));
  margin-inline: auto;
}

/**
 * Liquid-glass shared surface.
 * Backdrop-filter is applied only when .glass-in-view is present
 * (IntersectionObserver in main.js) so off-screen surfaces stay cheap.
 */
.glass-l1,
.glass-l2,
.glass-l3,
.glass-l4 {
  position: relative;
  isolation: isolate;
  background-clip: padding-box;
}

.glass-l1::before,
.glass-l2::before,
.glass-l3::before,
.glass-l4::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0.04) 28%,
    transparent 52%
  );
  opacity: 0.55;
  z-index: 1;
}

.glass-l1::after,
.glass-l2::after,
.glass-l3::after,
.glass-l4::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(25, 217, 255, 0.06);
  z-index: 1;
}

/**
 * .glass-l1 - Light glass
 * Used by: GlassNav, pills, badges, WhatsApp button
 */
.glass-l1 {
  background:              var(--glass-l1-bg);
  border:                  var(--glass-l1-border);
  box-shadow:              var(--glass-l1-shadow);
  border-radius:           var(--glass-l1-radius);
}

.glass-l1.glass-in-view {
  backdrop-filter:         var(--glass-l1-blur);
  -webkit-backdrop-filter: var(--glass-l1-blur);
}

/**
 * .glass-l2 - Medium glass
 * Used by: service cards, pricing cards, content panels
 */
.glass-l2 {
  background:              var(--glass-l2-bg);
  border:                  var(--glass-l2-border);
  box-shadow:              var(--glass-l2-shadow);
  border-radius:           var(--glass-l2-radius);
}

.glass-l2.glass-in-view {
  backdrop-filter:         var(--glass-l2-blur);
  -webkit-backdrop-filter: var(--glass-l2-blur);
}

/**
 * .glass-l3 - Strong glass
 * Used by: major CTA panels, AscenraDS features, BusinessSplit cards
 */
.glass-l3 {
  background:              var(--glass-l3-bg);
  border:                  var(--glass-l3-border);
  box-shadow:              var(--glass-l3-shadow);
  border-radius:           var(--glass-l3-radius);
}

.glass-l3.glass-in-view {
  backdrop-filter:         var(--glass-l3-blur);
  -webkit-backdrop-filter: var(--glass-l3-blur);
}

/**
 * .glass-l4 - Premium glass
 * Used by: hero visual panel, AscenraDS showcase
 */
.glass-l4 {
  background:              var(--glass-l4-bg);
  border:                  var(--glass-l4-border);
  box-shadow:              var(--glass-l4-shadow);
  border-radius:           var(--glass-l4-radius);
}

.glass-l4.glass-in-view {
  backdrop-filter:         var(--glass-l4-blur);
  -webkit-backdrop-filter: var(--glass-l4-blur);
}


/* ==========================================================================
   backdrop-filter Fallback (Requirement 1.7)
   For browsers that do not support backdrop-filter, apply a high-opacity
   opaque background (alpha ≥ 0.85) so text and UI remain legible.
   ========================================================================== */

@supports not (backdrop-filter: blur(1px)) {
  .glass-l1 {
    background: rgba(10, 10, 20, 0.88);
  }

  .glass-l2 {
    background: rgba(10, 10, 20, 0.90);
  }

  .glass-l3 {
    background: rgba(10, 10, 20, 0.92);
  }

  .glass-l4 {
    background: rgba(10, 10, 20, 0.94);
  }
}


/* ==========================================================================
   Reduced Motion Override (Requirements 1.5, 3.4, 6.4, 22.8)
   When the visitor signals prefers-reduced-motion, collapse all animation
   and transition durations to near-zero. This block also lives in
   accessibility.css as the canonical reference - duplicated here so
   glass.css is self-contained and safe to load in isolation.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
  }
}