/* ============================================================
   SELLAVI · ANIMATIONS PARTAGÉES POUR PAGES ANNEXES
   Variété d'effets : reveal stagger, parallax, glow, scroll-linked,
   tilt 3D, scrub progress, marquees, magnetic hover, etc.
   ============================================================ */

/* === RESET RESPECT prefers-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 1. REVEAL CLASSIQUE FADE-UP === */
.sr-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-fade-up.in {
  opacity: 1;
  transform: translateY(0);
}

/* === 2. SLIDE FROM LEFT === */
.sr-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-slide-left.in {
  opacity: 1;
  transform: translateX(0);
}

/* === 3. SLIDE FROM RIGHT === */
.sr-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-slide-right.in {
  opacity: 1;
  transform: translateX(0);
}

/* === 4. SCALE UP === */
.sr-scale-up {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-scale-up.in {
  opacity: 1;
  transform: scale(1);
}

/* === 5. ROTATE 3D ENTRY === */
.sr-rotate-3d {
  opacity: 0;
  transform: perspective(800px) rotateX(15deg) translateY(30px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-rotate-3d.in {
  opacity: 1;
  transform: perspective(800px) rotateX(0deg) translateY(0);
}

/* === 6. BLUR REVEAL === */
.sr-blur-in {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(15px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-blur-in.in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* === 7. STAGGER DELAYS (à appliquer en sus de l'effet) === */
.sr-d-0  { transition-delay: 0ms !important; }
.sr-d-1  { transition-delay: 80ms !important; }
.sr-d-2  { transition-delay: 160ms !important; }
.sr-d-3  { transition-delay: 240ms !important; }
.sr-d-4  { transition-delay: 320ms !important; }
.sr-d-5  { transition-delay: 400ms !important; }
.sr-d-6  { transition-delay: 480ms !important; }
.sr-d-7  { transition-delay: 560ms !important; }
.sr-d-8  { transition-delay: 640ms !important; }

/* === 8. GLOW HOVER (cards) === */
.sr-glow-hover {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.sr-glow-hover:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 50px -15px rgba(124, 58, 255, 0.30),
    0 0 0 1px rgba(162, 2, 199, 0.35) inset;
}

/* === 9. TILT 3D (cards à comportement bento) === */
.sr-tilt {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

/* === 10. TEXT SHIMMER (gradient animé sur titres) === */
.sr-text-shimmer {
  background: linear-gradient(
    90deg,
    #FFFFFF 0%,
    #C9B6FF 25%,
    #FF2DBE 50%,
    #C9B6FF 75%,
    #FFFFFF 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: srShimmer 8s linear infinite;
}
@keyframes srShimmer {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* === 11. PULSING DOT (eyebrow indicator) === */
.sr-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF2DBE;
  box-shadow: 0 0 10px #FF2DBE;
  animation: srPulse 2.4s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes srPulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 10px #FF2DBE; }
  50% { opacity: 0.5; transform: scale(0.85); box-shadow: 0 0 18px #FF2DBE; }
}

/* === 12. FLOAT (subtile lévitation) === */
.sr-float {
  animation: srFloat 6s ease-in-out infinite;
}
@keyframes srFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* === 13. CARDS GROUP : icon scale + halo at hover === */
.sr-card-icon-wrap {
  position: relative;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-card-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  background: radial-gradient(circle, rgba(255, 45, 190, 0.22) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}
.sr-glow-hover:hover .sr-card-icon-wrap {
  transform: scale(1.08) rotate(-3deg);
}
.sr-glow-hover:hover .sr-card-icon-wrap::before {
  opacity: 1;
}

/* === 14. TIMELINE DOT GROW (scroll-linked) === */
.sr-tl-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #07020F;
  border: 2px solid rgba(124, 58, 255, 0.40);
  box-shadow: 0 0 0 4px rgba(124, 58, 255, 0.08);
  transition: background 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}
.sr-tl-dot.is-active {
  background: var(--violet-brand, #7C3AFF);
  border-color: var(--violet-brand, #7C3AFF);
  box-shadow:
    0 0 0 4px rgba(124, 58, 255, 0.30),
    0 0 22px rgba(124, 58, 255, 0.7),
    0 0 36px rgba(255, 45, 190, 0.4);
}

/* === 15. SCROLLBAR THIN VIOLET === */
* { scrollbar-width: thin; scrollbar-color: rgba(162, 2, 199, 0.4) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 58, 255, 0.4) 0%, rgba(162, 2, 199, 0.4) 100%);
  border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(124, 58, 255, 0.7) 0%, rgba(162, 2, 199, 0.7) 100%);
}

/* === 16. READING PROGRESS BAR (articles blog) === */
.sr-reading-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--violet-brand, #7C3AFF) 0%, var(--magenta, #FF2DBE) 100%);
  z-index: 100;
  transition: width 50ms linear;
  box-shadow: 0 0 12px rgba(255, 45, 190, 0.5);
}

/* === 17. NUMBER COUNTER (compteur animé) === */
.sr-counter {
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', monospace;
}

/* === 18. CARDS GRID STAGGER PARENT (parent qui orchestre les enfants) === */
.sr-stagger-children > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-stagger-children.in > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 80ms; }
.sr-stagger-children.in > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 160ms; }
.sr-stagger-children.in > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 240ms; }
.sr-stagger-children.in > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 320ms; }
.sr-stagger-children.in > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 400ms; }
.sr-stagger-children.in > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 480ms; }
.sr-stagger-children.in > *:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: 560ms; }
.sr-stagger-children.in > *:nth-child(8) { opacity: 1; transform: translateY(0); transition-delay: 640ms; }

/* === 19. INK EFFECT (underline anim on links) === */
.sr-ink {
  position: relative;
  background-image: linear-gradient(90deg, currentColor, currentColor);
  background-position: 0 100%;
  background-size: 0 1px;
  background-repeat: no-repeat;
  transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-ink:hover {
  background-size: 100% 1px;
}

/* === 20. BUTTON RIPPLE-LIKE === */
.sr-btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: gap 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-btn-arrow:hover { gap: 14px; }
.sr-btn-arrow svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.sr-btn-arrow:hover svg { transform: translateX(2px); }

/* ============================================================
   21. PAGE TRANSITION — minimal, progress bar only
   Aucun effet sur le contenu de la page. Juste un fin trait top
   qui signale qu'une nav est en cours (style YouTube/GitHub).
   ============================================================ */
.sr-page-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  background: transparent;
}
.sr-page-progress::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(
    90deg,
    rgba(124, 58, 255, 0) 0%,
    #7C3AFF 20%,
    #A202C7 50%,
    #FF2DBE 80%,
    rgba(255, 45, 190, 0) 100%
  );
  box-shadow:
    0 0 6px rgba(124, 58, 255, 0.4),
    0 0 12px rgba(255, 45, 190, 0.25);
  transition: width 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.sr-page-progress.is-running {
  opacity: 1;
  transition: opacity 0.12s ease;
}
.sr-page-progress.is-running::before {
  width: 75%;
}
.sr-page-progress.is-finishing::before {
  width: 100%;
  transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}
.sr-page-progress.is-fading {
  opacity: 0;
  transition: opacity 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sr-page-progress {
    display: none !important;
  }
}