/* Homepage hero — hardening for the reported tablet issue:
   "text below the words Aho Gurudev is not seen" (Samsung Tablet).

   The hero text (eyebrow, title, rule, tagline, action buttons) is authored at
   opacity:0 in index.html and is only made visible by a GSAP timeline. That
   timeline latches its run-once flag BEFORE it checks the <video> ref:

       if (loading || ran.current) return;
       ran.current = true;          // latched here
       let v = videoRef.current;
       if (v) { ...timeline... }    // never runs if v is null on this pass

   so on any pass where the video element is not there, the timeline never
   runs and the text stays invisible permanently. This animation restores it
   after 4s.

   In the normal case the GSAP timeline finishes in roughly 2.5s, well before
   this starts, and it lands on the same end state — so nothing changes
   visually. .hero-redesign__scroll is deliberately excluded: its opacity is
   driven by a scroll handler, and animating it would pin it on screen.

   See homepage-hero-fix.js for the second half (hero height on browsers
   without dvh support). */

/* IMPORTANT: the hero is a slider. Slides whose artwork already has the words
   baked in get a `hide-overlay` class from the slider script, which drops
   .hero-redesign__content to opacity:0 on purpose. Every selector here is
   scoped with :not(.hide-overlay) so this failsafe never puts the live text
   back on top of a slide that is showing its own. */

@keyframes ahoHeroReveal {
    to {
        opacity: 1;
        transform: none;
    }
}

section.hero-redesign:not(.hide-overlay) .hero-redesign__eyebrow,
section.hero-redesign:not(.hide-overlay) .hero-redesign__title,
section.hero-redesign:not(.hide-overlay) .hero-redesign__rule,
section.hero-redesign:not(.hide-overlay) .hero-redesign__tagline,
section.hero-redesign:not(.hide-overlay) .hero-redesign__actions {
    animation: ahoHeroReveal .6s ease 4s forwards;
}

/* Someone arriving with reduced motion gets the text immediately rather than
   sitting through a 4s wait for a failsafe. */
@media (prefers-reduced-motion: reduce) {

    section.hero-redesign:not(.hide-overlay) .hero-redesign__eyebrow,
    section.hero-redesign:not(.hide-overlay) .hero-redesign__title,
    section.hero-redesign:not(.hide-overlay) .hero-redesign__rule,
    section.hero-redesign:not(.hide-overlay) .hero-redesign__tagline,
    section.hero-redesign:not(.hide-overlay) .hero-redesign__actions {
        animation-delay: 0s;
    }
}

/* ---- Banner: show all of it ------------------------------------------------
   The banners carry their wording baked into the artwork:

       banner_video_mobile.mp4    500 x 800   (5:8)   portrait
       banner_video_desktop.mp4  1920 x 1080  (16:9)  landscape

   index.html gives the hero the full viewport height and fills it with
   `object-fit: cover` pinned to the top:

       .hero-redesign{height:100vh;height:100dvh}
       .hero-slide-video[data-i="0"]{object-position:50% 0%!important}

   Cover fills the frame by discarding whatever does not fit, so on a screen
   that is not exactly 5:8 part of the banner is always lost — anchored to the
   top that was the wording underneath, anchored to the bottom it would have
   been Gurudevshri. No anchoring avoids it, and `contain` only trades the crop
   for empty strips down the sides.

   So on portrait screens the hero takes the banner's own shape instead of the
   viewport's: full width, height set by the 5:8 ratio. Cover then has nothing
   to discard, so the whole banner is on screen — Gurudevshri and the wording —
   edge to edge with no strips. Where the banner is taller than the screen
   (a 550x700 window, say) the wording sits just below the fold.

   Desktop is untouched: the landscape banner is close enough to a desktop
   window that cover loses nothing worth keeping.

   The slide <video> carries its URL on a child <source> rather than a src
   attribute, so it cannot be matched on file name; the portrait banner is
   instead identified by the same aspect-ratio test the slider itself uses to
   choose it. `!important` here also beats the inline height that
   homepage-hero-fix.js sets on browsers without `dvh`. */

@media (max-aspect-ratio: 21/20) {

    section.hero-redesign {
        height: auto !important;
        aspect-ratio: 500 / 800;
        background: #291618;
    }

    section.hero-redesign .hero-slide-video[data-i="0"],
    section.hero-redesign .hero-slide-image[data-i="0"] {
        object-fit: cover !important;
        object-position: 50% 50% !important;
    }
}