/* ============================================================
   KGN Services : couche d'animations (chargée après style.css)
   - Tout état « caché au départ » est scopé sous .js (ajouté par un
     petit script dans <head>) et sous prefers-reduced-motion: no-preference.
     Sans JavaScript, ou avec « réduire les animations », le site reste
     entièrement lisible et statique.
   ============================================================ */

/* ---------- Barre de progression de lecture ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-300), var(--green-400));
  transform-origin: 0 50%; transform: scaleX(0);
  pointer-events: none;
}

/* ---------- Rideau de transition entre pages ---------- */
.page-curtain {
  position: fixed; inset: 0; z-index: 999998; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, var(--green-800), var(--green-950));
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s;
}
body.is-leaving .page-curtain { opacity: 1; visibility: visible; pointer-events: all; }

/* ---------- Hero : halo qui suit le curseur + canvas de particules ---------- */
.hero-spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(520px circle at var(--sx, 72%) var(--sy, 30%), rgba(242,208,107,.16), transparent 62%);
  transition: opacity .4s ease;
}
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
}
.hero { --mx: 0; --my: 0; --sp: 0; }
.hero::before { translate: calc(var(--mx) * -34px) calc(var(--my) * -26px - var(--sp) * 50px); }
.hero::after  { translate: calc(var(--mx) * 28px)  calc(var(--my) * 22px + var(--sp) * 36px); }
.stat-panel { transition: translate .25s ease-out; }
.hero .stat-panel { translate: calc(var(--mx) * -10px) calc(var(--my) * -8px); }

/* ---------- Boutons : reflet, halo, ripple, aimant ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn-gold::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
}
.btn-gold:hover::after { animation: btn-shine .75s ease; }
@keyframes btn-shine { to { left: 130%; } }

.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(135deg, var(--gold-500), var(--gold-400));
  opacity: 0; transition: opacity .25s ease;
}
.btn-primary:hover::after { opacity: 1; }
.btn-primary:hover { color: var(--green-950); }

.btn svg { transition: transform .25s ease; }
.btn:hover svg { transform: translateX(3px) scale(1.08); }

.btn-ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  background: rgba(255,255,255,.55);
  animation: btn-ripple .6s ease-out forwards;
}
@keyframes btn-ripple { to { transform: scale(26); opacity: 0; } }

/* Les deux boutons du hero pulsent exactement de la même façon */
.hero .btn-row-equal .btn-gold { animation: btn-halo 2.8s ease-in-out 2.4s infinite; }
@keyframes btn-halo {
  0%, 100% { box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 0 0 0 rgba(232,186,59,.0); }
  50%      { box-shadow: 0 10px 24px rgba(0,0,0,.18), 0 0 0 9px rgba(232,186,59,.16); }
}

/* ---------- Bandeau défilant (mots-clés) ---------- */
.marquee {
  position: relative; overflow: hidden; margin-top: 56px;
  background: var(--green-950); color: #fff;
  border-top: 3px solid var(--gold-500); border-bottom: 3px solid var(--gold-500);
  padding: 15px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex-shrink: 0; }
.marquee-group span {
  display: inline-flex; align-items: center; gap: 28px; padding-left: 28px;
  font-family: var(--serif); font-weight: 600; font-size: 1.02rem; letter-spacing: .02em; white-space: nowrap;
}
.marquee-group span::after { content: "✦"; color: var(--gold-400); font-size: .8rem; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Cartes : relief 3D + reflet ---------- */
.tilt { position: relative; }
.tilt-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(380px circle at var(--gx, 50%) var(--gy, 0%), rgba(232,186,59,.17), transparent 55%);
  opacity: 0; transition: opacity .3s ease;
}
.tilt:hover .tilt-glare { opacity: 1; }
.card:hover .card-icon, .activity-card:hover .card-icon, .service-card:hover .card-icon {
  animation: icon-wiggle .7s ease;
}
@keyframes icon-wiggle {
  0% { transform: rotate(0) scale(1); } 30% { transform: rotate(-9deg) scale(1.14); }
  60% { transform: rotate(6deg) scale(1.1); } 100% { transform: rotate(0) scale(1); }
}

/* ---------- Images : léger zoom au survol ---------- */
.illus-frame img { transition: transform .9s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.illus-frame:hover img { transform: scale(1.05); }

/* ---------- Méthode en 4 étapes ---------- */
.step-num { transition: transform .3s ease, box-shadow .3s ease, background-color .3s ease; }
.process-step:hover .step-num { transform: scale(1.12); background: var(--gold-500); color: var(--green-950); box-shadow: 0 0 0 8px rgba(232,186,59,.2); }

/* ---------- Pastille eyebrow : point qui respire ---------- */
.eyebrow::before { animation: dot-breathe 2.4s ease-in-out infinite; }
@keyframes dot-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212,160,23,.55); }
  50%      { box-shadow: 0 0 0 6px rgba(212,160,23,0); }
}

