/* ════════════════════════════════════════════════════════════
   POLISH LAYER — styles for js/polish.js

   Only the MAGNETIC CARDS half needs a stylesheet. The SPLIT REVEAL
   builds its per-word spans with the source's own inline styles
   (display:inline-block / overflow:hidden / vertical-align:bottom),
   so it has no rules here at all.

   Every class below is added by js/polish.js and ONLY behind its hard
   gate — (hover:hover) and (pointer:fine) and (min-width:640px) and
   not reduced-motion. On a phone, a touch screen, or for a visitor who
   asked for less motion, none of these classes ever reaches the DOM, so
   this file has no effect there.
   ════════════════════════════════════════════════════════════ */

/* The source's overshoot curve and duration, one place. */
:root { --eh-mag-ease: cubic-bezier(0.22, 1, 0.36, 1); }

/* ── THE STAGE ─────────────────────────────────────────────────
   The grid leans as one plane, so its children have to live in the
   same 3D space rather than each being flattened into it — without
   preserve-3d the hovered card's translateZ(42px) collapses to
   nothing and all you get is a 12px nudge.

   The rotation itself is written inline by the rAF loop, together
   with the perspective() that projects it (see the note in
   js/polish.js for why the perspective is part of the stage's own
   transform instead of sitting on a wrapper). It is REMOVED, not
   zeroed, once the pointer has left and the lean has settled — this
   element is a ScrollTrigger trigger and must measure clean at rest.
   ────────────────────────────────────────────────────────────── */
.eh-mag-stage { transform-style: preserve-3d; }

/* ── THE CARDS ─────────────────────────────────────────────────
   position + z-index are what let the hovered card come forward
   WITHOUT its neighbours painting over it. Both grids' cards are
   static and unpositioned today, and neither holds an absolutely
   positioned descendant, so making them relative moves nothing.
   ────────────────────────────────────────────────────────────── */
.eh-mag-item {
  position: relative;
  z-index: 1;
  transform-style: preserve-3d;
}

/* THE TRANSITION IS PER CARD TYPE, ON PURPOSE.
   `transition` is a shorthand: one blanket .eh-mag-item rule would
   have replaced the whole list each of these cards already carries,
   and their hover — which is the only hover they have — would have
   stopped easing and started snapping. So each one re-declares its
   own transitions and appends ours.

   .area-card's live transition is style.css's `background .2s,
   border-color .2s` (its hover is a background + border colour
   change, nothing else). */
.area-card.eh-mag-item {
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.45s var(--eh-mag-ease),
    filter 0.45s var(--eh-mag-ease);
}

/* .faq-item's live transition is animations.css's `opacity .7s,
   transform .7s` (animations.min.css loads after style.min.css, so it
   wins). The opacity half is kept verbatim — it is the entrance. The
   transform half is retimed to the magnetic .45s: the only transform
   that rule ever ran was the entrance's translateY, and GSAP owns that
   one directly. */
.faq-item.eh-mag-item {
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.45s var(--eh-mag-ease),
    filter 0.45s var(--eh-mag-ease);
}

/* ── THE HOVERED CARD, AND ONLY THE HOVERED CARD ───────────────
   Source values: 12px up, 42px toward the viewer, 1.03 scale,
   brightness 1.06. It comes forward out of the group instead of
   covering its neighbours, which is why the lift is small and the
   Z is large.

   Two classes deep on purpose: `.faq-item.faq-visible` (animations.css)
   also sets a transform, and a single-class rule would have lost to it.
   ────────────────────────────────────────────────────────────── */
.eh-mag-item.eh-mag-on {
  transform: translate3d(0, -12px, 42px) scale(1.03);
  filter: brightness(1.06);
  z-index: 5;
}