/* ============================================================
   ANIMATIONS.CSS — Scroll reveals & transitions
   ============================================================ */

/* ─── FADE-UP (scroll reveal) ─── */
.fade-up {
  opacity: 0;
  transform: translateY(120px);
  transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── FADE-IN (simple opacity) ─── */
.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
}

/* ─── STAGGERED DELAYS for service items ─── */
.services-items .service-item:nth-child(1) { transition-delay: 0s; }
.services-items .service-item:nth-child(2) { transition-delay: 0.1s; }
.services-items .service-item:nth-child(3) { transition-delay: 0.15s; }
.services-items .service-item:nth-child(4) { transition-delay: 0.2s; }

/* ─── STAGGERED DELAYS for form fields ─── */
.contact-form .form-field:nth-child(1) { transition-delay: 0s; }
.contact-form .form-field:nth-child(2) { transition-delay: 0.1s; }
.contact-form .form-field:nth-child(3) { transition-delay: 0.15s; }
.contact-form .form-submit { transition-delay: 0.2s; }

/* ─── POLAROID entrance ─── */
.polaroid.fade-up {
  transform: translateX(100px) translateY(50px) rotate(15deg);
}

.polaroid.fade-up.visible {
  transform: translateX(0) translateY(0) rotate(0);
}

/* ─── NAME HEADING entrance (absolute, so use opacity-only) ─── */
.name-heading.fade-up {
  opacity: 0;
  transform: translateY(80px);
  filter: blur(15px);
  transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.name-heading.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ─── SOCIAL ICON hover ─── */
.social-icon {
  transition: background-color 0.25s ease;
}

.social-icon:hover {
  background-color: var(--color-hover-bg);
}

/* ─── BUTTON hover ─── */
.btn-pill,
.btn-submit {
  transition: opacity 0.2s ease, transform 0.15s ease;
}

.btn-pill:hover {
  opacity: 0.8;
}

.btn-submit:hover {
  opacity: 0.9;
  transform: scale(1.01);
}

.btn-submit:active {
  transform: scale(0.98);
}

/* ─── FORM INPUT focus ─── */
.form-field input,
.form-field textarea {
  transition: border-bottom-color 0.2s ease, border-bottom-width 0.15s ease;
}

/* ─── REDUCE MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .fade-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .social-icon,
  .btn-pill,
  .btn-submit,
  .form-field input,
  .form-field textarea {
    transition: none;
  }
}