/* Homepage only: reuse the current theme's line and marker colors. */
.home-animations {
  --home-scan-color: var(--red);
}
:root[data-theme="light"] .home-animations {
  --home-scan-color: var(--light-accent);
}
:root[data-theme="eva01"] .home-animations {
  --home-scan-color: var(--eva-lime);
}
.home-animations .home-card-scan {
  display: none;
}
.home-animations .console-open {
  gap: .6em;
}
.home-animations .console-open__label {
  min-width: 0;
}
.home-animations .home-action-arrow {
  display: inline-block;
  flex-shrink: 0;
}

/* Static, fully visible content is the default for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  /* Animate the outer blocks, leaving carousel positioning and scaling intact. */
  .home-motion-enabled .home-animations .hero .bigname,
  .home-motion-enabled .home-animations .hero .tagline,
  .home-motion-enabled .home-animations .hero .hero-terminal,
  .home-motion-enabled .home-animations .console-home {
    animation: home-enter 520ms cubic-bezier(.22, 1, .36, 1) backwards;
  }
  .home-motion-enabled .home-animations .hero .tagline,
  .home-motion-enabled .home-animations .hero .hero-terminal {
    animation-delay: 140ms;
  }
  .home-motion-enabled .home-animations .console-home {
    animation-delay: 280ms;
  }
  .home-motion-enabled .home-animations .console-home:focus-within {
    /* Keep focused controls visible without restarting the intro on blur. */
    opacity: 1 !important;
    transform: none !important;
  }
  /* A separate overlay preserves the card's geometric and EVA corner details. */
  .home-motion-enabled .home-animations .home-card-scan {
    display: block;
    position: absolute;
    inset: 1px;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
  }
  .home-motion-enabled .home-animations .console-tile :is(.console-code, .console-title, .console-bottom) {
    position: relative;
    z-index: 1;
  }
  .home-motion-enabled .home-animations .home-card-scan::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 0;
    width: 50%;
    height: 160%;
    background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--home-scan-color) 35%, transparent) 35%,
      color-mix(in srgb, var(--home-scan-color) 60%, transparent) 50%,
      color-mix(in srgb, var(--home-scan-color) 35%, transparent) 65%,
      transparent);
    opacity: 0;
    transform: translateX(-180%) skewX(-20deg);
  }
  .home-motion-enabled .home-animations .console-tile.is-selected .home-card-scan::before {
    animation: home-card-scan 650ms ease-in-out 280ms;
  }
  .home-animations .hero .redline {
    transform-origin: left center;
    animation: home-line-draw 900ms ease-in-out 180ms backwards;
  }
  .home-animations .console-home .console-tile.is-selected .console-title {
    animation: home-marker-draw 550ms ease-in-out;
  }
  .home-animations .home-action-arrow {
    transition: transform 220ms ease-out;
  }
  .home-animations :is(.console-open, .contact-strip__link):focus-visible .home-action-arrow {
    transform: translateX(6px);
  }
}

/* Avoid a persistent hover effect after a tap on touchscreens. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .home-animations :is(.console-open, .contact-strip__link):hover .home-action-arrow {
    transform: translateX(6px);
  }
}

@keyframes home-enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes home-card-scan {
  0% { opacity: 0; transform: translateX(-180%) skewX(-20deg); }
  15%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(310%) skewX(-20deg); }
}
@keyframes home-line-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes home-marker-draw {
  from { background-size: 0% 1.1em; }
  to { background-size: 100% 1.1em; }
}