/* =========================================================
   Dani Cards & Collectibles — Base Element Resets & Utilities
   Dark-luxury / glassmorphism collectible-marketplace theme.
   Source of truth: docs/architecture/futuristic-redesign.md §2.4-2.5, §4.1, §6 Pass 1

   Load order: tokens.css -> base.css -> components.css -> animations.css -> styles.css
   This file consumes the tokens defined in tokens.css (must load first).

   Scope (Pass 1): global element resets (body, h1-h3, .container, .section)
   using the NEW dark-luxury tokens, plus utility classes (.glass-surface,
   .foil-sheen, .gold-foil-text, .reveal) that are defined here but not yet
   applied to any markup — later passes add the classes to HTML/JS-built
   markup. Component-specific classes (.btn, .product-card, .site-header,
   etc.) are intentionally NOT touched here; they still live in styles.css
   on the legacy tokens until their own pass restyles and relocates them.
   ========================================================= */

/* ---------- Global box model ---------- */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* ---------- Body / headings (§6 Pass 1) ---------- */
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-0);
  background: var(--surface-0);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-0);
  line-height: 1.3;
}

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

/* ---------- Layout primitives ---------- */
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

.section {
  padding: var(--space-8) 0;
}

/* Subtle surface-step alternation instead of the old warm-paper/white
   alternation — reinforces the "layered glass panels" depth read (§1)
   without needing a hairline border between every section. */
.section:nth-of-type(even) {
  background: var(--surface-1);
}

.section h2 {
  position: relative;
  padding-bottom: 18px;
  display: inline-block;
  font-size: 27px;
  margin-bottom: 6px;
}

.section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: var(--accent-gold);
  border-radius: 2px;
}

.section-subtitle {
  color: var(--ink-muted);
  margin-top: 0;
  margin-bottom: 32px;
  font-size: 15.5px;
}

/* ---------- Accessibility (§4.3) ----------
   Consistent focus-visible ring on every interactive element site-wide —
   closes the pre-existing gap noted in the prior cycle's review. Loads
   before styles.css/components.css so any component-specific focus-visible
   rule (same or higher specificity) still wins where one already exists. */
:focus-visible {
  outline: 2px solid var(--accent-trust);
  outline-offset: 3px;
}

/* =========================================================
   Utility classes (§2.4-2.5, §4.1) — defined here, applied by later passes.
   ========================================================= */

/* ---------- Glassmorphism recipe (§2.4) ---------- */
.glass-surface {
  background: var(--surface-glass);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.glass-surface:hover,
.glass-surface:focus-within {
  border-color: var(--border-glass-strong);
}

/* Progressive enhancement: browsers without backdrop-filter support get a
   solid, still-legible surface instead of a transparent one. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-surface {
    background: var(--surface-2);
  }
}

/* ---------- Holographic foil sheen (§2.5) ----------
   Reserved for product-card hover only (signature tier, §3.3) — a
   conic-gradient "tilt in the light" effect with no pointer-tracking JS. */
.foil-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: conic-gradient(
    from 210deg,
    var(--accent-holo-a),
    var(--accent-holo-b),
    var(--accent-holo-c),
    var(--accent-holo-a)
  );
  opacity: 0;
  mix-blend-mode: color-dodge;
  transition: opacity 0.3s ease;
}
/* Trigger selectors (which element's hover reveals which .foil-sheen) are
   component-specific and live in css/components.css (Pass 3: signature-tier
   product cards; hero ambient layer uses .hero-holo-layer directly). */

/* ---------- Gold foil shimmer text (§2.5) ----------
   Certificate badges, premium-tier price tags, key headline phrases. */
.gold-foil-text {
  background: linear-gradient(
    100deg,
    var(--accent-gold-deep) 20%,
    var(--accent-gold) 40%,
    #fff3d6 50%,
    var(--accent-gold) 60%,
    var(--accent-gold-deep) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Scroll-reveal (§4.1) ----------
   Applied via js/animations.js (Pass 5) using IntersectionObserver.
   Defined now so later passes can add the class to markup without waiting
   on Pass 5's script — content stays visible (opacity: 1 default state is
   the ".reveal-visible" class; ".reveal" alone starts hidden) only once
   the script runs; until Pass 5 ships, no markup references ".reveal" yet,
   so this has zero visible effect this pass. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  /* Works whether this element is itself individually observed (its own
     --stagger-index cascades its own fade slightly) or is a direct child
     of a separately-.reveal-visible parent (see the sibling rule below) —
     defaults to 0ms when unset. */
  transition-delay: calc(var(--stagger-index, 0) * 60ms);
}
.reveal-visible {
  opacity: 1;
  transform: none;
}
/* Staggered children within a revealed section (product cards, steps, etc.) */
.reveal-visible > * {
  transition-delay: calc(var(--stagger-index, 0) * 60ms);
}