/* =============================================================================
   INCOG EXPERTISE: ELEVATED TOKEN LAYER
   Single source of truth for the three expertise pages.
   Link in every page head:  <link rel="stylesheet" href="../_shared/elevated.css">
   Contains TOKENS + ELEVATION/MOTION PRIMITIVES ONLY. No layouts: every page
   keeps its own bespoke section CSS inline. Spec: _docs/design-system-elevated.md
   ========================================================================== */

:root {
  /* --- Brand red (official wine red, one accent per view) --- */
  --accent:        #c41e1e;
  --accent-deep:   #8f1717;
  --accent-light:  rgba(196, 30, 30, .08);
  --accent-glow:   rgba(196, 30, 30, .12);

  /* --- Surfaces --- */
  --paper:         #f7f4ee;
  --paper-2:       #f1ebe1;
  --card:          #fffefb;

  /* --- Ink --- */
  --ink:           #1c1814;
  --ink-soft:      #5d564e;
  --ink-faint:     #a39a8f;
  --ink-deep:      #14110d;
  --deep-ink:      #0a0806;

  /* --- Lines --- */
  --line:          #e5ded2;
  --line-strong:   #d6cdbe;

  /* --- Gold --- */
  --gold:          #9a8255;
  --gold-warm:     #d6b87f;
  --gold-glow:     rgba(154, 130, 85, .06);
  --arch-line:     rgba(154, 130, 85, .08);

  /* --- On-dark --- */
  --on-dark:       #f7f4ee;
  --on-dark-soft:  rgba(247, 244, 238, .62);
  --on-dark-faint: rgba(247, 244, 238, .45);
  --on-dark-line:  rgba(247, 244, 238, .11);

  /* --- Data-status (soft, brand-toned) --- */
  --green:         #3f9c6d;
  --green-light:   #5cc98c;
  --amber:         #c98a2b;
  --amber-light:   #e0a943;
  --red-soft:      #ec6a5e;
  --red-deep:      #9a2820;

  /* --- Type --- */
  --font-d: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-s: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fs-eyebrow: 0.72rem;
  --fs-xs:   0.8125rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.0625rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.625rem;
  --fs-3xl:  2.125rem;
  --fs-4xl:  3rem;
  --fs-display-sm: clamp(28px, 3.6vw, 46px);
  --fs-display:    clamp(34px, 5vw,   68px);
  --fs-display-lg: clamp(40px, 6.6vw, 76px);
  --lh-tight: 1.06;
  --lh-snug:  1.2;
  --lh-normal:1.6;
  --ls-tight: -0.02em;
  --ls-wide:  0.14em;

  /* --- Space / layout --- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 96px;
  --section: clamp(64px, 9vw, 128px);
  --container: 1240px;
  --container-narrow: 720px;
  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 8px; --radius-full: 9999px;

  /* --- Base shadows (warm, ink-tinted) --- */
  --shadow-sm: 0 1px 4px rgba(28, 24, 20, .06);
  --shadow-md: 0 8px 24px rgba(20, 17, 13, .10);
  --shadow-lg: 0 30px 60px rgba(28, 24, 20, .12);
  --shadow-xl: 0 50px 90px rgba(20, 17, 13, .22);

  /* --- Motion --- */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   0.2s;
  --dur-normal: 0.3s;
  --dur-slow:   0.5s;
  --dur-reveal: 0.9s;

  /* =========================================================================
     ELEVATION LAYER (new). Layered warm shadows: each level stacks a contact
     shadow, an ambient wash, and a long soft throw. Never cool gray.
     ====================================================================== */
  --e-shadow-1: 0 1px 2px rgba(28,24,20,.05), 0 4px 12px rgba(28,24,20,.05);
  --e-shadow-2: 0 1px 2px rgba(28,24,20,.06), 0 6px 16px rgba(28,24,20,.07), 0 20px 40px rgba(154,130,85,.06);
  --e-shadow-3: 0 2px 4px rgba(28,24,20,.07), 0 12px 28px rgba(28,24,20,.09), 0 36px 70px rgba(154,130,85,.08);
  --e-shadow-4: 0 2px 6px rgba(20,17,13,.09), 0 20px 44px rgba(20,17,13,.12), 0 60px 110px rgba(154,130,85,.10);

  --persp:    1200px;   /* shared perspective for 3D stacks */
  --tilt-max: 4deg;     /* pointer-tilt clamp */
  --lift-1:   translateY(-2px);
  --lift-2:   translateY(-5px);
}

/* =============================================================================
   MOTION PRIMITIVES (new class vocabulary; no collision with legacy .reveal)
   ========================================================================== */

/* Scroll reveal: JS adds .is-in (IntersectionObserver or ScrollTrigger) */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal="left"]  { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="left"].is-in, [data-reveal="right"].is-in { transform: none; }

/* Stagger children: parent gets .is-in, children cascade */
[data-stagger] > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(2) { transition-delay: .08s; }
[data-stagger].is-in > *:nth-child(3) { transition-delay: .16s; }
[data-stagger].is-in > *:nth-child(4) { transition-delay: .24s; }
[data-stagger].is-in > *:nth-child(5) { transition-delay: .32s; }
[data-stagger].is-in > *:nth-child(6) { transition-delay: .40s; }
[data-stagger].is-in > *:nth-child(7) { transition-delay: .48s; }
[data-stagger].is-in > *:nth-child(8) { transition-delay: .56s; }
[data-stagger].is-in > *:nth-child(9) { transition-delay: .64s; }
[data-stagger].is-in > *:nth-child(10) { transition-delay: .72s; }

/* Mask wipe reveal (editorial image entrance) */
[data-wipe] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease);
}
[data-wipe].is-in { clip-path: inset(0 0 0 0); }

/* Hairline draw: pathLength normalized to 1 in markup */
.e-draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s var(--ease);
}
.e-draw.is-in { stroke-dashoffset: 0; }

/* Depth card: layered shadow + lift, gold hairline on hover */
.e-card {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--e-shadow-1);
  transition: transform var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease);
}
.e-card:hover { transform: var(--lift-2); box-shadow: var(--e-shadow-3); border-color: var(--gold-warm); }

/* Tilt stage: JS drives --rx/--ry within +-var(--tilt-max) */
.e-tilt-stage { perspective: var(--persp); }
.e-tilt {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Parallax layers: GSAP scrub sets y; this only promotes compositing */
.e-parallax { will-change: transform; }

/* Treated imagery: warm grade + gold hairline frame */
.e-photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--e-shadow-2);
}
.e-photo img { filter: saturate(.88) contrast(1.02) sepia(.06); display: block; width: 100%; }
.e-photo::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(214, 184, 127, .38);
  border-radius: calc(var(--radius-lg) - 4px);
  pointer-events: none;
}
.e-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(160deg, rgba(154,130,85,.10), rgba(28,24,20,.14));
  pointer-events: none;
}

/* =============================================================================
   REDUCED MOTION: global kill switch. JS must ALSO branch to static paths.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-stagger] > *, [data-wipe] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .e-draw { stroke-dashoffset: 0 !important; transition: none !important; }
  .e-tilt { transform: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}