/* CynoFlo 0.6.6 : arrivée accentuée de Florence et Batuc sur l'accueil.
 * CSS additionnel chargé après 0.6.5. Aucun remplacement de contenu, photo,
 * palette, logo ni séparation en vagues.
 */
:root {
  --cf-v066-frame-x: clamp(12px, 1.4vw, 24px);
  --cf-v066-frame-y: clamp(-50px, -2.7vw, -22px);
  --cf-v066-rotation: 2.15deg;
}

/* Le cadre reste légèrement en décalage au repos, comme dans la référence. */
.cyno-v06 .cf-hero-visual {
  transform-origin: 53% 51%;
  transform: translate3d(var(--cf-v066-frame-x), var(--cf-v066-frame-y), 0) rotate(var(--cf-v066-rotation));
  animation: cf-v066-frame-reveal 1.2s cubic-bezier(.16, .65, .24, 1) both !important;
}
@keyframes cf-v066-frame-reveal {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--cf-v066-frame-x) + 90px), calc(var(--cf-v066-frame-y) + 35px), 0)
      rotate(4deg) scale(.89);
  }
  70% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translate3d(var(--cf-v066-frame-x), var(--cf-v066-frame-y), 0)
      rotate(var(--cf-v066-rotation)) scale(1);
  }
}
/* Zoom dans le masque organique, sans translation permanente de la photo. */
.cyno-v06 .cf-hero-img img {
  transform-origin: 54% 45%;
  animation: cf-v066-photo-reveal 1.45s cubic-bezier(.16, .65, .3, 1) both !important;
}
@keyframes cf-v066-photo-reveal {
  0% { transform: scale(1.19); filter: saturate(.94); }
  75% { transform: scale(1.025); filter: saturate(1); }
  100% { transform: scale(1); filter: saturate(1); }
}
/* Sur téléphone, l'image ne déborde pas à droite. */
@media (max-width: 900px) {
  :root { --cf-v066-frame-x: 0px; --cf-v066-frame-y: 0px; --cf-v066-rotation: 1.1deg; }
  @keyframes cf-v066-frame-reveal {
    0% { opacity: 0; transform: translate3d(28px, 20px, 0) rotate(2deg) scale(.94); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(var(--cf-v066-rotation)) scale(1); }
  }
}
/* Accessibilité : aucun contenu masqué ni mouvement imposé. */
@media (prefers-reduced-motion: reduce) {
  .cyno-v06 .cf-hero-visual {
    animation: none !important;
    opacity: 1 !important;
    transform: translate3d(var(--cf-v066-frame-x),var(--cf-v066-frame-y),0) rotate(var(--cf-v066-rotation)) !important;
  }
  .cyno-v06 .cf-hero-img img {
    animation: none !important;
    filter: none !important;
    transform: scale(1) !important;
  }
}