/* ============================================================
   ONEHSERVICE — EFFETS EXTRA · STYLES
   Reveal · Split text · Magnetic · 3D tilt · Cursor halo · etc.
   ============================================================ */

/* ============================================================
   1. REVEAL FADE-UP
   ============================================================ */
.ohs-reveal-init {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.ohs-reveal-init.ohs-reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   2. SPLIT TEXT — letter-by-letter mask
   ============================================================ */
[data-split] {
  display: inline-block;
}
.ohs-split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  line-height: inherit;
  padding: 0 .02em;
}
.ohs-split-char {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--i, 0) * .02s);
  will-change: transform;
}
[data-split].ohs-split-go .ohs-split-char {
  transform: translateY(0);
}

/* ============================================================
   3. MAGNETIC BUTTONS — base styles
   ============================================================ */
.btn,
[data-magnet],
.price__cta,
.wa,
.cta__btn {
  will-change: transform;
}

/* ============================================================
   4. 3D TILT — base styles
   ============================================================ */
.svc,
.price,
[data-tilt],
.gear__card {
  transform-style: preserve-3d;
}

/* ============================================================
   5. CURSOR HALO
   ============================================================ */
.ohs-cursor-halo {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 320px;
  pointer-events: none;
  z-index: 9998;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.16) 0%, rgba(250, 204, 21, 0.06) 35%, transparent 65%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity .35s cubic-bezier(.22,1,.36,1), width .4s cubic-bezier(.22,1,.36,1), height .4s cubic-bezier(.22,1,.36,1);
  will-change: transform, opacity;
  mix-blend-mode: multiply;
}
.ohs-cursor-halo.is-visible { opacity: 1; }
.ohs-cursor-halo.is-active {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(250, 204, 21, 0.24) 0%, rgba(250, 204, 21, 0.10) 40%, transparent 70%);
}
@media (hover: none), (pointer: coarse) {
  .ohs-cursor-halo { display: none; }
}

/* ============================================================
   6. IMAGE CLIP-PATH REVEAL
   ============================================================ */
.ohs-img-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(.22,1,.36,1);
  will-change: clip-path;
}
.ohs-img-reveal.ohs-img-reveal-in {
  clip-path: inset(0 0 0 0);
}

/* ============================================================
   7. NUMBER COUNT-UP base
   ============================================================ */
[data-count] {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ============================================================
   8. SCRAMBLE — pas de style spécial, juste du JS
   ============================================================ */

/* ============================================================
   9. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ohs-reveal-init { opacity: 1 !important; transform: none !important; }
  .ohs-split-char { transform: none !important; transition: none !important; }
  .ohs-img-reveal { clip-path: none !important; }
  .ohs-cursor-halo { display: none; }
}

/* ============================================================
   10. KEYBOARD FOCUS — ne casse pas la magnetique au focus clavier
   ============================================================ */
.btn:focus-visible,
.price__cta:focus-visible,
.wa:focus-visible,
.cta__btn:focus-visible {
  outline: 2px solid var(--yellow, #FACC15);
  outline-offset: 4px;
  border-radius: 4px;
}