/* =========================================
   SOGNI DI RIPOSO - Animations Stylesheet
   ========================================= */

/* --- Blob Drift --- */
@keyframes blobDrift {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(1.5deg); }
  66% { transform: translateY(8px) rotate(-1deg); }
}

@keyframes blobDriftSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }
  50% { transform: translateY(-12px) rotate(2deg) scale(1.02); }
}

@keyframes blobDrift2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  40% { transform: translateY(15px) rotate(-2deg); }
  80% { transform: translateY(-8px) rotate(1deg); }
}

/* --- Floating Animation --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* --- Fade In Up --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Fade In --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Draw Line --- */
@keyframes drawLine {
  from { stroke-dashoffset: 400; }
  to { stroke-dashoffset: 0; }
}

/* --- Wobble --- */
@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(-4deg); }
  30% { transform: rotate(3deg); }
  45% { transform: rotate(-2deg); }
  60% { transform: rotate(1deg); }
  75% { transform: rotate(-1deg); }
}

/* --- Pulse Soft --- */
@keyframes pulseSoft {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* --- Spin Slow --- */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Underline Draw (for nav links) --- */
@keyframes underlineDraw {
  from { width: 0; }
  to { width: 100%; }
}

/* --- Slide In from Right --- */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Slide In from Left --- */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* --- Scale In --- */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Watercolor Fill (SVG illustration hover) --- */
@keyframes watercolorFill {
  from { fill-opacity: 0; }
  to { fill-opacity: 0.2; }
}

/* --- Button underline animation --- */
.btn-primary::after,
.btn-secondary::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: rgba(250, 246, 240, 0.6);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.btn-primary:hover::after,
.btn-secondary:hover::after {
  width: calc(100% - 36px);
}

/* --- Decorative blob classes --- */
.blob-animate-1 {
  animation: blobDrift 8s ease-in-out infinite;
}

.blob-animate-2 {
  animation: blobDrift2 10s ease-in-out infinite;
}

.blob-animate-3 {
  animation: blobDriftSlow 12s ease-in-out infinite;
}

/* --- Float animation for hero illustration --- */
.float-animation {
  animation: float 6s ease-in-out infinite;
}

/* --- Decorative floating elements --- */
.deco-float {
  animation: float 7s ease-in-out infinite;
}

.deco-float-delayed {
  animation: float 7s ease-in-out infinite;
  animation-delay: -3.5s;
}

/* --- Story decorative items --- */
.story-deco {
  animation: float 8s ease-in-out infinite;
}

.story-deco-hammer { animation-delay: 0s; }
.story-deco-spool { animation-delay: -2s; }
.story-deco-plank { animation-delay: -4s; }
.story-deco-pencil { animation-delay: -6s; }

/* --- Category card hover illustration effect --- */
.category-card:hover .category-illustration svg {
  animation: wobble 0.4s ease;
}

/* --- Parallax container --- */
.parallax-element {
  will-change: transform;
}

/* --- SVG stroke draw animation --- */
.svg-draw-on-scroll {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.2s ease-out;
}

.svg-draw-on-scroll.drawn {
  stroke-dashoffset: 0;
}

/* --- Intro icon hover --- */
.intro-icon-item:hover svg {
  animation: wobble 0.5s ease;
}

/* --- Form focus line animation --- */
.form-control:focus {
  animation: underlineFocus 0.3s ease;
}

@keyframes underlineFocus {
  from { border-bottom-color: var(--color-border); }
  to { border-bottom-color: var(--color-primary); }
}

/* --- Success message animation --- */
.form-success.visible {
  animation: scaleIn 0.4s ease;
}

/* --- Page entrance animation --- */
.page-enter {
  opacity: 0;
  animation: fadeInUp 0.8s ease 0.05s forwards;
}

.page-enter-delay-1 {
  opacity: 0;
  animation: fadeInUp 0.7s ease 0.15s forwards;
}
.page-enter-delay-2 {
  opacity: 0;
  animation: fadeInUp 0.7s ease 0.25s forwards;
}
.page-enter-delay-3 {
  opacity: 0;
  animation: fadeInUp 0.7s ease 0.4s forwards;
}

/* --- Timeline line draw --- */
.timeline-draw {
  animation: drawLine 1.5s ease forwards;
  animation-play-state: paused;
}

.timeline-draw.playing {
  animation-play-state: running;
}

/* --- Gallery item enter --- */
.gallery-item {
  opacity: 0;
  animation: scaleIn 0.5s ease forwards;
  animation-play-state: paused;
}

.gallery-item.visible {
  animation-play-state: running;
}

/* --- Soft pulse for CTA buttons --- */
.btn-cta-pulse {
  animation: pulseSoft 3s ease-in-out infinite;
}

/* --- Logo moon animation --- */
.logo-moon {
  animation: float 4s ease-in-out infinite;
  transform-origin: center;
}

/* --- Footer moon --- */
.footer-moon-icon {
  animation: float 5s ease-in-out infinite;
  opacity: 0.6;
}