/**
 * Golden Eagle GS — Luxury Effects Layer
 * Stage 4.5 — Luxury Visual Direction & Global Art Direction
 *
 * Utility classes implementing DESIGN_LANGUAGE.md's material/lighting
 * specification: Metallic Gold Material, Navy Lighting System, Premium
 * Shadows, Glass Surface, Border System, Premium Icons, and the
 * hover-effect catalogue from MOTION_GUIDELINES.md.
 *
 * All values reference the :root tokens in style.css (including the
 * Stage 4.5 shadow/glass tokens added there) — no new hard-coded
 * hex/shadow value appears here that isn't already a token.
 *
 * PERFORMANCE DISCIPLINE (see MOTION_GUIDELINES.md's budget in full):
 * every hover/motion rule below animates ONLY `transform`, `opacity`,
 * or `filter` — the three GPU-compositable properties that never
 * trigger layout or paint. Nothing here animates `box-shadow` size,
 * `width`/`height`, or `top`/`left` directly.
 *
 * LOADING: registered only (not sitewide) — see functions.php's
 * `ge_child_register_luxury_visual_assets()`. These are refinements
 * layered onto Stage 3's component classes once Stage 5 pages actually
 * use them, not a sitewide default cost today.
 */

/* ==========================================================================
   1. METALLIC GOLD MATERIAL
   ========================================================================== */
/* Simulates engraved/embossed metal rather than a flat gold fill — the
   same three-stop gradient (highlight → mid → shadow) used across the
   brand's logo and, now, any text/icon needing the same material. */

