/* =====================================================
   ANIMATIONS.CSS
   Subtle UI animations & transitions
   Print Tech Gravures Pvt Ltd
   ===================================================== */

/* ---------------------------------
   Global Smooth Transitions
   (DO NOT APPLY TO LAYOUT ELEMENTS)
----------------------------------- */
button,
.button,
a,
input,
textarea,
select {
  transition: background-color 0.25s ease,
              color 0.25s ease,
              border-color 0.25s ease;
}

/* ---------------------------------
   Fade In On Scroll (Utility)
----------------------------------- */
.fade-in {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------
   Buttons & Links (Hover)
   ⚠️ NO TRANSFORM ON LINKS
----------------------------------- */
button:hover,
.button:hover {
  transform: translateY(-2px);
}

/* ---------------------------------
   Gallery Hover Elevation
----------------------------------- */
.gallery-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

/* ---------------------------------
   Header Scroll Effects
   (Layout handles movement)
----------------------------------- */
.site-header.scrolled {
  background-color: var(--color-white);
}

/* ---------------------------------
   Focus & Accessibility
----------------------------------- */
:focus-visible {
  outline: 2px solid var(--color-brand-blue);
  outline-offset: 2px;
}

/* ---------------------------------
   Navigation Toggle Animation
----------------------------------- */
.nav-toggle span {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* ---------------------------------
   Simple Reveal on Load (Optional)
----------------------------------- */
.fade-on-load {
  opacity: 0;
  animation: fadeInAnimation 0.8s ease-in forwards;
  animation-delay: 0.3s;
}

@keyframes fadeInAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
