/**
 * LYOR Experience Engine — Frontend CSS v1.0
 *
 * Token-driven cinematic reveal + atmosphere system.
 * Enqueued on frontend only. All effects use transform + opacity.
 * Zero layout thrashing. IntersectionObserver-driven.
 *
 * TOKEN MAP (consumed from :root via DesignEngine)
 * ─────────────────────────────────────────────────
 * --le-reveal-distance      translateY on enter (default 18px)
 * --le-reveal-duration      animation duration (default 640ms)
 * --le-reveal-delay-step    stagger step between siblings (80ms)
 * --le-ambient-intensity    atmosphere overlay opacity (0.06)
 * --le-atmosphere-opacity   secondary overlay (0.055)
 * --le-glow-intensity       accent glow spread (0.08)
 * --le-transition-softness  reveal easing function
 */

/* ─── Reveal: base state (hidden until observed) ─────────── */

.le-reveal {
  opacity: 0;
  will-change: transform, opacity;
  /* JS sets transition after element is in DOM */
}

/* Variants: set transform in pending state */
.le-reveal--up     { transform: translateY(var(--le-reveal-distance, 18px)); }
.le-reveal--down   { transform: translateY(calc(-1 * var(--le-reveal-distance, 18px))); }
.le-reveal--left   { transform: translateX(var(--le-reveal-distance, 18px)); }
.le-reveal--right  { transform: translateX(calc(-1 * var(--le-reveal-distance, 18px))); }
.le-reveal--scale  { transform: scale(0.97); }
.le-reveal--blur   { filter: blur(4px); transform: translateY(calc(var(--le-reveal-distance, 18px) * 0.5)); }
.le-reveal--none   { /* opacity only */ }

