/* ============================================================
   v111 — Teks bergantian: "SMK Pusat Keunggulan" -> "SMK Berintegritas" -> "SMK Cakap Prima"

   1) HERO (beranda): komponen StrokeText (js/stroke-text.js)
   2) HEADER + menu hamburger: teks turun dari atas ke bawah,
      fade in lalu fade out (CSS murni, 3 teks)
   ============================================================ */

/* ---------- 1) HERO: StrokeText (js/stroke-text.js) ---------- */
.hero-content .eyebrow.eyebrow-rotator.hero-flap {
  display: block !important;
  width: 100%;
  max-width: 100%;
  letter-spacing: 0;
  text-shadow: none;
}
.hero-flap .stroke-text { max-width: 100%; }
/* rata kiri persis dengan judul: ruang tepi dalam SVG (pad) ditarik keluar */
.hero-flap .stroke-text__svg { margin: 0 0 0 calc(-1 * var(--stroke-text-pad, 0px)); max-width: calc(var(--stroke-text-width, 600px)); }

/* ---------- 2) HEADER: scroll atas -> bawah + fade ---------- */
.logo-text small.header-rotator,
.menu-panel-logo small.header-rotator {
  display: inline-grid !important;
  grid-template-areas: "slot";
  align-items: center;
  justify-items: start;
  overflow: hidden;
  white-space: nowrap !important;
  line-height: 1.45 !important;
  padding: 1px 0;
  margin-top: 0 !important;
}
.logo-text small.header-rotator .hr-item,
.menu-panel-logo small.header-rotator .hr-item {
  grid-area: slot;
  opacity: 0;
  white-space: nowrap;
  will-change: transform, opacity;
  animation: hrScrollDown 9s ease-in-out infinite both;
}
.logo-text small.header-rotator .hr-item:nth-child(1),
.menu-panel-logo small.header-rotator .hr-item:nth-child(1) { animation-delay: 0s; }
.logo-text small.header-rotator .hr-item:nth-child(2),
.menu-panel-logo small.header-rotator .hr-item:nth-child(2) { animation-delay: 3s; }
.logo-text small.header-rotator .hr-item:nth-child(3),
.menu-panel-logo small.header-rotator .hr-item:nth-child(3) { animation-delay: 6s; }

/* masuk dari atas (fade in) -> diam -> turun ke bawah (fade out) */
@keyframes hrScrollDown {
  0%   { opacity: 0; transform: translateY(-85%); }
  7%   { opacity: 1; transform: translateY(0); }
  27%  { opacity: 1; transform: translateY(0); }
  34%  { opacity: 0; transform: translateY(85%); }
  100% { opacity: 0; transform: translateY(85%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-text small.header-rotator .hr-item,
  .menu-panel-logo small.header-rotator .hr-item { animation: none !important; }
  .logo-text small.header-rotator .hr-item:first-child,
  .menu-panel-logo small.header-rotator .hr-item:first-child { opacity: 1; transform: none; }
}