/* =========================================================
 * Soléa — Runway Grammar (la grammaire globale défilé de mode)
 *
 * Une cadence unifiée à travers tout le site. Pas un composant — une
 * RESPIRATION imposée à toutes les animations existantes.
 *
 * Principe : le défilé de mode haute couture impose
 *   - des tempos LENTS et CADENCÉS (pas frénétique)
 *   - des PAUSES marquées entre éléments
 *   - une LUMIÈRE directionnelle qui SUIT
 *   - du SILENCE entre les poses
 *
 * Ce fichier charge APRÈS tout le reste de la cascade pour OVERRIDER
 * les durations/easings qui dérapent vers le « web standard ».
 * Aucune régression : on ne casse rien, on ralentit et on aligne.
 * ========================================================= */

/* =========================================================
 *  TEMPO TOKENS — Une seule horloge pour tout le site
 * ========================================================= */
:root {
  /* Durations runway — haute couture, pas e-commerce */
  --runway-instant:  0.20s;   /* feedback immédiat (focus, click) */
  --runway-step:     0.45s;   /* hover discret, tilt subtle */
  --runway-walk:     0.85s;   /* la cadence de marche normale */
  --runway-pose:     1.40s;   /* la pose s'arrête, l'œil regarde */
  --runway-glide:    2.20s;   /* transition entre poses majeures */
  --runway-cinema:   4.00s;   /* moments cinématographiques rares */

  /* Easings runway — silence + accent + relâche */
  --runway-step-ease:   cubic-bezier(0.4, 0, 0.6, 1);          /* régulier, comme un pas */
  --runway-pose-ease:   cubic-bezier(0.22, 1, 0.36, 1);        /* arrivée en pose */
  --runway-glide-ease:  cubic-bezier(0.65, 0, 0.35, 1);        /* glissement scénique */
  --runway-accent-ease: cubic-bezier(0.34, 1.56, 0.64, 1);     /* arrivée avec autorité */

  /* Délais runway — pause entre mannequins */
  --runway-pause-short: 0.12s;
  --runway-pause:       0.28s;
  --runway-pause-long:  0.60s;

  /* Stagger runway — cadence entre éléments d'une même rangée */
  --runway-stagger:     0.18s;  /* assez lent pour qu'on remarque chacun */
}

/* =========================================================
 *  REVEALS — Tempo défilé sur tous les data-fx
 *  Override les durations existantes par celles du runway.
 * ========================================================= */
[data-fx="reveal"],
[data-fx="reveal-up"],
[data-fx="reveal-fade"],
[data-fx="reveal-scale"] {
  transition-duration: var(--runway-pose) !important;
  transition-timing-function: var(--runway-pose-ease) !important;
}
[data-fx="reveal-slide-left"],
[data-fx="reveal-slide-right"] {
  transition-duration: var(--runway-glide) !important;
  transition-timing-function: var(--runway-glide-ease) !important;
}
[data-fx="reveal-mask"],
[data-fx="reveal-mask-v"],
[data-fx="reveal-split"],
[data-fx="reveal-unveil"] {
  transition-duration: var(--runway-glide) !important;
  transition-timing-function: var(--runway-glide-ease) !important;
}
[data-fx="reveal-glow"],
[data-fx="reveal-blur"],
[data-fx="reveal-flip"] {
  transition-duration: var(--runway-glide) !important;
  transition-timing-function: var(--runway-pose-ease) !important;
}

/* Stagger cadencé entre éléments fratries (pause de défilé entre mannequins) */
[data-fx-stagger] > * {
  transition-duration: var(--runway-pose) !important;
  transition-timing-function: var(--runway-pose-ease) !important;
  transition-delay: calc(var(--fx-i, 0) * var(--runway-stagger)) !important;
}

/* =========================================================
 *  CARDS / TILES — Tous les hovers de cartes alignés runway
 * ========================================================= */
.fx-num-card,
.fx-product-card,
.fx-trust-card,
.fx-three-card,
.fx-compare-card,
.home-audience-card,
.narrative-acte,
.orbit-card,
.realisation-tile,
.hexcell,
.city-card,
.axis-card {
  transition-duration: var(--runway-pose) !important;
  transition-timing-function: var(--runway-pose-ease) !important;
}

/* Images dans frames : zoom plus lent, plus respiré */
.fx-frame img,
.fx-zoom-tilt img,
.fx-zoom-tilt picture,
.fx-magnetic-depth img,
.realisation-tile-media img {
  transition-duration: var(--runway-glide) !important;
  transition-timing-function: var(--runway-glide-ease) !important;
}

/* =========================================================
 *  CTAS — Tempo signature
 *  Les boutons réagissent vite (instant) mais leur déploiement est lent
 * ========================================================= */
.fx-cta,
.cta-button {
  transition: transform var(--runway-step) var(--runway-pose-ease),
              color var(--runway-step) var(--runway-step-ease),
              box-shadow var(--runway-pose) var(--runway-pose-ease) !important;
}
.fx-cta::before {
  transition: transform var(--runway-pose) var(--runway-glide-ease) !important;
}
.fx-cta .arrow {
  transition: transform var(--runway-pose) var(--runway-pose-ease) !important;
}

