/*
 * Studio YOOtheme Toolkit — Animation Library v2.0
 * Nouvelles animations : fade-up-big, reveal-up, reveal-down,
 *   mask-left, mask-right, rotate-in, flip-x, flip-y, zoom-out,
 *   slide-up-fade, skew-in-left, skew-in-right + stagger configurable.
 * Compatible avec les animations Phase 1 (pas de suppression).
 */

/* ─── Variables globales ──────────────────────────────────────────────────── */
.sytk-animate,
.sytk-studio-heading {
  --sytk-duration:    700ms;
  --sytk-delay:       0ms;
  --sytk-ease:        cubic-bezier(.22, .61, .36, 1);
  --sytk-ease-back:   cubic-bezier(.34, 1.56, .64, 1);  /* rebond léger */
  --sytk-ease-expo:   cubic-bezier(.16, 1, .3, 1);      /* expo out */
}

/* ─── display inline-block requis pour mask/reveal ───────────────────────── */
.sytk-studio-heading,
.sytk-text-inner,
.sytk-reveal-left,
.sytk-reveal-right,
.sytk-reveal-up,
.sytk-reveal-down,
.sytk-mask-up,
.sytk-mask-left,
.sytk-mask-right {
  display: inline-block;
}

/* ─── Alignements ─────────────────────────────────────────────────────────── */
.sytk-align-left   { text-align: left; }
.sytk-align-center { text-align: center; margin-left: auto; margin-right: auto; }
.sytk-align-right  { text-align: right;  margin-left: auto; }

/* ─── Base animate ────────────────────────────────────────────────────────── */
.sytk-animate {
  opacity: 0;
  transition:
    transform  var(--sytk-duration) var(--sytk-ease),
    opacity    var(--sytk-duration) var(--sytk-ease),
    filter     var(--sytk-duration) var(--sytk-ease);
  transition-delay: var(--sytk-delay);
}

.sytk-animate.sytk-in,
.sytk-animate[data-sytk-trigger="load"] {
  opacity:   1;
  transform: none;
  filter:    none;
}

/* ─────────────────────────────────────────────────────────────────────────── */
/*  PHASE 1 — animations existantes (inchangées)                              */
/* ─────────────────────────────────────────────────────────────────────────── */
.sytk-fade-up    { transform: translateY(28px); }
.sytk-fade-down  { transform: translateY(-28px); }
.sytk-fade-left  { transform: translateX(28px); }
.sytk-fade-right { transform: translateX(-28px); }
.sytk-zoom-in-soft { transform: scale(.94); }
.sytk-scale-in     { transform: scale(.88); }
.sytk-blur-in      { transform: translateY(16px); filter: blur(10px); }

/* ─────────────────────────────────────────────────────────────────────────── */
/*  PHASE 2 — nouvelles animations simples (opacity + transform)              */
/* ─────────────────────────────────────────────────────────────────────────── */

/* fade-up-big : déplacement plus prononcé (60px) */
.sytk-fade-up-big { transform: translateY(60px); }

/* zoom-out : part de légèrement trop grand */
.sytk-zoom-out { transform: scale(1.12); }

/* slide-up-fade : combo translate + scale subtil */
.sytk-slide-up-fade { transform: translateY(40px) scale(.97); }

/* rotate-in : rotation légère depuis le bas gauche */
.sytk-rotate-in {
  transform: rotate(-4deg) translateY(24px);
  transform-origin: left bottom;
}
.sytk-rotate-in.sytk-in,
.sytk-rotate-in[data-sytk-trigger="load"] {
  transform: rotate(0deg) translateY(0);
}

/* flip-x : retournement horizontal (perspective nécessaire sur le parent) */
.sytk-flip-x {
  transform: perspective(600px) rotateX(60deg);
  transform-origin: top center;
  backface-visibility: hidden;
}
.sytk-flip-x.sytk-in,
.sytk-flip-x[data-sytk-trigger="load"] {
  transform: perspective(600px) rotateX(0deg);
}

