/* ==========================================================================
   RURALTECH HERO COPY V1.1

   Identity block reveal
   + exact-centered typewriter
   + one-shot cycle / click-to-replay.

   Independent from neural / territorial / local-hub engines.
   ========================================================================== */


/* --------------------------------------------------------------------------
   RuralTech identity reveal
   -------------------------------------------------------------------------- */

.hero__content > h1 {
  animation:
    rt-copy-v1-title-reveal
    680ms
    cubic-bezier(.22, .72, .24, 1)
    90ms
    both;
}


@keyframes rt-copy-v1-title-reveal {

  0% {
    opacity: 0;

    transform:
      translate3d(0, 10px, 0)
      scale(.985);

    filter:
      blur(2px);
  }

  55% {
    opacity: .78;
  }

  100% {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      scale(1);

    filter:
      blur(0);
  }
}


/* --------------------------------------------------------------------------
   Typewriter line

   The paragraph owns the horizontal centering.

   JS measures the final rendered width of each phrase and assigns exactly
   that width to .tagline__inner before typing begins. Text then grows
   left-to-right inside an already-centred phrase box.
   -------------------------------------------------------------------------- */

.tagline {
  min-height: 1.35em;

  text-align: center;
}


.tagline__inner {
  position: relative;

  display: inline-block;

  width: auto;
  max-width: 100%;

  text-align: left;

  white-space: nowrap;

  vertical-align: baseline;
}


/* --------------------------------------------------------------------------
   Caret

   Absolute positioning is deliberate:
   the caret must NOT contribute to phrase width and therefore must NOT
   alter visual centering.
   -------------------------------------------------------------------------- */

.tagline__inner.rt-typewriter-active::after {
  content: "";

  position: absolute;

  left: calc(100% + .09em);
  top: 50%;

  width: 2px;
  height: .88em;

  transform:
    translateY(-46%);

  background:
    rgba(244, 237, 211, .84);

  box-shadow:
    0 0 5px
    rgba(232, 223, 190, .16);

  animation:
    rt-copy-v1-caret-blink
    820ms
    steps(1, end)
    infinite;

  pointer-events: none;
}


@keyframes rt-copy-v1-caret-blink {

  0%,
  46% {
    opacity: 1;
  }

  47%,
  100% {
    opacity: .12;
  }
}


/* --------------------------------------------------------------------------
   Resting / replay state

   The final canonical phrase itself becomes the replay control.
   No permanent glow or button chrome.
   -------------------------------------------------------------------------- */

.tagline__inner.rt-typewriter-ready {
  cursor: pointer;
}


.tagline__inner.rt-typewriter-ready:hover::after {
  background:
    rgba(248, 239, 203, .94);
}


.tagline__inner[role="button"]:focus-visible {
  outline:
    1px solid
    rgba(238, 244, 228, .34);

  outline-offset: 6px;

  border-radius: 2px;
}


/* --------------------------------------------------------------------------
   Small screens

   At narrow width, readability wins over fixed-left typewriter geometry.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {

  .tagline__inner {
    width: 100% !important;

    text-align: center;
  }
}


/* --------------------------------------------------------------------------
   Reduced motion

   Canonical first phrase, static.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .hero__content > h1 {
    animation: none !important;

    opacity: 1;
    transform: none;
    filter: none;
  }


  .tagline__inner {
    width: auto !important;

    text-align: inherit;

    cursor: default;
  }


  .tagline__inner::after {
    display: none !important;

    animation: none !important;
  }


  .tagline__inner:focus {
    outline: none;
  }
}