/* =========================================================
 *  TILT + MAGNETIC — Plus glissants, moins nerveux
 * ========================================================= */
[data-tilt] {
  transition-duration: var(--runway-pose) !important;
  transition-timing-function: var(--runway-pose-ease) !important;
}
[data-magnetic] {
  transition-duration: var(--runway-step) !important;
  transition-timing-function: var(--runway-pose-ease) !important;
}

/* =========================================================
 *  SECTION TRANSITIONS — Rideau or de runway entre sections majeures
 *
 *  À la frontière de 2 sections majeures, un trait or fin balaye
 *  horizontalement (300ms, ease-glide) — comme une lampe qui passe
 *  d'un mannequin au suivant.
 *
 *  Activé via classe .runway-divider (à appliquer manuellement
 *  ou via JS sur les frontières de section qui méritent un seuil).
 * ========================================================= */
.runway-divider {
  position: relative;
  height: 1px;
  margin: 0;
  background: transparent;
  overflow: visible;
}
.runway-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(246, 183, 44, 0) 20%,
    rgba(246, 183, 44, 0.55) 50%,
    rgba(246, 183, 44, 0) 80%,
    transparent 100%
  );
  transform: translateY(-50%) scaleX(0);
  transform-origin: center;
  transition: transform var(--runway-glide) var(--runway-glide-ease);
}
.runway-divider.is-revealed::before,
.is-revealed .runway-divider::before { transform: translateY(-50%) scaleX(1); }
.runway-divider::after {
  /* Spot or qui passe rapidement de gauche à droite */
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 120px;
  height: 14px;
  background: radial-gradient(ellipse, rgba(246, 183, 44, 0.5) 0%, transparent 70%);
  transform: translateY(-50%) translateX(-120px);
  filter: blur(8px);
  pointer-events: none;
  opacity: 0;
}
.runway-divider.is-revealed::after,
.is-revealed .runway-divider::after {
  animation: runwaySpotPass 1.6s var(--runway-glide-ease) 0.3s forwards;
}
@keyframes runwaySpotPass {
  0%   { transform: translateY(-50%) translateX(-120px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(-50%) translateX(calc(100vw - 120px)); opacity: 0; }
}

/* =========================================================
 *  LIGHTING DIRECTIONNEL — Spot qui suit l'œil au scroll
 *
 *  À l'entrée d'une section, un faux spot s'allume en haut-droite
 *  (key light fashion) et fade en 1.4s. Subtile mais présente.
 * ========================================================= */
.runway-spot {
  position: relative;
  isolation: isolate;
}
.runway-spot::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 360px;
  height: 360px;
  background: radial-gradient(ellipse, rgba(255, 222, 160, 0.18) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  filter: blur(20px);
  z-index: 0;
  transition: opacity var(--runway-glide) var(--runway-glide-ease);
}
.runway-spot.is-revealed::before,
.is-revealed.runway-spot::before { opacity: 1; }

/* =========================================================
 *  TYPOGRAPHY — Cadence des H2 (caractère par caractère)
 *
 *  Les H2 de section qui ont .runway-cadence se révèlent
 *  caractère par caractère (effet typewriter ralenti — mannequin
 *  qui marque une pose à chaque mot). Opt-in via la classe.
 * ========================================================= */
.runway-cadence {
  --char-delay: 40ms;
}
.runway-cadence .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--runway-step) var(--runway-pose-ease),
              transform var(--runway-step) var(--runway-pose-ease);
  transition-delay: calc(var(--ch-i, 0) * var(--char-delay));
}
.runway-cadence.is-revealed .ch {
  opacity: 1;
  transform: none;
}

/* =========================================================
 *  IMAGES — Fade-in long à l'entrée (pas pop-in)
 * ========================================================= */
.runway-image {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity var(--runway-glide) var(--runway-glide-ease),
              transform var(--runway-glide) var(--runway-glide-ease);
}
.runway-image.is-loaded,
.is-revealed .runway-image { opacity: 1; transform: none; }

/* =========================================================
 *  SCROLL — Smooth global plus lent (anti-snap)
 *  Évite les saccades sur les ancres internes.
 * ========================================================= */
html {
  scroll-behavior: smooth;
}

/* =========================================================
 *  CHAMBRES — Tempo plus lent, plus contemplatif
 *  La chambre est le moment de silence du défilé.
 * ========================================================= */
.solea-chamber .chamber-shell {
  transition: opacity var(--runway-cinema) var(--runway-pose-ease) !important,
              transform var(--runway-cinema) var(--runway-pose-ease) !important;
}
.solea-chamber .chamber-rule {
  transition: transform var(--runway-glide) var(--runway-glide-ease) calc(var(--runway-pose-long, 1s)) !important;
}

/* =========================================================
 *  PRE-FERS REDUCED MOTION — Désactive tout le tempo runway
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
  :root {
    --runway-instant: 0.001s;
    --runway-step:    0.001s;
    --runway-walk:    0.001s;
    --runway-pose:    0.001s;
    --runway-glide:   0.001s;
    --runway-cinema:  0.001s;
  }
  .runway-divider::after { animation: none !important; }
}