/* flip-y : retournement vertical */
.sytk-flip-y {
  transform: perspective(600px) rotateY(60deg);
  transform-origin: center center;
  backface-visibility: hidden;
}
.sytk-flip-y.sytk-in,
.sytk-flip-y[data-sytk-trigger="load"] {
  transform: perspective(600px) rotateY(0deg);
}

/* skew-in-left : arrive avec un skew depuis la gauche */
.sytk-skew-in-left {
  transform: translateX(-40px) skewX(8deg);
}
.sytk-skew-in-left.sytk-in,
.sytk-skew-in-left[data-sytk-trigger="load"] {
  transform: translateX(0) skewX(0deg);
}

/* skew-in-right : arrive avec un skew depuis la droite */
.sytk-skew-in-right {
  transform: translateX(40px) skewX(-8deg);
}
.sytk-skew-in-right.sytk-in,
.sytk-skew-in-right[data-sytk-trigger="load"] {
  transform: translateX(0) skewX(0deg);
}

/* ─────────────────────────────────────────────────────────────────────────── */
/*  PHASE 2 — reveal/mask avec .sytk-text-inner (overflow: hidden requis)     */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Conteneur commun : masque visible, pas d'opacity sur le parent */
.sytk-reveal-left,
.sytk-reveal-right,
.sytk-reveal-up,
.sytk-reveal-down,
.sytk-mask-up,
.sytk-mask-left,
.sytk-mask-right {
  overflow: hidden;
  opacity:  1;         /* le parent est toujours visible */
}

/* Enfant commun */
.sytk-reveal-left   > .sytk-text-inner,
.sytk-reveal-right  > .sytk-text-inner,
.sytk-reveal-up     > .sytk-text-inner,
.sytk-reveal-down   > .sytk-text-inner,
.sytk-mask-up       > .sytk-text-inner,
.sytk-mask-left     > .sytk-text-inner,
.sytk-mask-right    > .sytk-text-inner {
  display:    inline-block;
  opacity:    0;
  transition:
    transform calc(var(--sytk-duration) * .95) var(--sytk-ease),
    opacity   calc(var(--sytk-duration) * .80) var(--sytk-ease);
  transition-delay: var(--sytk-delay);
  will-change: transform, opacity;
}

/* États de départ */
.sytk-reveal-left  > .sytk-text-inner { transform: translateX(-1.15em); }
.sytk-reveal-right > .sytk-text-inner { transform: translateX(1.15em);  }
.sytk-reveal-up    > .sytk-text-inner { transform: translateY(-110%);   }
.sytk-reveal-down  > .sytk-text-inner { transform: translateY(110%);    }
.sytk-mask-up      > .sytk-text-inner { transform: translateY(110%);    }
.sytk-mask-left    > .sytk-text-inner { transform: translateX(-110%);   }
.sytk-mask-right   > .sytk-text-inner { transform: translateX(110%);    }

/* États finaux — sytk-in */
.sytk-reveal-left.sytk-in   > .sytk-text-inner,
.sytk-reveal-right.sytk-in  > .sytk-text-inner,
.sytk-reveal-up.sytk-in     > .sytk-text-inner,
.sytk-reveal-down.sytk-in   > .sytk-text-inner,
.sytk-mask-up.sytk-in       > .sytk-text-inner,
.sytk-mask-left.sytk-in     > .sytk-text-inner,
.sytk-mask-right.sytk-in    > .sytk-text-inner { transform: none; opacity: 1; }

