/* =========================================================
   Hero rotating headline
   Cycles action phrases in place while "in a click" stays put.
   The real <h1> is one clean sentence in .sr-only (what search
   engines and AI read as the heading); this visual block is an
   aria-hidden div, so its rotating words never pollute the H1.
   Respects reduced motion.
   ========================================================= */

/* A div does not get the browser's default bold for h1. */
.hero-h1{ font-weight: 700; }

.hero-h1 .hero-rotate{
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  color: var(--accent);
  perspective: 620px;      /* 3D depth for the calendar-style flip */
}

/* Invisible sizer reserves the width of the widest phrase so
   "in a click" never jumps as phrases swap. */
.hero-h1 .hero-rotate-sizer{
  visibility: hidden;
  white-space: nowrap;
}

.hero-h1 .hero-rotate-track{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.hero-h1 .hero-rotate-item{
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  opacity: 0;
  /* Rests folded up behind the top hinge, like a desk-calendar page. */
  transform: rotateX(-92deg);
  transform-origin: 50% 0;
  backface-visibility: hidden;
  transition: transform .5s cubic-bezier(.2,.75,.25,1), opacity .3s ease;
}
.hero-h1 .hero-rotate-item.is-active{
  opacity: 1;
  transform: rotateX(0deg);
}

.hero-h1 .hero-line2{ display: block; }

/* On narrow screens the rotating phrase + "in a click" won't fit on one
   line, so drop "in a click" onto its own line under the rotator. */
@media (max-width: 900px){
  .hero-h1 .hero-static{ display: block; }
}

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce){
  .hero-h1 .hero-rotate-item{ transition: none; transform: none; }
}