/* ============================================================
   Homepage hero video banner
   Cinematic wide banner: follows the shared .container width,
   fixed responsive height (not full-screen), cover + no distortion.
   Hover reveals the brand tagline near the bottom (staggered).
   Palette: existing ADAM dark token (#090b0c) only.
   ============================================================ */
.home-hero-video {
    position: relative;                  /* anchor for the tagline overlay */
    width: 100%;
    height: clamp(400px, 30vw, 560px);   /* 1366~410, 1440~432, 1920 capped 560 */
    overflow: hidden;                    /* no overflow while cropping to cover */
    background: #090b0c;                 /* shows while the video loads */
    line-height: 0;
    margin: 0 0 30px;
}

.home-hero-video__media {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;                   /* fill the banner, keep pixel ratio */
    object-position: center;             /* centered crop, no distortion */
}

/* Brand tagline — small, pinned near the bottom-left corner. English text,
   so force LTR. Always visible and continuously animated: the words ride a
   gentle looping wave while the whole line pulses a warm glow. */
.home-hero-video__tagline {
    position: absolute;
    left: clamp(48px, 9vw, 160px);       /* pushed further right */
    bottom: clamp(10px, 2.5vw, 26px);
    inset-inline: auto;                  /* cancel any RTL inset */
    right: auto;
    margin: 0;
    direction: ltr;
    text-align: left;
    line-height: 1.1;
    font-family: 'Orbitron', 'Open Sans', system-ui, sans-serif;
    font-weight: 700;
    font-size: clamp(13px, 1.6vw, 22px);
    letter-spacing: .5px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
    white-space: nowrap;                 /* keep on one line in the corner */
    pointer-events: none;                /* never block the video */
    animation: taglineGlow 3s ease-in-out infinite;
}

.home-hero-video__tagline span {
    display: inline-block;
    animation: taglineWave 2.2s ease-in-out infinite;
}
.home-hero-video__tagline span:nth-child(1) { animation-delay: 0s;   }
.home-hero-video__tagline span:nth-child(2) { animation-delay: .12s; }
.home-hero-video__tagline span:nth-child(3) { animation-delay: .24s; }
.home-hero-video__tagline span:nth-child(4) { animation-delay: .36s; }
.home-hero-video__tagline span:nth-child(5) { animation-delay: .48s; }

/* Words bounce + pop, staggered so the motion flows word by word */
@keyframes taglineWave {
    0%, 100% { transform: translateY(0) scale(1); }
    40%      { transform: translateY(-9px) scale(1.08); }
}
/* Whole line breathes a strong warm orange glow, matching the keyboard footage */
@keyframes taglineGlow {
    0%, 100% { text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
    50%      { text-shadow: 0 0 18px rgba(255, 120, 40, .95), 0 0 6px rgba(255, 150, 60, .8), 0 2px 10px rgba(0, 0, 0, .7); }
}

/* Reduced motion: keep it visible, drop the looping motion */
@media (prefers-reduced-motion: reduce) {
    .home-hero-video__tagline,
    .home-hero-video__tagline span { animation: none; }
}

/* Mobile: shorter, separately tuned height */
@media (max-width: 767px) {
    .home-hero-video {
        height: clamp(200px, 56vw, 300px);   /* ~218px at 390px width */
        margin-bottom: 20px;
    }
}

/* ============================================================
   Logitech promo banner (replaces the former two-ad block).
   Single full-width responsive image, no distortion.
   ============================================================ */
.home-logitech-ad {
    margin: 0 0 30px;
    line-height: 0;
}
.home-logitech-ad__link {
    display: block;
}
.home-logitech-ad__img {
    display: block;
    width: 100%;
    height: auto;                /* keep 2172x724 aspect, no distortion */
}
@media (max-width: 767px) {
    .home-logitech-ad { margin-bottom: 20px; }
}