/* =========================================================================
   Clara Prestige — module MOTION (autonome)
   Activation : classe `has-motion` sur <body>.
   Tout est inerte tant que cette classe est absente.
   Respecte [prefers-reduced-motion: reduce] (bloc dédié en bas de fichier).
   Aucune dépendance externe. RTL : tout ce qui a une direction s'inverse
   via [dir="rtl"] grâce à --cp-dir (1 en LTR, -1 en RTL).
   ========================================================================= */

:root {
  --cp-m-gold: var(--or, #cba35c);
  --cp-m-gold-clair: var(--or-clair, #e7d3a1);
  --cp-m-gold-fonce: var(--or-fonce, #8a6c31);
  --cp-m-noir: var(--noir, #0a0a0c);
  --cp-m-ivoire: var(--ivoire, #f7f3ea);
  --cp-m-ease: var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  --cp-dir: 1; /* sens des animations directionnelles ; -1 en RTL */
}
[dir="rtl"] { --cp-dir: -1; }

/* =========================================================================
   1. RIDEAU D'OUVERTURE (intro cinématique)
   ========================================================================= */
.cp-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--cp-m-noir);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 1;
  transition: opacity .5s var(--cp-m-ease);
}
.cp-curtain.cp-curtain-out { opacity: 0; pointer-events: none; }

.cp-curtain-inner {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cp-curtain-line {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 18px);
  width: 90px;
  height: 1px;
  background: var(--cp-m-gold);
  transform-origin: center;
  clip-path: inset(0 100% 0 0);
  animation: cp-line-draw .7s .15s var(--cp-m-ease) forwards;
}
.cp-curtain-mono {
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: cp-mono-glow 1.1s .55s ease-out forwards;
}
.cp-curtain-mono circle { stroke: var(--cp-m-gold); }
.cp-curtain-mono text { fill: var(--cp-m-gold); }
.cp-curtain-skip {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans, "Inter", sans-serif);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(247, 243, 234, 0.4);
  opacity: 0;
  animation: cp-skip-in .5s 1s ease-out forwards;
}

@keyframes cp-line-draw {
  to { clip-path: inset(0 0 0 0); }
}
@keyframes cp-mono-glow {
  0%   { opacity: 0; filter: drop-shadow(0 0 0 rgba(203,163,92,0)); }
  35%  { opacity: .55; filter: drop-shadow(0 0 10px rgba(203,163,92,.45)); }
  55%  { opacity: .82; filter: drop-shadow(0 0 4px rgba(203,163,92,.25)); }
  75%  { opacity: .95; filter: drop-shadow(0 0 14px rgba(203,163,92,.5)); }
  100% { opacity: 1; filter: drop-shadow(0 0 8px rgba(203,163,92,.35)); }
}
@keyframes cp-skip-in { to { opacity: 1; } }

/* =========================================================================
   2. FOND VIVANT — particules + lumière volumétrique
   ========================================================================= */
.cp-bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .8;
}
.cp-bg-light {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(420px 420px at var(--cp-lx, 50%) var(--cp-ly, 30%),
    rgba(203,163,92,0.10), transparent 70%);
  transition: background-position .3s linear;
  mix-blend-mode: screen;
}

/* =========================================================================
   3. TEXTE DORÉ "FOIL"
   ========================================================================= */
.has-motion .cp-foil {
  background: linear-gradient(100deg,
    var(--cp-m-gold-clair) 0%, var(--cp-m-gold) 30%, var(--cp-m-gold-fonce) 45%,
    var(--cp-m-gold) 60%, var(--cp-m-gold-clair) 100%);
  background-size: 240% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 1.4s var(--cp-m-ease);
}
.has-motion .cp-foil.cp-foil-in { background-position: 0 0; }
.has-motion .cp-foil:hover { background-position: calc(50% * var(--cp-dir)) 0; }

/* =========================================================================
   4. BOUTONS — bordure or au survol + ping CTA + halo appel
   ========================================================================= */
.cp-btn-wrap { position: relative; display: inline-flex; }
.cp-btn-outline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.cp-btn-outline rect {
  fill: none;
  stroke: var(--cp-m-gold);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
  transition: stroke-dashoffset .55s var(--cp-m-ease);
}
.cp-btn-wrap:hover .cp-btn-outline rect,
.cp-btn-wrap:focus-within .cp-btn-outline rect { stroke-dashoffset: 0 !important; }

.cp-ping {
  position: absolute;
  inset: -2px;
  border-radius: var(--radius, 2px);
  pointer-events: none;
  border: 1px solid var(--cp-m-gold);
  opacity: 0;
  animation: cp-ping-pulse 8s ease-out infinite;
}
@keyframes cp-ping-pulse {
  0%   { opacity: 0; transform: scale(1); }
  4%   { opacity: .65; transform: scale(1); }
  20%  { opacity: 0;   transform: scale(1.18); }
  100% { opacity: 0;   transform: scale(1.18); }
}

.cp-call-halo {
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  pointer-events: none;
}
.cp-call-halo::before, .cp-call-halo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 1px solid var(--cp-m-gold);
  opacity: 0;
  animation: cp-call-pulse 2.6s ease-out infinite;
}
.cp-call-halo::after { animation-delay: 1.3s; }
@keyframes cp-call-pulse {
  0%   { opacity: .55; transform: scale(0.75); }
  70%  { opacity: 0;   transform: scale(1.55); }
  100% { opacity: 0;   transform: scale(1.55); }
}

