/* ============================================================
   HARPY MEDIA — animations.css
   1. Hero entrance (on page load)
   2. Scroll reveal (+ staggered grids)
   3. Smooth collapsible panels
   4. Micro-interactions (button arrows, nav underline)
   Active only when JS is available (html.js-anim).
   Want animations off? Remove this file's <link> from the pages.
   ============================================================ */

/* ---------- 2. scroll reveal (base) ---------- */
.js-anim .reveal { opacity: 0; transform: translateY(24px); transition: opacity .55s ease-out, transform .55s ease-out; }
.js-anim .reveal.is-in { opacity: 1; transform: none; }

.js-anim .reveal-stagger > * { opacity: 0; transform: translateY(24px); transition: opacity .55s ease-out, transform .55s ease-out; }
.js-anim .reveal-stagger.is-in > * { opacity: 1; transform: none; }

/* ---------- 1. hero entrance (page load) ---------- */
@keyframes hm-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hm-media { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }

.js-anim .hero .chip,
.js-anim .shero .chip,
.js-anim .chero .chip,
.js-anim .folio-hero .chip { animation: hm-rise .55s ease-out .05s both; }

.js-anim .hero .stack span { animation: hm-rise .6s cubic-bezier(.2, .7, .3, 1) both; }
.js-anim .hero .stack span:nth-child(1) { animation-delay: .10s; }
.js-anim .hero .stack span:nth-child(2) { animation-delay: .19s; }
.js-anim .hero .stack span:nth-child(3) { animation-delay: .28s; }
.js-anim .hero .stack span:nth-child(4) { animation-delay: .37s; }
.js-anim .hero .stack span:nth-child(5) { animation-delay: .46s; }
.js-anim .hero .stack span:nth-child(6) { animation-delay: .55s; }

.js-anim .hero .lead { animation: hm-rise .6s ease-out .45s both; }
.js-anim .hero .hero__actions { animation: hm-rise .6s ease-out .55s both; }
.js-anim .hero .hero__note,
.js-anim .hero .proof { animation: hm-rise .6s ease-out .65s both; }
.js-anim .hero .hero__media,
.js-anim .hero .collage { animation: hm-media .7s cubic-bezier(.2, .7, .3, 1) .35s both; }

/* shero (Services / Privacy / Terms / 404) · chero (Contact) · folio-hero */
.js-anim .shero h1,
.js-anim .chero h1,
.js-anim .folio-hero h1 { animation: hm-rise .6s cubic-bezier(.2, .7, .3, 1) .1s both; }
.js-anim .shero .lead,
.js-anim .chero .lead,
.js-anim .folio-hero .lead { animation: hm-rise .6s ease-out .28s both; }
.js-anim .shero__inner .btn { animation: hm-rise .6s ease-out .4s both; }
.js-anim .chero .chero__fine,
.js-anim .chero .dots { animation: hm-rise .6s ease-out .4s both; }
.js-anim .chero .rule { animation: hm-rise .6s ease-out .5s both; }
.js-anim .folio-hero h1 { animation-delay: .12s; }

/* ---------- 3. smooth collapsible panels ---------- */
.panel__body {
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4, 0, .2, 1),
              opacity .35s ease,
              padding .45s cubic-bezier(.4, 0, .2, 1);
}
.panel--collapsed .panel__body {
  max-height: 0;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ---------- 4. micro-interactions ---------- */
.btn .arw { transition: transform .2s ease; }
.btn:hover .arw,
.btn:focus-visible .arw { transform: translateX(3px); }

.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}
.nav a:hover::after,
.nav a:focus-visible::after { transform: scaleX(1); }

/* ---------- accessibility: reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal,
  .js-anim .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }

  .js-anim .hero .chip, .js-anim .hero .stack span, .js-anim .hero .lead,
  .js-anim .hero .hero__actions, .js-anim .hero .hero__note, .js-anim .hero .proof,
  .js-anim .hero .hero__media, .js-anim .hero .collage,
  .js-anim .shero .chip, .js-anim .shero h1, .js-anim .shero .lead, .js-anim .shero__inner .btn,
  .js-anim .chero .chip, .js-anim .chero h1, .js-anim .chero .lead,
  .js-anim .chero .chero__fine, .js-anim .chero .dots, .js-anim .chero .rule,
  .js-anim .folio-hero .chip, .js-anim .folio-hero h1, .js-anim .folio-hero .lead { animation: none !important; }

  .panel__body { transition: none !important; }
  html { scroll-behavior: auto !important; }
}