/* Tattoo Village V2.4 — Banque d'effets paramétrables
   Ces effets s'ajoutent aux hover/animations déjà présents dans le thème. */
:root {
  --tvfx-delay: 0ms;
  --tvfx-duration: 760ms;
  --tvfx-ease: cubic-bezier(.16, 1, .3, 1);
}

.tv-delay-0 { --tvfx-delay: 0ms; }
.tv-delay-1 { --tvfx-delay: 120ms; }
.tv-delay-2 { --tvfx-delay: 240ms; }
.tv-delay-3 { --tvfx-delay: 360ms; }
.tv-delay-4 { --tvfx-delay: 520ms; }
.tv-delay-5 { --tvfx-delay: 700ms; }
.tv-speed-fast { --tvfx-duration: 520ms; }
.tv-speed-normal { --tvfx-duration: 760ms; }
.tv-speed-slow { --tvfx-duration: 1100ms; }

/* États initiaux uniquement quand le JS ajoute .tv-animate.
   Sans JS, les blocs restent visibles. */
.tv-animate.tvfx-fade-up,
.tv-animate.is-style-tv-fade-up,
.tv-animate.tvfx-fade-down,
.tv-animate.is-style-tv-fade-down,
.tv-animate.tvfx-slide-left,
.tv-animate.is-style-tv-slide-left,
.tv-animate.tvfx-slide-right,
.tv-animate.is-style-tv-slide-right,
.tv-animate.tvfx-zoom-in,
.tv-animate.is-style-tv-zoom-in,
.tv-animate.tvfx-fade-in,
.tv-animate.is-style-tv-fade-in,
.tv-animate.tvfx-blur-reveal,
.tv-animate.is-style-tv-blur-reveal,
.tv-animate.tvfx-tattoo-reveal,
.tv-animate.is-style-tv-tattoo-reveal {
  opacity: 0;
  will-change: opacity, transform, filter, clip-path;
}

.tv-animate.tvfx-fade-up,
.tv-animate.is-style-tv-fade-up { transform: translate3d(0, 38px, 0); filter: blur(2px); }
.tv-animate.tvfx-fade-down,
.tv-animate.is-style-tv-fade-down { transform: translate3d(0, -38px, 0); filter: blur(2px); }
.tv-animate.tvfx-slide-left,
.tv-animate.is-style-tv-slide-left { transform: translate3d(-46px, 0, 0); filter: blur(2px); }
.tv-animate.tvfx-slide-right,
.tv-animate.is-style-tv-slide-right { transform: translate3d(46px, 0, 0); filter: blur(2px); }
.tv-animate.tvfx-zoom-in,
.tv-animate.is-style-tv-zoom-in { transform: scale(.92); filter: blur(1px); }
.tv-animate.tvfx-blur-reveal,
.tv-animate.is-style-tv-blur-reveal { transform: translate3d(0, 18px, 0); filter: blur(12px); }
.tv-animate.tvfx-tattoo-reveal,
.tv-animate.is-style-tv-tattoo-reveal { clip-path: inset(0 100% 0 0); filter: contrast(1.15); }

.tv-animate.tvfx-fade-up.tv-in-view,
.tv-animate.is-style-tv-fade-up.tv-in-view { animation: tvfxFadeUp var(--tvfx-duration) var(--tvfx-ease) both; animation-delay: var(--tvfx-delay); }
.tv-animate.tvfx-fade-down.tv-in-view,
.tv-animate.is-style-tv-fade-down.tv-in-view { animation: tvfxFadeDown var(--tvfx-duration) var(--tvfx-ease) both; animation-delay: var(--tvfx-delay); }
.tv-animate.tvfx-slide-left.tv-in-view,
.tv-animate.is-style-tv-slide-left.tv-in-view { animation: tvfxSlideLeft var(--tvfx-duration) var(--tvfx-ease) both; animation-delay: var(--tvfx-delay); }
.tv-animate.tvfx-slide-right.tv-in-view,
.tv-animate.is-style-tv-slide-right.tv-in-view { animation: tvfxSlideRight var(--tvfx-duration) var(--tvfx-ease) both; animation-delay: var(--tvfx-delay); }
.tv-animate.tvfx-zoom-in.tv-in-view,
.tv-animate.is-style-tv-zoom-in.tv-in-view { animation: tvfxZoomIn var(--tvfx-duration) var(--tvfx-ease) both; animation-delay: var(--tvfx-delay); }
.tv-animate.tvfx-fade-in.tv-in-view,
.tv-animate.is-style-tv-fade-in.tv-in-view { animation: tvfxFadeIn var(--tvfx-duration) var(--tvfx-ease) both; animation-delay: var(--tvfx-delay); }
.tv-animate.tvfx-blur-reveal.tv-in-view,
.tv-animate.is-style-tv-blur-reveal.tv-in-view { animation: tvfxBlurReveal var(--tvfx-duration) var(--tvfx-ease) both; animation-delay: var(--tvfx-delay); }
.tv-animate.tvfx-tattoo-reveal.tv-in-view,
.tv-animate.is-style-tv-tattoo-reveal.tv-in-view { animation: tvfxTattooReveal var(--tvfx-duration) var(--tvfx-ease) both; animation-delay: var(--tvfx-delay); }

