/* ============================================================
   R29B — "SAJT ZA [DELATNOST]" rotating statement band.
   Vanilla, GPU-safe: only transform + opacity animate.
   Masked vertical swap. Layout height is fixed (em-based mask),
   so rotation never causes CLS. Reduced-motion / no-JS => static.
   Scoped to /izrada-sajtova/ (loaded only there).
   ============================================================ */
.izr-band{
  position:relative;
  padding:clamp(3.6rem,8.5vw,7rem) 0;
  text-align:center;
  background:var(--bg);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.izr-band .wrap{max-width:64rem}
.izr-band__eyebrow{display:block;margin:0 auto clamp(1rem,2.4vw,1.6rem)}

.izr-stmt{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:1;
  color:var(--text);
  margin:0;
}
.izr-stmt__vis{display:block}
.izr-stmt__lead,
.izr-stmt__tail{display:block;font-size:clamp(1.9rem,7.6vw,4.7rem)}
.izr-stmt__lead{white-space:nowrap;color:var(--text-2)}
.izr-stmt__tail{margin-top:.12em}

/* the swapping line */
.izr-rot{
  position:relative;
  display:block;
  height:1.18em;
  overflow:hidden;
  margin:.06em 0;
  font-size:clamp(2.3rem,9.6vw,5.9rem);
}
.izr-rot__word{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  color:var(--accent);
  transform:translateY(110%);
  opacity:0;
  transition:transform .52s cubic-bezier(.22,1,.36,1),
             opacity .40s cubic-bezier(.22,1,.36,1);
  will-change:transform,opacity;
}
.izr-rot__word.is-active{transform:translateY(0);opacity:1}
.izr-rot__word.is-exit{transform:translateY(-110%);opacity:0}
.izr-rot__word.no-anim{transition:none}

/* No-JS / reduced-motion: show only the first word, no animation, no jump. */
@media (prefers-reduced-motion:reduce){
  .izr-rot__word{transition:none}
}
.no-js .izr-rot__word,
.izr-rot.is-static .izr-rot__word{transition:none}