/* ==========================================================================
   Cuisly motion kit — primitives partagées par toutes les pages.
   Pilotées par motion.js : révélations, texte mot à mot, défilement lié,
   marquee, inclinaison, lueur du curseur. Tout s’arrête avec
   prefers-reduced-motion.
   ========================================================================== */
:root{
  --m-ease:cubic-bezier(.22,1,.36,1);
  --m-dur:900ms;
  --m-dist:28px;
  --m-word:34ms;
  --m-blur:8px;
}

/* Reveal variants: data-reveal="up|fade|scale|left|right|blur|clip" */
.js [data-reveal]{opacity:0;transition:opacity var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease),filter var(--m-dur) var(--m-ease),clip-path var(--m-dur) var(--m-ease);transition-delay:var(--d,0ms);will-change:transform,opacity}
.js [data-reveal="up"],.js [data-reveal=""]{transform:translateY(var(--m-dist))}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="scale"]{transform:scale(.92)}
.js [data-reveal="left"]{transform:translateX(-40px)}
.js [data-reveal="right"]{transform:translateX(40px)}
.js [data-reveal="blur"]{transform:translateY(16px);filter:blur(var(--m-blur))}
.js [data-reveal="clip"]{opacity:1;clip-path:inset(0 0 100% 0 round 24px);transform:translateY(12px)}
.js [data-reveal].in{opacity:1;transform:none;filter:blur(0);clip-path:inset(0 0 0 0 round 24px)}
.js [data-reveal].in{will-change:auto}

/* Staggered children: data-stagger (optionally data-stagger="60") */
.js [data-stagger]>*{opacity:0;transform:translateY(22px);transition:opacity 700ms var(--m-ease),transform 700ms var(--m-ease);transition-delay:calc(var(--d,0ms) + var(--i,0)*var(--stagger,70ms))}
.js [data-stagger].in>*{opacity:1;transform:none}

/* Word-by-word text: data-split (motion.js wraps each word in .w) */
.js .split .w{display:inline-block;white-space:pre-wrap;opacity:0;transform:translateY(.45em) rotate(.6deg);filter:blur(var(--m-blur));transition:opacity 800ms var(--m-ease),transform 800ms var(--m-ease),filter 800ms var(--m-ease);transition-delay:calc(var(--d,0ms) + var(--i,0)*var(--m-word));transform-origin:0 100%;will-change:transform,opacity,filter}
.js .split.in .w{opacity:1;transform:none;filter:blur(0)}
.js .split.settled .w{will-change:auto;filter:none}

/* Scroll-linked values written by motion.js: --p (0→1) and --py (px) */
[data-parallax]{transform:translate3d(0,var(--py,0px),0);will-change:transform}

/* Infinite marquee */
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;align-items:center;gap:var(--gap,18px);width:max-content;padding-inline:calc(var(--gap,18px)/2);animation:cuisly-marquee var(--speed,40s) linear infinite}
.marquee[data-direction="reverse"] .marquee-track{animation-direction:reverse}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes cuisly-marquee{to{transform:translate3d(-50%,0,0)}}

/* 3D tilt + spotlight (pointer:fine only, set by motion.js) */
.tilt{transform:perspective(1200px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform 700ms var(--m-ease);transform-style:preserve-3d}
.tilt.is-tilting{transition:transform 120ms linear}

/* Gentle floating for mascots and floating cards */
.float{animation:cuisly-float var(--float-dur,7s) ease-in-out var(--float-d,0s) infinite}
@keyframes cuisly-float{0%,100%{translate:0 0;rotate:var(--float-r,0deg)}50%{translate:0 -14px;rotate:calc(var(--float-r,0deg) + 1deg)}}

/* Rotating gradient border (featured cards) */
@property --beam{syntax:"<angle>";inherits:false;initial-value:0deg}
.beam{position:relative}
.beam::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--beam),transparent 0 60%,rgba(56,200,234,.9) 72%,rgba(246,182,58,.9) 82%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:cuisly-beam 6s linear infinite;z-index:3}
@keyframes cuisly-beam{to{--beam:360deg}}

/* Typewriter target */
.typing{white-space:pre-wrap}
.typing.is-typing::after{content:"";display:inline-block;width:.55em;height:1em;margin-left:2px;vertical-align:-.15em;background:currentColor;border-radius:2px;animation:cuisly-caret .9s steps(2,start) infinite}
@keyframes cuisly-caret{to{opacity:0}}

/* Cursor glow (desktop only, created by motion.js) */
.cursor-glow{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(56,200,234,.14),rgba(56,200,234,.05) 35%,transparent 65%);mix-blend-mode:screen;opacity:0;transition:opacity 600ms var(--m-ease);will-change:transform}
body.glow-on .cursor-glow{opacity:1}

/* Counter */
[data-count]{font-variant-numeric:tabular-nums}

/* Smooth accordion body (height animated by motion.js) */
details.animating{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .js [data-reveal],.js [data-stagger]>*,.js .split .w{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  .marquee-track{animation:none}
  .float,.beam::after{animation:none}
  .tilt{transform:none!important}
  .cursor-glow{display:none}
  [data-parallax]{transform:none!important}
}