/* Premium Animations — Atelier Web
 * Animations pures CSS à inclure via <link rel="stylesheet" href="premium-animations.css">
 * Complémentaire à premium-animations.js
 */

/* ---------- 1. Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--color-primary, #111);
  z-index: 9999;
  pointer-events: none;
  transition: width 0.05s linear;
}

/* ---------- 2. Navbar shrink ---------- */
.navbar,
nav.site-nav,
header.site-header {
  transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.navbar.is-scrolled,
nav.site-nav.is-scrolled,
header.site-header.is-scrolled {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* ---------- 3. Focus-on-hover group (source: Uiverse kamehame-ha) ---------- */
.focus-group > * {
  transition: transform 0.4s ease, filter 0.4s ease;
}
.focus-group:hover > *:not(:hover) {
  filter: blur(6px);
  transform: scale(0.95);
}
.focus-group > *:hover {
  transform: scale(1.04);
}

/* ---------- 4. Hover transforms sur cartes ---------- */
[data-hover="card-lift"] {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
  will-change: transform;
}
[data-hover="card-lift"]:hover {
  transform: translateY(-8px) rotate(-0.5deg);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
}

/* ---------- 5. Product background slide (hover reveal par le bas) ---------- */
[data-hover="bg-slide"] {
  position: relative;
  overflow: hidden;
}
[data-hover="bg-slide"] .hover-bg {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}
[data-hover="bg-slide"]:hover .hover-bg {
  transform: translateY(0);
}
[data-hover="bg-slide"] > *:not(.hover-bg) {
  position: relative;
  z-index: 1;
}

/* ---------- 6. FAQ accordion open state ---------- */
[data-accordion] {
  transition: background 0.3s ease, color 0.3s ease;
}
[data-accordion][data-accordion-q],
[data-accordion] [data-accordion-q] {
  cursor: pointer;
}
[data-accordion] [data-accordion-a] {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding 0.5s ease;
}
[data-accordion].open [data-accordion-a] {
  max-height: 500px;
}
[data-accordion].open {
  background: var(--color-primary, #111);
  color: var(--color-bg, #fff);
}
[data-accordion].open [data-accordion-q] {
  color: var(--color-bg, #fff);
}

/* ---------- 7. Slider depth (slides inactives en retrait) ---------- */
[data-slider] .slide {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s ease;
  transform: scale(0.9) rotate(-4deg);
  opacity: 0.6;
}
[data-slider] .slide.is-active {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

/* ---------- 8. État initial anti-FOUC pour animations JS ---------- */
[data-anim="fade-up"],
[data-anim="stagger"] > * {
  opacity: 0;
}
[data-anim="card-slide"],
[data-anim="card-scrub"] {
  will-change: transform, filter;
}