/* ==========================================================================
   Site-wide Animations & Hover Polish
   Loaded on every page. Scroll-reveal is opt-in via html.js-anim (added by
   animations.js) so content stays visible if JS never runs.
   ========================================================================== */

/* ---- Scroll reveal (gated behind .js-anim) ---- */
html.js-anim [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.js-anim [data-reveal="left"]  { transform: translateX(-32px); }
html.js-anim [data-reveal="right"] { transform: translateX(32px); }
html.js-anim [data-reveal="scale"] { transform: scale(0.94); }
html.js-anim [data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* ---- Buttons ---- */
:where(.btn, [class*="btn"], button[type="submit"]) {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}
:where(.btn, [class*="btn"]):hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(229, 38, 38, 0.22);
}
:where(.btn, [class*="btn"]):active {
  transform: translateY(0);
}

/* ---- Cards / tiles lift ---- */
:where([class*="card"], [class*="tile"], [class*="-item"]) {
  transition:
    transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
:where([class*="card"], [class*="tile"]):hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

/* ---- Image zoom inside cards / gallery figures ---- */
:where([class*="card"], [class*="tile"], figure) img {
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
:where([class*="card"], [class*="tile"], figure):hover img {
  transform: scale(1.06);
}

/* ---- Nav link underline slide ---- */
:where(.main-nav a, [class*="nav"] a) {
  position: relative;
  transition: color 0.25s ease;
}
:where(.main-nav a)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: #e52327;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
:where(.main-nav a):hover::after,
:where(.main-nav a.active)::after {
  transform: scaleX(1);
}

/* ---- Social / icon mini links ---- */
:where(.social-mini a, [class*="social"] a) {
  transition: transform 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
:where(.social-mini a, [class*="social"] a):hover {
  transform: translateY(-3px);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html.js-anim [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}