/* ============================================================
   animations.css — printezpereți.ro
   Scroll-triggered animations, keyframes, transitions
   ============================================================ */

/* ============================================================
   1. KEYFRAMES
   ============================================================ */

/* Bounce — scroll indicator arrow */
@keyframes bounce {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50%       { transform: rotate(45deg) translateY(8px); }
}

/* Pulse — WhatsApp button glow (GPU-composited: opacity + scale pe pseudo-element) */
@keyframes pulse-green {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Pulse — violet ring (GPU-composited) */
@keyframes pulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  70%  { transform: scale(1.8);  opacity: 0; }
  100% { transform: scale(1.8);  opacity: 0; }
}

/* Fade in up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Fade in left */
@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade in right */
@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* Slide down (nav mobile) */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Counter number spin */
@keyframes countUp {
  from { opacity: 0.3; }
  to   { opacity: 1; }
}

/* Shimmer loading */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Gradient shift (hero bg subtle movement) */
@keyframes gradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ============================================================
   2. SCROLL-TRIGGERED ANIMATION CLASSES
   Controlled via Intersection Observer in main.js
   ============================================================ */

/* Initial hidden state for elements that will animate in */
.animate {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  transition-duration: 0.7s;
}

/* Variants — define the initial transform */
.animate--up    { transform: translateY(32px); }
.animate--down  { transform: translateY(-32px); }
.animate--left  { transform: translateX(-32px); }
.animate--right { transform: translateX(32px); }
.animate--scale { transform: scale(0.92); }
.animate--fade  { transform: none; }

/* Triggered state — added by JS when element enters viewport */
.animate.in-view {
  opacity: 1;
  transform: none;
}

/* Stagger delays for card grids */
.animate--delay-1 { transition-delay: 0.1s; }
.animate--delay-2 { transition-delay: 0.2s; }
.animate--delay-3 { transition-delay: 0.3s; }
.animate--delay-4 { transition-delay: 0.4s; }
.animate--delay-5 { transition-delay: 0.5s; }
.animate--delay-6 { transition-delay: 0.6s; }

/* Slower animation for large elements */
.animate--slow { transition-duration: 1s; }

/* ============================================================
   3. HERO ENTRANCE ANIMATIONS
   ============================================================ */
.hero__content h1 {
  animation: fadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.hero__subtitle {
  animation: fadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}

.hero__sub-subtitle {
  animation: fadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.38s both;
}

.hero__buttons {
  animation: fadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.hero__scroll {
  animation: fadeIn 1s ease 1.2s both;
}

/* ============================================================
   4. MOBILE: Reduce motion for accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .animate,
  .animate--up,
  .animate--down,
  .animate--left,
  .animate--right,
  .animate--scale,
  .animate--fade {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__content h1,
  .hero__subtitle,
  .hero__sub-subtitle,
  .hero__buttons,
  .hero__scroll {
    animation: none;
  }

  .whatsapp-float {
    animation: none;
  }

  .hero__scroll-arrow {
    animation: none;
  }
}

/* ============================================================
   5. LOADER / SKELETON (optional placeholder state)
   ============================================================ */
.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.05) 25%,
    rgba(255,255,255,0.1)  50%,
    rgba(255,255,255,0.05) 75%
  );
  background-size: 200% auto;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--border-radius);
}

/* ============================================================
   6. PAGE TRANSITION (fade-in pe conținutul principal, nu pe body)
   ============================================================ */
main, #main-content {
  animation: fadeIn 0.35s ease both;
}

/* ============================================================
   7. INTERACTIVE MICRO-ANIMATIONS
   ============================================================ */

/* Link underline slide */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-violet);
  transition: width 0.3s ease;
}

.link-underline:hover::after {
  width: 100%;
}

/* Icon hover rotate */
.icon-rotate {
  transition: transform 0.3s ease;
}

.icon-rotate:hover {
  transform: rotate(15deg);
}

/* Card image zoom on hover */
.card:hover .card__image {
  transform: scale(1.04);
  transition: transform 0.5s ease;
}

.card .card__image {
  transition: transform 0.5s ease;
}

/* Image overflow clip needed on card */
.card__image-wrapper {
  overflow: hidden;
  border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

/* Number counter flash */
.counter {
  display: inline-block;
  animation: countUp 0.3s ease;
}