/* PRATINIUM — V25 Hero Animations
   Objectif : rendre le hero plus vivant, premium et intuitif sans casser le desktop/mobile validé.
*/

.pf-hero,
.pf-hero * {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.pf-hero {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  box-shadow: 0 22px 60px rgba(15, 23, 42, .10) !important;
}

.pf-hero__media {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  z-index: 0 !important;
}

.pf-hero__bg-img,
.pf-hero picture img,
.pf-hero__media img {
  transform-origin: center center !important;
  animation: pfHeroKenBurns 18s ease-in-out infinite alternate !important;
  will-change: transform, filter !important;
}

.pf-hero__overlay {
  position: relative !important;
  z-index: 1 !important;
}

.pf-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -35% -20% auto -20% !important;
  height: 65% !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background: radial-gradient(circle at 50% 10%, rgba(255,255,255,.45), rgba(255,255,255,0) 58%) !important;
  transform: translate3d(-10%, 0, 0) !important;
  animation: pfHeroLightSweep 7s ease-in-out infinite !important;
  mix-blend-mode: screen !important;
}

.pf-hero__copy,
.pf-hero__title,
.pf-hero__subtitle,
.pf-hero__tagline,
.pf-hero__badge,
.pf-hero-journey__title,
.pf-hero-journey .pf-tab,
.pf-hero-login-cta,
.pf-hero-journey .pf-step {
  animation-fill-mode: both !important;
  will-change: transform, opacity !important;
}

.pf-hero__copy { animation: pfFadeUp .75s cubic-bezier(.2,.8,.2,1) .05s both !important; }
.pf-hero__title { animation: pfFadeUp .75s cubic-bezier(.2,.8,.2,1) .12s both !important; }
.pf-hero__subtitle, .pf-hero__tagline { animation: pfFadeUp .75s cubic-bezier(.2,.8,.2,1) .20s both !important; }
.pf-hero__badge { animation: pfBadgeIn .7s cubic-bezier(.2,.8,.2,1) .28s both, pfBadgePulse 2.8s ease-in-out 1.3s infinite !important; }
.pf-hero-journey__title { animation: pfFadeRight .62s cubic-bezier(.2,.8,.2,1) .32s both !important; }
.pf-hero-journey .pf-tab:nth-child(1) { animation: pfFadeUp .55s cubic-bezier(.2,.8,.2,1) .40s both !important; }
.pf-hero-journey .pf-tab:nth-child(2) { animation: pfFadeUp .55s cubic-bezier(.2,.8,.2,1) .48s both !important; }
.pf-hero-journey .pf-tab:nth-child(3) { animation: pfFadeUp .55s cubic-bezier(.2,.8,.2,1) .56s both !important; }
.pf-hero-login-cta { animation: pfFadeLeft .62s cubic-bezier(.2,.8,.2,1) .60s both !important; }
.pf-hero-journey .pf-step:nth-child(1) { animation: pfStepIn .65s cubic-bezier(.2,.8,.2,1) .68s both !important; }
.pf-hero-journey .pf-step:nth-child(2) { animation: pfStepIn .65s cubic-bezier(.2,.8,.2,1) .82s both !important; }
.pf-hero-journey .pf-step:nth-child(3) { animation: pfStepIn .65s cubic-bezier(.2,.8,.2,1) .96s both !important; }

.pf-hero__badge,
.pf-hero-journey .pf-tab,
.pf-hero-login-cta,
.pf-hero-journey .pf-step__num {
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, opacity .22s ease !important;
}

.pf-hero__badge:hover,
.pf-hero-journey .pf-step:hover .pf-step__num {
  transform: translateY(-3px) scale(1.045) !important;
  box-shadow: 0 16px 36px rgba(31, 106, 178, .32) !important;
}

.pf-hero-journey .pf-tab:hover,
.pf-hero-login-cta:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .22) !important;
}

.pf-hero-journey .pf-tab--active,
.pf-hero-journey .pf-tab[aria-selected="true"] {
  box-shadow: 0 0 0 1px rgba(44,145,245,.55), 0 14px 34px rgba(31,106,178,.26) !important;
}

.pf-hero-journey .pf-steps.pf-steps--active {
  animation: pfPanelIn .36s ease both !important;
}

.pf-hero-journey .pf-step__arrow {
  animation: pfArrowDrift 1.8s ease-in-out infinite !important;
}

.pf-hero-journey .pf-step__num {
  box-shadow: 0 0 0 0 rgba(31,106,178,.35) !important;
  animation: pfStepPulse 2.6s ease-in-out infinite !important;
}

.pf-hero-journey .pf-step:nth-child(2) .pf-step__num { animation-delay: .25s !important; }
.pf-hero-journey .pf-step:nth-child(3) .pf-step__num { animation-delay: .50s !important; }

@keyframes pfHeroKenBurns {
  0% { transform: scale(1.015) translate3d(-.3%, -.2%, 0); filter: saturate(.96) contrast(1); }
  100% { transform: scale(1.07) translate3d(.6%, .4%, 0); filter: saturate(1.05) contrast(1.04); }
}

@keyframes pfHeroLightSweep {
  0%, 100% { opacity: .18; transform: translate3d(-14%, 0, 0); }
  50% { opacity: .42; transform: translate3d(14%, 4%, 0); }
}

@keyframes pfFadeUp {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes pfFadeLeft {
  from { opacity: 0; transform: translate3d(22px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes pfFadeRight {
  from { opacity: 0; transform: translate3d(-22px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes pfBadgeIn {
  from { opacity: 0; transform: translate3d(0, -12px, 0) scale(.92); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes pfBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44,145,245,.35), 0 10px 28px rgba(31,106,178,.18); }
  50% { box-shadow: 0 0 0 9px rgba(44,145,245,0), 0 16px 36px rgba(31,106,178,.28); }
}

@keyframes pfStepIn {
  from { opacity: 0; transform: translate3d(0, 20px, 0) scale(.98); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes pfPanelIn {
  from { opacity: .35; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes pfArrowDrift {
  0%, 100% { opacity: .45; transform: translateX(0); }
  50% { opacity: .95; transform: translateX(7px); }
}

@keyframes pfStepPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44,145,245,.28); }
  50% { box-shadow: 0 0 0 8px rgba(44,145,245,0); }
}

@media (max-width: 767px) {
  .pf-hero { box-shadow: 0 14px 38px rgba(15, 23, 42, .12) !important; }
  .pf-hero::before { height: 50% !important; opacity: .22 !important; }
  .pf-hero__bg-img,
  .pf-hero picture img,
  .pf-hero__media img { animation-duration: 14s !important; }
  .pf-hero-journey .pf-tab:hover,
  .pf-hero-login-cta:hover,
  .pf-hero__badge:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-hero::before,
  .pf-hero__bg-img,
  .pf-hero picture img,
  .pf-hero__media img,
  .pf-hero__copy,
  .pf-hero__title,
  .pf-hero__subtitle,
  .pf-hero__tagline,
  .pf-hero__badge,
  .pf-hero-journey__title,
  .pf-hero-journey .pf-tab,
  .pf-hero-login-cta,
  .pf-hero-journey .pf-step,
  .pf-hero-journey .pf-step__arrow,
  .pf-hero-journey .pf-step__num,
  .pf-hero-journey .pf-steps.pf-steps--active {
    animation: none !important;
    transition: none !important;
  }
}