/* =====================================================================
   AIZRN hover micro-interactions. Add these classes to elements.
   Design-agnostic (uses transforms + currentColor; imposes no palette).
   ===================================================================== */

/* Lift slightly on hover */
.hover-lift { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.hover-lift:hover { transform: translateY(-4px); }

/* Animated underline that wipes in (great for links) */
.hover-underline { position: relative; }
.hover-underline::after {
  content: "";
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.hover-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* Image slowly zooms inside a fixed frame. Wrap an <img> with this.
   The frame and the image are each promoted to their own GPU compositor layer:
   the scale then runs on the compositor (no per-frame main-thread repaint, so it
   stays smooth), and the rounded-corner clip holds through the transform instead
   of flickering to square corners (a known Safari/Chrome "glitch"). Animating
   only `transform` keeps it a compositor-only property. */
.hover-zoom { overflow: hidden; will-change: transform; }
.hover-zoom img {
  display: block; width: 100%;
  transform: translateZ(0);           /* promote up front so the first frame isn't a hitch */
  backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.hover-zoom:hover img { transform: scale(1.06) translateZ(0); }

@media (prefers-reduced-motion: reduce) {
  .hover-lift,
  .hover-underline::after,
  .hover-zoom img { transition: none; }
}

/* --- Double-text hover (aizrn-finish): text slides up, its duplicate
   slides in from below. Markup:
     <a class="aizrn-flip" href="...">
       <span class="aizrn-flip__box" data-text="Label"><span>Label</span></span>
     </a>
   The CLIP BOX (.aizrn-flip__box) hugs the text; the anchor stays free to
   be a tall tap target (.footer__legal a is a 44px inline-flex box — do
   NOT clip on the anchor: a slide of 105% of the text height can never
   clear a taller box, which leaves both copies visible and jumping).
   data-text lives on the box and is kept in sync with the label on
   language change (js/menu.js). */
.aizrn-flip { display: inline-flex; align-items: center; text-decoration: none; color: inherit; }
.aizrn-flip__box {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 1.4;   /* tight box = clean 105% travel; leading stays modest */
}
.aizrn-flip__box > span, .aizrn-flip__box::after {
  display: block;
  transition: transform .5s cubic-bezier(0.76, 0, 0.24, 1);
}
.aizrn-flip__box::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  transform: translateY(105%);
}
.aizrn-flip:hover .aizrn-flip__box > span,
.aizrn-flip:focus-visible .aizrn-flip__box > span { transform: translateY(-105%); }
.aizrn-flip:hover .aizrn-flip__box::after,
.aizrn-flip:focus-visible .aizrn-flip__box::after { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .aizrn-flip__box > span, .aizrn-flip__box::after { transition: none; }
  .aizrn-flip:hover .aizrn-flip__box > span { transform: none; opacity: .6; }
  .aizrn-flip:hover .aizrn-flip__box::after { display: none; }
}