.ge-metallic-gold {
  background: linear-gradient(
    135deg,
    var(--ge-color-gold-100) 0%,
    var(--ge-color-gold-300) 35%,
    var(--ge-color-gold-500) 65%,
    var(--ge-color-gold-700) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fallback for browsers without background-clip:text support (rare,
   but this is a brand-critical treatment — never let it render as
   invisible text). */
@supports not (background-clip: text) {
  .ge-metallic-gold {
    color: var(--ge-color-gold-300);
    background: none;
  }
}

.ge-metallic-gold-surface {
  /* Same material, applied as a fill rather than text-clip — for
     icon backgrounds, badge chips, etc. */
  background: linear-gradient(135deg, var(--ge-color-gold-300), var(--ge-color-gold-500));
}

/* ==========================================================================
   2. NAVY LIGHTING SYSTEM
   ========================================================================== */
/* Radial "glow" utility recreating the brand logo's lighter-center,
   darker-edge navy background — used behind hero emblems, section
   backgrounds, and card-hover states that need atmospheric depth. */

.ge-navy-glow {
  background: radial-gradient(
    ellipse at center,
    var(--ge-color-navy-850) 0%,
    var(--ge-color-navy-900) 55%,
    var(--ge-color-navy-950) 100%
  );
}

.ge-navy-glow--gold-accent {
  /* A subtle warm glow layered under the navy radial — used sparingly
     (hero backgrounds only) since two overlapping radial gradients on
     every section would flatten the "one flip moment" tonal rhythm
     established in the Phase 3 UI Spec. */
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(201, 162, 75, 0.08), transparent 70%),
    radial-gradient(ellipse at center, var(--ge-color-navy-850) 0%, var(--ge-color-navy-900) 55%, var(--ge-color-navy-950) 100%);
}

/* ==========================================================================
   3. PREMIUM SHADOWS
   ========================================================================== */

.ge-shadow-sm { box-shadow: var(--ge-shadow-sm); }
.ge-shadow-md { box-shadow: var(--ge-shadow-md); }
.ge-shadow-lg { box-shadow: var(--ge-shadow-lg); }
.ge-shadow-gold-glow { box-shadow: var(--ge-shadow-gold-glow); }
.ge-shadow-gold-glow-strong { box-shadow: var(--ge-shadow-gold-glow-strong); }

/* ==========================================================================
   4. GLASS SURFACE
   ========================================================================== */
/* RESTRICTED USE — see DESIGN_LANGUAGE.md's Glass Surface Guidelines.
   backdrop-filter is a genuine scroll-performance cost on lower-end
   mobile GPUs; this class exists for the sticky header (already
   specified in DESIGN_SYSTEM.md §3.1) and modal backdrops ONLY. Do not
   apply to cards, section backgrounds, or any element that appears in
   a scrolling grid — that usage pattern is explicitly out of scope. */

.ge-glass-surface {
  background: var(--ge-glass-bg);
  -webkit-backdrop-filter: blur(var(--ge-glass-blur));
  backdrop-filter: blur(var(--ge-glass-blur));
  border: 1px solid var(--ge-glass-border);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ge-glass-surface {
    /* Fallback for the small remaining share of browsers without
       backdrop-filter support: solid navy instead of translucent —
       degrades gracefully, never transparent-over-nothing. */
    background: var(--ge-color-navy-900);
  }
}

/* ==========================================================================
   5. BORDER SYSTEM
   ========================================================================== */

.ge-border-subtle { border: 1px solid var(--ge-color-border-subtle); }
.ge-border-active { border: 1px solid var(--ge-color-border-active); }

.ge-border-gradient {
  /* A 1px gradient-gold border via a padding-box/border-box background
     trick — reused for the header/footer hairline dividers already
     specified in DESIGN_SYSTEM.md (the "talon-bar motif") wherever a
     component needs the same treatment without a full section-divider
     element. */
  position: relative;
  border: 1px solid transparent;
  background-image:
    linear-gradient(var(--ge-color-navy-850), var(--ge-color-navy-850)),
    linear-gradient(90deg, var(--ge-color-gold-700), var(--ge-color-gold-300), var(--ge-color-gold-700));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.ge-divider-gold {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, var(--ge-color-gold-500), transparent);
}

/* ==========================================================================
   6. PREMIUM ICONS
   ========================================================================== */
/* Extends the Stage 3 .ge-icon system with an engraved/beveled
   treatment for icons used in high-visibility brand moments (hero,
   section headers) — NOT applied to every icon sitewide, since the
   filter cost, while small per-element, is unnecessary on the dozens
   of small utility icons (pagination arrows, form field icons) that
   don't need this level of visual weight. */

.ge-icon--premium {
  filter:
    drop-shadow(-0.5px -0.5px 0 rgba(232, 200, 120, 0.3))
    drop-shadow(0.5px 0.5px 0.5px rgba(5, 11, 20, 0.5));
}

/* ==========================================================================
   7. HOVER EFFECTS CATALOGUE
   ========================================================================== */
/* .ge-hover-lift already exists (Stage 2, animation-system.css) — not
   redefined here. These are the ADDITIONAL luxury-tier hover effects
   introduced this stage, each isolated to its own opt-in class so a
   component only pays for the specific effect it actually uses. */

.ge-hover-glow {
  transition: box-shadow var(--ge-duration-base) var(--ge-ease-standard);
}

.ge-hover-glow:hover,
.ge-hover-glow:focus-visible {
  box-shadow: var(--ge-shadow-gold-glow);
}

.ge-hover-tilt {
  transition: transform var(--ge-duration-base) var(--ge-ease-standard);
  transform-style: preserve-3d;
}

.ge-hover-tilt:hover,
.ge-hover-tilt:focus-visible {
  /* A restrained 2-degree tilt — enough to register as a premium
     "responsive to you" detail, not enough to feel gimmicky or to
     risk motion discomfort. transform-only, GPU-safe. */
  transform: perspective(600px) rotateX(2deg) rotateY(-2deg) translateY(-2px);
}

.ge-hover-shimmer {
  position: relative;
  overflow: hidden;
}

.ge-hover-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.15) 45%,
    transparent 60%
  );
  background-size: 200% 100%;
  background-position: -150% 0;
  transition: background-position var(--ge-duration-slow) var(--ge-ease-standard);
  pointer-events: none;
}

.ge-hover-shimmer:hover::after,
.ge-hover-shimmer:focus-visible::after {
  background-position: 150% 0;
}

/* ==========================================================================
   8. REDUCED MOTION — applies to every effect in this file
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ge-hover-tilt:hover,
  .ge-hover-tilt:focus-visible {
    transform: none;
  }

  .ge-hover-shimmer::after {
    transition: none;
    background-position: -150% 0 !important;
  }

  .ge-hover-glow,
  .ge-border-gradient,
  .ge-glass-surface {
    transition: none;
  }
}