/* ═══════════════════════════════════════════════════════════════════ */
/* ANIMATIONS — Prison Dorée × Sophie Lalanne                          */
/* Dark Luxe Theme avec Or/Doré — Micro-interactions fluides           */
/* ═══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────── */
/* 1. BUTTON ANIMATIONS — Hover & Press Effects                        */
/* ─────────────────────────────────────────────────────────────────── */

/* Base button transitions fluides */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Primary button — Glow & Scale effect */
.btn-primary {
  background: linear-gradient(135deg, #e08a2c 0%, #d67819 100%);
  box-shadow: 0 8px 24px rgba(224, 138, 44, 0.15);
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 32px rgba(224, 138, 44, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, #f0a043 0%, #e08a2c 100%);
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 4px 12px rgba(224, 138, 44, 0.2);
}

/* Outline button — Border glow effect */
.btn-outline {
  border: 2px solid rgba(224, 138, 44, 0.5);
  color: var(--cream);
  background: transparent;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.btn-outline::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(45deg, var(--gold), transparent, var(--gold));
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s;
}

.btn-outline:hover {
  border-color: var(--gold);
  color: #000;
  background: var(--gold);
  box-shadow: 0 8px 24px rgba(224, 138, 44, 0.3);
  transform: translateY(-2px);
}

.btn-outline:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(224, 138, 44, 0.2);
}

/* ─────────────────────────────────────────────────────────────────── */
/* 2. LINK & TEXT ANIMATIONS                                           */
/* ─────────────────────────────────────────────────────────────────── */

a {
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* Underline animation on hover */
a:not(.btn):not(.logo):not(.nav a)::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

a:not(.btn):not(.logo):not(.nav a):hover::after {
  width: 100%;
}

/* Navigation links — Smooth color transition */
.nav a {
  position: relative;
  color: var(--cream);
  transition: color 0.3s ease;
}

.nav a::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* ─────────────────────────────────────────────────────────────────── */
/* 3. CARD & CONTAINER ANIMATIONS                                      */
/* ─────────────────────────────────────────────────────────────────── */

/* Pain cards — Lift & glow on hover */
.pain-card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.pain-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(224, 138, 44, 0.2), transparent 80%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.pain-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(224, 138, 44, 0.15);
}

.pain-card:hover::before {
  opacity: 1;
}

/* Testimonial cards — Fade in with slight rotation */
.testi-card {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.testi-card:hover {
  transform: translateY(-6px) rotateX(2deg);
  box-shadow: 0 16px 32px rgba(224, 138, 44, 0.12);
}

/* Fondamentaux cards — Icon bounce */
.fond-card {
  transition: all 0.3s ease;
}

.fond-card .fond-icon {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fond-card:hover .fond-icon {
  transform: scale(1.15) translateY(-4px);
  animation: bounce 0.6s ease;
}

/* ─────────────────────────────────────────────────────────────────── */
/* 4. REVEAL & ENTRANCE ANIMATIONS (Scroll)                            */
/* ─────────────────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  animation: revealFade 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: opacity, transform;
}

.reveal-delay-1 { animation-delay: 0.15s; }
.reveal-delay-2 { animation-delay: 0.3s; }
.reveal-delay-3 { animation-delay: 0.45s; }

@keyframes revealFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Left reveal */
.reveal-left {
  opacity: 0;
  animation: revealLeft 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes revealLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Right reveal */
.reveal-right {
  opacity: 0;
  animation: revealRight 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes revealRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ─────────────────────────────────────────────────────────────────── */
/* 5. SPECIAL ANIMATIONS                                               */
/* ─────────────────────────────────────────────────────────────────── */

/* Bounce animation */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* Pulse for important elements */
@keyframes subtlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.pulse-subtle {
  animation: subtlePulse 2.5s ease-in-out infinite;
}

/* Shimmer effect for images */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer-loading {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Glow pulse for CTAs */
@keyframes glowPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(224, 138, 44, 0.3),
                inset 0 0 10px rgba(224, 138, 44, 0.1);
  }
  50% {
    box-shadow: 0 0 20px rgba(224, 138, 44, 0.5),
                inset 0 0 20px rgba(224, 138, 44, 0.2);
  }
}

.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────────────── */
/* 6. IMAGE ANIMATIONS                                                 */
/* ─────────────────────────────────────────────────────────────────── */

/* Image hover zoom smooth */
.prison-figure img {
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.4s ease;
}

.prison-figure:hover img {
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* Sophie image animations */
.hero-sophie-img {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.3s ease;
}

.hero-sophie-img:hover {
  transform: scale(1.02) rotateY(2deg);
  filter: drop-shadow(-20px 20px 50px rgba(224, 138, 44, 0.4));
}

.sophie-cta-img {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.3s ease;
}

.sophie-cta-img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 24px 60px rgba(224, 138, 44, 0.3));
}

/* ─────────────────────────────────────────────────────────────────── */
/* 7. SECTION BACKGROUND ANIMATIONS                                    */
/* ─────────────────────────────────────────────────────────────────── */

/* Subtle background gradient shift */
@keyframes gradientShift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.section {
  transition: background-color 0.4s ease;
}

/* Divider animation */
.divider {
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─────────────────────────────────────────────────────────────────── */
/* 8. CALENDLY BUTTON ANIMATIONS                                       */
/* ─────────────────────────────────────────────────────────────────── */

.calendly-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.calendly-cta::before {
  content: '📅';
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.calendly-cta:hover::before {
  animation: spin 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes spin {
  0% { transform: rotateY(0) scale(1); }
  50% { transform: rotateY(180deg) scale(1.1); }
  100% { transform: rotateY(360deg) scale(1); }
}

/* ─────────────────────────────────────────────────────────────────── */
/* 9. FORM & INPUT ANIMATIONS                                          */
/* ─────────────────────────────────────────────────────────────────── */

input, textarea, select {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(224, 138, 44, 0.15),
              inset 0 0 0 1px rgba(224, 138, 44, 0.4);
  transform: scale(1.01);
}

input::placeholder, textarea::placeholder {
  transition: color 0.3s ease;
  color: rgba(156, 163, 175, 0.6);
}

input:focus::placeholder, textarea:focus::placeholder {
  color: rgba(224, 138, 44, 0.6);
}

/* ─────────────────────────────────────────────────────────────────── */
/* 10. ACCESSIBILITY — Respect prefers-reduced-motion                  */
/* ─────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────────── */
/* 11. RESPONSIVE ANIMATIONS                                           */
/* ─────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .btn-primary, .btn-outline {
    transition: all 0.2s ease;
  }

  .pain-card:hover {
    transform: translateY(-4px);
  }

  .testi-card:hover {
    transform: translateY(-3px);
  }

  .reveal-left, .reveal-right {
    animation: revealFade 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
}