/* Tech-Arrow hero animation v2. Everything is scoped under .ta-hero and the ta-hero-img--* classes */

/* Drop-in: the slide's <img> of ta-hero.svg stays in the page and keeps the layout; hero.js lays the animated
   SVG exactly over it. Until hero.js has decided, the image is hidden, so the finished illustration never
   flashes before the intro. If the script never arrives, the failsafe shows the image after 4 s.
   Reduced motion or no JavaScript: never hidden. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  img[src*="ta-hero" i][src*=".svg" i]:not(.ta-hero-img--static),
  img[data-src*="ta-hero" i][data-src*=".svg" i]:not(.ta-hero-img--static),
  img[data-lazy-src*="ta-hero" i][data-lazy-src*=".svg" i]:not(.ta-hero-img--static) {
    opacity: 0;
    animation: ta-hero-failsafe 0s linear 4s forwards;
  }
}
/* The animation is drawn over the image; the image stays as the invisible layout box. */
img.ta-hero-img--live {
  visibility: hidden;
}

/* Inline mode (SVG pasted into div.ta-hero; kept for compatibility) */
.ta-hero {
  position: relative;
  width: 100%;
}
.ta-hero .ta-hero-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  .ta-hero-js .ta-hero:not(.ta-hero--ready) .ta-hero-svg {
    opacity: 0;
    animation: ta-hero-failsafe 0s linear 4s forwards;
  }
}

/* Drop-in overlay: position and size are set by hero.js. Never takes clicks or text selection. */
.ta-hero.ta-hero--overlay {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  pointer-events: none;
}
.ta-hero--overlay .ta-hero-svg {
  position: absolute;
  max-width: none;
  max-height: none;
  margin: 0;
  pointer-events: none;
}

@keyframes ta-hero-failsafe {
  to { opacity: 1; }
}