@keyframes tvfxFadeUp { to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); } }
@keyframes tvfxFadeDown { to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); } }
@keyframes tvfxSlideLeft { to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); } }
@keyframes tvfxSlideRight { to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); } }
@keyframes tvfxZoomIn { to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes tvfxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tvfxBlurReveal { to { opacity: 1; transform: translate3d(0,0,0); filter: blur(0); } }
@keyframes tvfxTattooReveal { to { opacity: 1; clip-path: inset(0 0 0 0); filter: contrast(1); } }

/* Effets permanents, complémentaires aux effets de hover existants. */
.tvfx-red-glow,
.is-style-tv-red-glow {
  position: relative;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255,38,38,.22), 0 28px 90px rgba(212,20,20,.16) !important;
}
.tvfx-red-glow::after,
.is-style-tv-red-glow::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(255,38,38,.28), transparent 42%);
  opacity: .85;
}
.tvfx-soft-float,
.is-style-tv-soft-float {
  animation: tvfxSoftFloat 5.5s ease-in-out infinite;
}
.tvfx-parallax-light,
.is-style-tv-parallax-light {
  transform: translate3d(0, 0, 0);
  transition: transform 900ms var(--tvfx-ease);
}
.tvfx-parallax-light.tv-in-view,
.is-style-tv-parallax-light.tv-in-view {
  transform: translate3d(0, -10px, 0);
}
.tv-hover-lift,
.is-style-tv-hover-lift,
.tv-hover-scale,
.is-style-tv-hover-scale,
.tv-hover-border-red,
.is-style-tv-hover-border-red,
.tv-hover-image-zoom,
.is-style-tv-hover-image-zoom {
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.tv-hover-lift:hover,
.is-style-tv-hover-lift:hover {
  transform: translateY(-5px);
}
.tv-hover-scale:hover,
.is-style-tv-hover-scale:hover {
  transform: scale(1.025);
}
.tv-hover-border-red:hover,
.is-style-tv-hover-border-red:hover {
  border-color: rgba(255,38,38,.78) !important;
  box-shadow: 0 20px 60px rgba(212,20,20,.18);
}
.tv-hover-image-zoom img,
.is-style-tv-hover-image-zoom img {
  transition: transform 260ms ease, filter 260ms ease;
}
.tv-hover-image-zoom:hover img,
.is-style-tv-hover-image-zoom:hover img {
  transform: scale(1.055);
  filter: contrast(1.08);
}
@keyframes tvfxSoftFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

/* Stagger : anime les enfants d'une grille/section les uns après les autres. */
.tv-animate.tvfx-stagger > *,
.tv-animate.is-style-tv-stagger > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  filter: blur(2px);
}
.tv-animate.tvfx-stagger.tv-in-view > *,
.tv-animate.is-style-tv-stagger.tv-in-view > * {
  animation: tvfxFadeUp 720ms var(--tvfx-ease) both;
}
.tv-animate.tvfx-stagger.tv-in-view > *:nth-child(1),
.tv-animate.is-style-tv-stagger.tv-in-view > *:nth-child(1) { animation-delay: calc(var(--tvfx-delay) + 0ms); }
.tv-animate.tvfx-stagger.tv-in-view > *:nth-child(2),
.tv-animate.is-style-tv-stagger.tv-in-view > *:nth-child(2) { animation-delay: calc(var(--tvfx-delay) + 110ms); }
.tv-animate.tvfx-stagger.tv-in-view > *:nth-child(3),
.tv-animate.is-style-tv-stagger.tv-in-view > *:nth-child(3) { animation-delay: calc(var(--tvfx-delay) + 220ms); }
.tv-animate.tvfx-stagger.tv-in-view > *:nth-child(4),
.tv-animate.is-style-tv-stagger.tv-in-view > *:nth-child(4) { animation-delay: calc(var(--tvfx-delay) + 330ms); }
.tv-animate.tvfx-stagger.tv-in-view > *:nth-child(5),
.tv-animate.is-style-tv-stagger.tv-in-view > *:nth-child(5) { animation-delay: calc(var(--tvfx-delay) + 440ms); }
.tv-animate.tvfx-stagger.tv-in-view > *:nth-child(n+6),
.tv-animate.is-style-tv-stagger.tv-in-view > *:nth-child(n+6) { animation-delay: calc(var(--tvfx-delay) + 550ms); }

/* Dans l'éditeur, on garde tout visible pour ne pas gêner la mise en page. */
.editor-styles-wrapper .tvfx-fade-up,
.editor-styles-wrapper .is-style-tv-fade-up,
.editor-styles-wrapper .tvfx-fade-down,
.editor-styles-wrapper .is-style-tv-fade-down,
.editor-styles-wrapper .tvfx-slide-left,
.editor-styles-wrapper .is-style-tv-slide-left,
.editor-styles-wrapper .tvfx-slide-right,
.editor-styles-wrapper .is-style-tv-slide-right,
.editor-styles-wrapper .tvfx-zoom-in,
.editor-styles-wrapper .is-style-tv-zoom-in,
.editor-styles-wrapper .tvfx-fade-in,
.editor-styles-wrapper .is-style-tv-fade-in,
.editor-styles-wrapper .tvfx-blur-reveal,
.editor-styles-wrapper .is-style-tv-blur-reveal,
.editor-styles-wrapper .tvfx-tattoo-reveal,
.editor-styles-wrapper .is-style-tv-tattoo-reveal,
.editor-styles-wrapper .tvfx-stagger,
.editor-styles-wrapper .is-style-tv-stagger,
.editor-styles-wrapper .tvfx-parallax-light,
.editor-styles-wrapper .is-style-tv-parallax-light {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  clip-path: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .tv-animate,
  .tv-animate *,
  .tvfx-soft-float,
  .is-style-tv-soft-float,
  .tvfx-parallax-light,
  .is-style-tv-parallax-light {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}