/* =========================================================================
   5. NUMÉRO DE DÉMO — effet cadran
   ========================================================================= */
.cp-digit {
  display: inline-block;
  min-width: 0.62em;
}
.cp-digit-roll { will-change: contents; }

/* =========================================================================
   6. SCROLL — masques en biais, cartes qui se soulèvent, parallaxe
   Réutilise le cycle .reveal / .in-view déjà en place (aucun observateur
   supplémentaire) : ces règles surchargent simplement la transition sous
   le scope .has-motion pour les éléments concernés.
   ========================================================================= */
.has-motion .section-head.reveal,
.has-motion .uae.reveal {
  clip-path: polygon(0% 100%, 0% 100%, 0% 100%, 0% 100%);
  transition: clip-path 1s var(--cp-m-ease), opacity .8s var(--cp-m-ease), transform .8s var(--cp-m-ease);
}
.has-motion .section-head.reveal.in-view,
.has-motion .uae.reveal.in-view {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.has-motion .universe-card.reveal,
.has-motion .step.reveal,
.has-motion .discretion-item.reveal {
  transform: translateY(48px) scale(.96);
  transition: opacity .9s var(--cp-m-ease), transform .9s var(--cp-m-ease);
}
.has-motion .universe-card.reveal.in-view,
.has-motion .step.reveal.in-view,
.has-motion .discretion-item.reveal.in-view {
  transform: translateY(0) scale(1);
}

/* parallaxe subtile sur les ornements (pilotée en JS via --cp-py) */
.has-motion .gold-field svg,
.has-motion .monogram-lg,
.has-motion .uae .uae-pattern,
.has-motion .uae-visual svg {
  transform: translate3d(0, var(--cp-py, 0px), 0);
  will-change: transform;
}

/* =========================================================================
   7. CURSEUR PERSONNALISÉ (desktop uniquement)
   ========================================================================= */
.cp-cursor-dot, .cp-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 9998;
  pointer-events: none;
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}
.cp-cursor-dot {
  width: 6px; height: 6px;
  background: var(--cp-m-gold);
}
.cp-cursor-ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(203,163,92,0.55);
  transition: width .25s var(--cp-m-ease), height .25s var(--cp-m-ease),
              border-color .25s var(--cp-m-ease), opacity .25s var(--cp-m-ease);
}
.cp-cursor-ring.cp-cursor-active {
  width: 56px; height: 56px;
  border-color: var(--cp-m-gold);
  background: rgba(203,163,92,0.08);
}
body.has-motion.cp-cursor-on, body.has-motion.cp-cursor-on a, body.has-motion.cp-cursor-on button {
  cursor: none;
}

/* =========================================================================
   PREFERS-REDUCED-MOTION — désactivation complète des effets non essentiels
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .cp-curtain, .cp-bg-canvas, .cp-bg-light,
  .cp-cursor-dot, .cp-cursor-ring, .cp-ping, .cp-call-halo,
  .cp-btn-outline { display: none !important; }

  .has-motion .cp-foil {
    background-position: 0 0 !important;
    transition: none !important;
  }
  .has-motion .section-head.reveal,
  .has-motion .uae.reveal,
  .has-motion .universe-card.reveal,
  .has-motion .step.reveal,
  .has-motion .discretion-item.reveal {
    clip-path: none !important;
    transform: none !important;
  }
  .has-motion .gold-field svg,
  .has-motion .monogram-lg,
  .has-motion .uae .uae-pattern,
  .has-motion .uae-visual svg {
    transform: none !important;
  }
  body.has-motion.cp-cursor-on { cursor: auto; }
}

@media (max-width: 640px) {
  .cp-cursor-dot, .cp-cursor-ring { display: none; }
}