/* ---------- Bouton « retour en haut » : rebond d'apparition ---------- */
.back-to-top.visible { animation: pop-in .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop-in { from { transform: scale(.4); } to { transform: scale(1); } }

/* ============================================================
   États initiaux + entrées (uniquement si JS actif ET animations OK)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* --- Entrée du hero, déclenchée après l'écran d'intro (.hero-go sur <html>) --- */
  .js .hero .eyebrow, .js .hero .lede, .js .hero .btn-row, .js .hero .stat-panel,
  .js .page-hero .eyebrow, .js .page-hero .lede,
  .js .hero h1, .js .page-hero h1 { opacity: 0; }

  .js.hero-go .hero .eyebrow, .js.hero-go .hero .lede, .js.hero-go .hero .btn-row,
  .js.hero-go .page-hero .eyebrow, .js.hero-go .page-hero .lede {
    opacity: 1;
    animation: hero-rise .9s cubic-bezier(.2,.8,.2,1) backwards;
    animation-delay: calc(var(--hd, 0) * 1ms);
  }
  .js.hero-go .hero .stat-panel {
    opacity: 1;
    animation: hero-slide .95s cubic-bezier(.2,.8,.2,1) backwards;
    animation-delay: calc(var(--hd, 0) * 1ms);
  }
  .js.hero-go .hero h1, .js.hero-go .page-hero h1 { opacity: 1; }
  @keyframes hero-rise  { from { opacity: 0; translate: 0 28px; filter: blur(6px); } }
  @keyframes hero-slide { from { opacity: 0; translate: 60px 0; filter: blur(6px); } }

  /* Titres découpés mot par mot */
  .split-word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .14em 0; margin: 0 -.08em -.14em 0; }
  .split-word > span { display: inline-block; transform: translateY(115%) rotate(4deg); transform-origin: 0 100%; }
  .js.hero-go .split-word > span {
    transform: none;
    animation: word-up .95s cubic-bezier(.2,.85,.2,1) backwards;
    animation-delay: calc(var(--wi, 0) * 75ms + 120ms);
  }
  @keyframes word-up { from { transform: translateY(115%) rotate(4deg); } }

  /* --- Révélations au scroll : variantes de direction --- */
  .js .reveal[data-dir="left"]  { transform: translateX(-46px); }
  .js .reveal[data-dir="right"] { transform: translateX(46px); }
  .js .reveal[data-dir="zoom"]  { transform: scale(.92); }
  .js .reveal.in-view[data-dir] { transform: none; }
  .js .reveal { transition-duration: .85s; transition-timing-function: cubic-bezier(.2,.7,.2,1); }

  /* Images : « rideau » qui s'ouvre */
  .js .illus-frame.reveal { clip-path: inset(0 0 94% 0 round var(--radius-lg)); transition: clip-path 1.1s cubic-bezier(.7,0,.2,1), opacity .6s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
  .js .illus-frame.reveal.in-view { clip-path: inset(0 0 0 0 round var(--radius-lg)); }

  /* --- Cascade des enfants d'une grille --- */
  .js .reveal.stagger { opacity: 1; transform: none; }
  .js .stagger > * {
    opacity: 0; translate: 0 34px;
    transition: opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 120ms),
                translate .8s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 120ms),
                transform .18s ease-out, box-shadow .22s ease, border-color .22s ease, background-color .3s ease, color .3s ease;
  }
  .js .stagger.in-view > * { opacity: 1; translate: 0 0; }

  /* Ligne pointillée de la méthode qui se dessine */
  .js .process-row.stagger::before { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.3s cubic-bezier(.6,0,.2,1) .2s; }
  .js .process-row.stagger.in-view::before { transform: scaleX(1); }
  .js .process-row.stagger.in-view .step-num { animation: step-pop .7s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay: calc(var(--i, 0) * 180ms + 250ms); }
  @keyframes step-pop { from { transform: scale(0) rotate(-120deg); } }

  /* Filet or sous les titres de section : se déploie */
  .js .section-heading.reveal h2::after { width: 0; transition: width .8s cubic-bezier(.2,.7,.2,1) .35s; }
  .js .section-heading.reveal.in-view h2::after { width: 52px; }

  /* Tilt 3D (souris uniquement) */
  .js .tilt, .js .tilt:hover {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  }
  .tilt:hover { --ty: -6px; }
  .tilt.is-resetting { transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease, border-color .22s ease !important; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track, .hero .btn-row-equal .btn-gold, .eyebrow::before { animation: none; }
  .hero-canvas, .hero-spot, .scroll-progress { display: none; }
  .page-curtain { display: none; }
}

@media (max-width: 900px) {
  .marquee { margin-top: 40px; }
  .hero .stat-panel { translate: none; }
}