/* États finaux — trigger load */
.sytk-reveal-left[data-sytk-trigger="load"]   > .sytk-text-inner,
.sytk-reveal-right[data-sytk-trigger="load"]  > .sytk-text-inner,
.sytk-reveal-up[data-sytk-trigger="load"]     > .sytk-text-inner,
.sytk-reveal-down[data-sytk-trigger="load"]   > .sytk-text-inner,
.sytk-mask-up[data-sytk-trigger="load"]       > .sytk-text-inner,
.sytk-mask-left[data-sytk-trigger="load"]     > .sytk-text-inner,
.sytk-mask-right[data-sytk-trigger="load"]    > .sytk-text-inner { transform: none; opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────────── */
/*  HOVER effects (Phase 1 conservés + nouveaux)                              */
/* ─────────────────────────────────────────────────────────────────────────── */
.sytk-hover-lift,
.sytk-hover-zoom,
.sytk-hover-overlay,
.sytk-hover-glow,
.sytk-hover-skew,
.sytk-hover-rotate {
  transition:
    transform    260ms var(--sytk-ease),
    box-shadow   260ms var(--sytk-ease),
    filter       260ms var(--sytk-ease);
}

.sytk-hover-lift:hover    { transform: translateY(-4px); }
.sytk-hover-zoom:hover    { transform: scale(1.02); }
.sytk-hover-glow:hover    { filter: brightness(1.03); box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.sytk-hover-skew:hover    { transform: skewX(-3deg) translateX(2px); }
.sytk-hover-rotate:hover  { transform: rotate(2deg) scale(1.01); }

.sytk-hover-overlay { position: relative; }
.sytk-hover-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.16), rgba(0,0,0,0));
  opacity: 0;
  transition: opacity 260ms var(--sytk-ease);
  pointer-events: none;
}
.sytk-hover-overlay:hover::after { opacity: 1; }

/* ─────────────────────────────────────────────────────────────────────────── */
/*  STAGGER configurable                                                       */
/*  Usage HTML : <div class="sytk-stagger"                                    */
/*                    data-sytk-stagger-delay="100"                           */
/*                    data-sytk-stagger-base="0">                             */
/*  Le JS calcule les transition-delay au runtime.                            */
/*  Ce CSS gère uniquement les états visuels.                                 */
/* ─────────────────────────────────────────────────────────────────────────── */
.sytk-stagger > * {
  opacity:    0;
  transform:  translateY(18px);
  transition:
    transform var(--sytk-stagger-duration, 600ms) var(--sytk-ease),
    opacity   var(--sytk-stagger-duration, 600ms) var(--sytk-ease);
  transition-delay: var(--sytk-stagger-item-delay, 0ms);
}

.sytk-stagger.sytk-in > * {
  opacity:   1;
  transform: none;
}

/*
 * Fallback CSS statique pour 8 enfants (si le JS n'est pas chargé).
 * Le JS écrase ces valeurs dès qu'il s'initialise.
 */
.sytk-stagger.sytk-in > *:nth-child(1) { transition-delay:   0ms; }
.sytk-stagger.sytk-in > *:nth-child(2) { transition-delay:  80ms; }
.sytk-stagger.sytk-in > *:nth-child(3) { transition-delay: 160ms; }
.sytk-stagger.sytk-in > *:nth-child(4) { transition-delay: 240ms; }
.sytk-stagger.sytk-in > *:nth-child(5) { transition-delay: 320ms; }
.sytk-stagger.sytk-in > *:nth-child(6) { transition-delay: 400ms; }
.sytk-stagger.sytk-in > *:nth-child(7) { transition-delay: 480ms; }
.sytk-stagger.sytk-in > *:nth-child(8) { transition-delay: 560ms; }

/* ─────────────────────────────────────────────────────────────────────────── */
/*  ACCESSIBILITÉ — prefers-reduced-motion                                    */
/*  Désactive toutes les transitions et animations.                           */
/*  Les éléments restent visibles (opacity:1, transform:none).                */
/* ─────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sytk-animate,
  .sytk-reveal-left   > .sytk-text-inner,
  .sytk-reveal-right  > .sytk-text-inner,
  .sytk-reveal-up     > .sytk-text-inner,
  .sytk-reveal-down   > .sytk-text-inner,
  .sytk-mask-up       > .sytk-text-inner,
  .sytk-mask-left     > .sytk-text-inner,
  .sytk-mask-right    > .sytk-text-inner,
  .sytk-stagger > * {
    transition: none !important;
    animation:  none !important;
    opacity:    1 !important;
    transform:  none !important;
    filter:     none !important;
  }

  .sytk-hover-lift,
  .sytk-hover-zoom,
  .sytk-hover-overlay,
  .sytk-hover-glow,
  .sytk-hover-skew,
  .sytk-hover-rotate {
    transition: none !important;
  }
}