/*
Irozon Shop — homepage hero, overlapping product deck + pointer physics.

Ported from the FINALIZED irozon-website hero (D:\Code\irozon-website,
src/index.css's "Magnetic hero" block + the hero-shell-spacing /
hero-gap-heading-deck / hero-gap-deck-description vertical-rhythm rules).
Values below are copied, not re-derived — the elastic easing curve, card
shadow, overlap %, rotation-per-card, mobile card-width clamp, and the
viewport-height-aware spacing clamps are byte-identical to the master
source. Only class names for the deck are shared 1:1 with the master
(.magnetic-hero / .hero-images / .hero-image / [data-magnetic-item]) since
that IS the ported mechanism; the surrounding shell keeps the shop's own
`.irozon-hero-*` naming since headline/copy/CTA are shop-specific content.

Motion itself is applied by irozon-hero-physics.js, which sets
--offsetX/--offsetY/--velocity per card every animation frame (a velocity-
of-the-cursor spring, not a position spring) — this file's `transition:
transform 0.7s var(--ease-out-elastic)` is what turns those per-frame
writes into the liquid/elastic feel; nothing here is a JS-driven
transition duration.

Scoped entirely to [data-irozon-hero] / .magnetic-hero. Touches no other
part of the site — see irozon-shop-theme/functions.php's
irozon_shop_enqueue_hero_assets(), which only loads this file on the
front page.
*/

:root {
  --ease-out-elastic: linear(
    0,
    0.5737 7.6%,
    0.8382 11.87%,
    0.9463 14.19%,
    1.0292 16.54%,
    1.0886 18.97%,
    1.1258 21.53%,
    1.137 22.97%,
    1.1424 24.48%,
    1.1423 26.1%,
    1.1366 27.86%,
    1.1165 31.01%,
    1.0507 38.62%,
    1.0219 42.57%,
    0.9995 46.99%,
    0.9872 51.63%,
    0.9842 58.77%,
    1.0011 81.26%,
    1
  );
  --card-shadow:
    0px 9px 21px rgba(0, 0, 0, 0.1), 0px 38px 38px rgba(0, 0, 0, 0.09),
    0px 85px 51px rgba(0, 0, 0, 0.05), 0px 151px 60px rgba(0, 0, 0, 0.01);
}

/* ---- Shell (shop-specific: headline / copy / CTA) ---- */