/* Revealed state — applied by JS via IntersectionObserver */
.le-revealed {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Transition is set inline by JS so duration can be token-driven */
/* Default fallback if JS hasn't run */
.le-reveal.le-revealed {
  transition:
    opacity   var(--le-reveal-duration, 640ms) var(--le-transition-softness, cubic-bezier(0.22,1,0.36,1)),
    transform var(--le-reveal-duration, 640ms) var(--le-transition-softness, cubic-bezier(0.22,1,0.36,1)),
    filter    var(--le-reveal-duration, 640ms) var(--le-transition-softness, cubic-bezier(0.22,1,0.36,1));
}

/* ─── Stagger groups ─────────────────────────────────────── */
/*
 * Parent: data-le-stagger
 * Children: .le-reveal (each gets an increasing delay via JS)
 */
[data-le-stagger] > .le-reveal:nth-child(1)  { transition-delay: calc(var(--le-reveal-delay-step, 80ms) * 0); }
[data-le-stagger] > .le-reveal:nth-child(2)  { transition-delay: calc(var(--le-reveal-delay-step, 80ms) * 1); }
[data-le-stagger] > .le-reveal:nth-child(3)  { transition-delay: calc(var(--le-reveal-delay-step, 80ms) * 2); }
[data-le-stagger] > .le-reveal:nth-child(4)  { transition-delay: calc(var(--le-reveal-delay-step, 80ms) * 3); }
[data-le-stagger] > .le-reveal:nth-child(5)  { transition-delay: calc(var(--le-reveal-delay-step, 80ms) * 4); }
[data-le-stagger] > .le-reveal:nth-child(6)  { transition-delay: calc(var(--le-reveal-delay-step, 80ms) * 5); }
[data-le-stagger] > .le-reveal:nth-child(n+7){ transition-delay: calc(var(--le-reveal-delay-step, 80ms) * 6); }

/* ─── Hero Depth system ──────────────────────────────────── */
/*
 * .le-hero-depth — container for layered hero
 * Children use data-le-depth="0.2" etc. (JS reads and applies)
 */
.le-hero-depth {
  position: relative;
  overflow: hidden;
  /* Establish stacking context */
  isolation: isolate;
}

.le-hero-depth__bg {
  position: absolute;
  inset: -8%;   /* slight bleed for parallax movement room */
  will-change: transform;
  z-index: 0;
}

.le-hero-depth__content {
  position: relative;
  z-index: 2;
}

/* Cinematic entrance for hero */
.le-hero-depth .le-reveal--up { transform: translateY(24px); }

/* ─── Ambient atmosphere ─────────────────────────────────── */
/*
 * Applied to sections, cards, hero backgrounds.
 * Very subtle — almost subconscious.
 */
.le-ambient {
  position: relative;
  isolation: isolate;
}

/* Primary atmosphere overlay — radial from top, accent colour */
.le-ambient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 50% at 50% 0%,
    color-mix(in oklch, var(--le-accent, #c9a96e) calc(var(--le-ambient-intensity, 0.06) * 100%), transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

.le-ambient > * { position: relative; z-index: 1; }

/* Variant: side ambient */
.le-ambient--side::before {
  background: radial-gradient(
    ellipse 50% 80% at 0% 50%,
    color-mix(in oklch, var(--le-accent, #c9a96e) calc(var(--le-ambient-intensity, 0.06) * 100%), transparent) 0%,
    transparent 65%
  );
}

/* Variant: bottom ambient */
.le-ambient--bottom::before {
  background: radial-gradient(
    ellipse 70% 60% at 50% 100%,
    color-mix(in oklch, var(--le-accent, #c9a96e) calc(var(--le-ambient-intensity, 0.06) * 100%), transparent) 0%,
    transparent 70%
  );
}

/* ─── Glow system ────────────────────────────────────────── */
/*
 * Soft glow on accent elements — links, CTAs, important text.
 * Intensity via --le-glow-intensity token.
 */
.le-glow {
  text-shadow:
    0 0 20px color-mix(in oklch, var(--le-accent, #c9a96e) calc(var(--le-glow-intensity, 0.08) * 200%), transparent),
    0 0 40px color-mix(in oklch, var(--le-accent, #c9a96e) calc(var(--le-glow-intensity, 0.08) * 100%), transparent);
}

.le-glow--box {
  box-shadow:
    0 0 24px color-mix(in oklch, var(--le-accent, #c9a96e) calc(var(--le-glow-intensity, 0.08) * 200%), transparent),
    0 0 48px color-mix(in oklch, var(--le-accent, #c9a96e) calc(var(--le-glow-intensity, 0.08) * 100%), transparent);
}

/* ─── Page intro ─────────────────────────────────────────── */
/*
 * body.le-intro-active: page is entering (JS removes after intro)
 * Prevents FOUC and creates cinematic entrance.
 */
body.le-intro-active {
  overflow: hidden;  /* prevent scroll during intro */
}

.le-intro-curtain {
  position: fixed;
  inset: 0;
  background: var(--le-bg, #09080a);
  z-index: 9999;
  pointer-events: none;
  opacity: 1;
  transition: opacity 600ms cubic-bezier(0.22,1,0.36,1);
}

.le-intro-curtain.le-intro-out {
  opacity: 0;
}

/* ─── Typewriter reveal ──────────────────────────────────── */
/*
 * .le-type-reveal: text chars animate in with clip-path
 * JS splits text into spans, staggers reveal
 */
.le-type-reveal .le-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.3em);
  transition:
    opacity   400ms cubic-bezier(0.22,1,0.36,1),
    transform 400ms cubic-bezier(0.22,1,0.36,1);
}
.le-type-reveal.le-revealed .le-char {
  opacity: 1;
  transform: translateY(0);
}

/* ─── Atmospheric overlay card ───────────────────────────── */
.le-card-atmo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.le-card-atmo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(255,255,255, calc(var(--le-atmosphere-opacity, 0.055) * 0.8)) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 1;
  /* Inset highlight — makes surface feel like it has a light source */
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ─── Horizontal line reveal ─────────────────────────────── */
.le-line-reveal {
  overflow: hidden;
  display: block;
}
.le-line-reveal__inner {
  display: block;
  transform: translateY(105%);
  transition: transform var(--le-reveal-duration, 640ms) var(--le-transition-softness, cubic-bezier(0.22,1,0.36,1));
}
.le-revealed > .le-line-reveal__inner,
.le-line-reveal.le-revealed .le-line-reveal__inner {
  transform: translateY(0);
}

/* ─── Experience presets (CSS-layer variables) ───────────── */

/* Luxury Calm */
.le-experience--luxury-calm {
  --le-reveal-distance:    14px;
  --le-reveal-duration:    800ms;
  --le-reveal-delay-step:  100ms;
  --le-ambient-intensity:  0.07;
  --le-atmosphere-opacity: 0.06;
  --le-glow-intensity:     0.09;
}

/* Editorial Minimal */
.le-experience--editorial {
  --le-reveal-distance:    8px;
  --le-reveal-duration:    500ms;
  --le-reveal-delay-step:  50ms;
  --le-ambient-intensity:  0.02;
  --le-atmosphere-opacity: 0.02;
  --le-glow-intensity:     0.03;
}

/* Cinematic Dark */
.le-experience--cinematic {
  --le-reveal-distance:    24px;
  --le-reveal-duration:    900ms;
  --le-reveal-delay-step:  120ms;
  --le-ambient-intensity:  0.10;
  --le-atmosphere-opacity: 0.08;
  --le-glow-intensity:     0.14;
}

/* Alpine Serenity */
.le-experience--alpine {
  --le-reveal-distance:    16px;
  --le-reveal-duration:    700ms;
  --le-reveal-delay-step:  80ms;
  --le-ambient-intensity:  0.05;
  --le-atmosphere-opacity: 0.045;
  --le-glow-intensity:     0.07;
}

/* Apple Precision */
.le-experience--apple {
  --le-reveal-distance:    6px;
  --le-reveal-duration:    420ms;
  --le-reveal-delay-step:  40ms;
  --le-ambient-intensity:  0.03;
  --le-atmosphere-opacity: 0.025;
  --le-glow-intensity:     0.04;
  --le-transition-softness: cubic-bezier(0.2,0,0,1);
}

/* Soft Hospitality */
.le-experience--hospitality {
  --le-reveal-distance:    12px;
  --le-reveal-duration:    750ms;
  --le-reveal-delay-step:  90ms;
  --le-ambient-intensity:  0.065;
  --le-atmosphere-opacity: 0.055;
  --le-glow-intensity:     0.08;
}

/* ─── Prefers-reduced-motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .le-reveal,
  .le-reveal--up,
  .le-reveal--down,
  .le-reveal--left,
  .le-reveal--right,
  .le-reveal--scale,
  .le-reveal--blur {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .le-type-reveal .le-char {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .le-intro-curtain { display: none; }

  .le-ambient::before    { display: none; }
  .le-card-atmo::after   { display: none; }
}

/* ─── Forced colours (Windows High Contrast) ────────────── */
@media (forced-colors: active) {
  .le-ambient::before,
  .le-card-atmo::after,
  .le-glow,
  .le-glow--box { display: none; }
}