.irozon-hero.irozon-hero--physics {
  position: relative;
  overflow: hidden;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.irozon-hero-copy {
  position: relative;
  z-index: 3;
  text-align: center;
  /* Was 36rem (576px), sized for the previous 32px default heading.
     .irozon-hero-title's own max-width:16ch (irozon-shop.css) already
     scales correctly with font-size and measures 674px at the new 64px
     size — comfortably wider than "Designed to be useful."'s natural
     661px — but this wrapper was narrower than that, so it was the
     actual binding constraint and forced an unwanted third line. Widened
     just enough for the ch-based constraint to govern again, restoring
     the intended two-line break. */
  max-width: 44rem;
  margin: 0 auto;
}

/* No font-size was ever set for this heading — it was rendering at the
   plain browser h1 default (32px), which read as a normal section
   heading next to the 5-card deck's visual weight. Font family, weight,
   and color are untouched (still theme.json's core/heading style +
   --irozon-ink); only size/line-height are set here. max-width:16ch on
   this class (irozon-shop.css) is in `ch` units, which scale with
   font-size, so the existing wrap behavior (and safety margin for
   longer future/localized copy) scales proportionally rather than
   needing separate tuning. */
.irozon-hero-title {
  font-size: clamp(2.125rem, 8vw, 2.5rem);
  line-height: 1.04;
}

@media (min-width: 640px) {
  .irozon-hero-title {
    font-size: clamp(3rem, 4.5vw, 4rem);
  }
}

.irozon-hero-sub {
  margin: 1.25rem auto 0;
  max-width: 30rem;
  font-size: 1.15rem;
  color: var(--irozon-muted);
}

.irozon-hero-actions {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

/* Heading -> deck and deck -> description gaps. Mobile values (<640px)
   match the master's mobile Tailwind classes (mt-14 / mt-16); the >=640px
   clamps below are copied verbatim from the master's final tuning pass. */
.irozon-hero-gap-heading-deck {
  margin-top: 3.5rem;
}

.irozon-hero-gap-deck-description {
  margin-top: 4rem;
}

@media (min-width: 640px) {
  /* More breathing room than the agency master's own values: that hero's
     much larger type-display-xl heading (up to 5.5rem) left far less
     vertical room to spend, so its final pass had to compress padding
     almost to zero to keep the CTA on-screen. The shop's smaller heading
     (max 4.5rem) has headroom to spare — verified against real measured
     layout (heading/deck/sub/CTA heights) at 1280x800 and 1440x900 so the
     CTA stays comfortably above the fold at both, not just barely. */
  .irozon-hero.irozon-hero--physics {
    padding-top: clamp(2rem, 6vh, 5rem);
    padding-bottom: clamp(1.5rem, 4vh, 3.5rem);
  }

  .irozon-hero-gap-heading-deck {
    margin-top: clamp(10rem, 6vh, 5rem);
  }

  .irozon-hero-gap-deck-description {
    margin-top: clamp(10rem, 6vh, 5rem);
  }
}

/* ---- Deck (ported mechanism — class names match the master 1:1) ---- */

.magnetic-hero {
  container: inline-block;
}

.hero-images {
  display: flex;
  place-items: center;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  position: relative;
  touch-action: none;
  width: 100%;
  height: auto;
  z-index: 1;
}

.hero-images .hero-image {
  aspect-ratio: 1 / 1;
  border-radius: 1rem;
  width: clamp(9rem, 100%, 16vw);
  user-select: none;
  --offsetX: 0;
  --offsetY: 0;
  --velocity: 0;
  --translateY: 0%;
}

.hero-images .hero-image:not(:last-child) {
  margin-right: -6%;
}

.hero-images .hero-image img {
  border-radius: inherit;
  box-shadow: var(--card-shadow);
  pointer-events: auto;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  object-fit: cover;
  will-change: transform;
  transform: translateX(calc(var(--offsetX) * 1px))
    translateY(calc(var(--offsetY) * 1px + var(--translateY)));
  transition: transform 0.7s var(--ease-out-elastic);
}

.hero-images .hero-image:nth-child(4n + 1) img {
  rotate: calc(2deg - var(--velocity) * 0.25deg);
  --translateY: 5%;
}
.hero-images .hero-image:nth-child(4n + 2) img {
  rotate: calc(-3deg - var(--velocity) * 0.25deg);
  --translateY: -6%;
}
.hero-images .hero-image:nth-child(4n + 3) img {
  rotate: calc(6deg - var(--velocity) * 0.25deg);
  --translateY: 5%;
}
.hero-images .hero-image:nth-child(4n + 4) img {
  rotate: calc(-2deg - var(--velocity) * 0.25deg);
  --translateY: -4%;
}

/* Entrance only — not part of the ported interaction (the master has no
   entrance animation; this predates the port and is kept as it doesn't
   touch geometry, rotation, or the pointer mechanism, just an opacity/
   scale fade-in on mount, staggered per card). Targets the wrapper, not
   the img, so it never competes with the img's own transform above. */
.hero-images .hero-image {
  animation: irozon-hero-settle 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-images .hero-image:nth-child(1) {
  animation-delay: 0.04s;
}
.hero-images .hero-image:nth-child(2) {
  animation-delay: 0.11s;
}
.hero-images .hero-image:nth-child(3) {
  animation-delay: 0.18s;
}
.hero-images .hero-image:nth-child(4) {
  animation-delay: 0.25s;
}
.hero-images .hero-image:nth-child(5) {
  animation-delay: 0.32s;
}

@keyframes irozon-hero-settle {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Mobile (<640px) — matches the master's tuned breakpoint and card-width
   clamp exactly: all 5 cards stay visible, deck lands at ~90% of viewport
   width at 375–430px (see the master's index.css comment for the overlap-
   margin math this clamp is tuned against). */
@media (max-width: 639px) {
  .hero-images .hero-image {
    width: clamp(4.5rem, 22.8vw, 6.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-images .hero-image {
    animation: none;
    opacity: 1;
  }
}