/* =========================================================
   AMRUTHA LAKE VISTA — SINGLE WAVE PRELOADER
   ---------------------------------------------------------
   FINAL:
   - One SVG wave
   - One solid colour
   - Wave itself is the water
   - Wave rises while moving horizontally
   - Entire viewport becomes the same colour
   - Logo travels to navbar
   - Logo never fades
   - Water fades / hero reveals
   - No extra water layer
   - Mobile keeps one fixed-shape wave
   ========================================================= */

body.alv-preload {
    overflow: hidden !important;
}

/* ---------------------------------------------------------
   PRELOADER
   --------------------------------------------------------- */

#alv-preloader {
    position: fixed;
    inset: 0;
    z-index: 12000;

    overflow: hidden;
    isolation: isolate;

    /*
     * Only the initial empty state is dark.
     * During the final handoff this background becomes
     * transparent, revealing the hero underneath.
     */
    background: #061b2b;

    pointer-events: none;

    transition:
        background-color 700ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * IMPORTANT:
 * The preloader container itself NEVER fades.
 * This is what lets the travelling logo remain visible.
 */
#alv-preloader.is-exiting {
    background: transparent;
}

/* ---------------------------------------------------------
   NAVBAR
   --------------------------------------------------------- */

body.alv-preload .site-navbar > .navbar {
    opacity: 0 !important;

    transform:
        translateY(-8px);

    transition:
        opacity 500ms
        cubic-bezier(0.22, 1, 0.36, 1),

        transform 500ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

body.alv-preload.alv-nav-revealed .site-navbar > .navbar {
    opacity: 1 !important;

    transform:
        translateY(0);
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

body.alv-preload #home {
    opacity: 0;

    transform:
        scale(1.035);

    transform-origin:
        center center;

    transition:
        opacity 700ms
        cubic-bezier(0.22, 1, 0.36, 1),

        transform 1100ms
        cubic-bezier(0.22, 1, 0.36, 1);
}

body.alv-preload.alv-page-revealed #home {
    opacity: 1;

    transform:
        scale(1);
}

/* =========================================================
   SINGLE WAVE
   ---------------------------------------------------------
   The SVG itself contains:
   - the curved top
   - the complete solid area underneath
   Therefore there is NO separate water element and no
   colour seam.
   ========================================================= */

.alv-wave-main {
    position: absolute;

    /*
     * Make the wave surface intentionally larger than the viewport.
     * The extra width stays outside the screen, so the SVG's hard
     * right/left edge can never become visible during the movement.
     */
    width: 200vw;

    /*
     * Keep the tall water body exactly as before.
     */
    height: 120vh;

    /*
     * Extend the wave beyond BOTH sides of the viewport.
     */
    left: -50vw;

    /*
     * Start completely below the viewport.
     */
    top: 0;

    --wave-x: 0px;
    --wave-y: 100vh;

    transform: translate3d(var(--wave-x), var(--wave-y), 0);

    /*
     * ONE colour.
     */
    fill: #0f3f60;

    z-index: 2;

    pointer-events: none;

    will-change:
        transform,
        opacity;
}

.alv-wave-main path {
    vector-effect:
        non-scaling-stroke;
}

/* ---------------------------------------------------------
   FINAL WATER FADE
   --------------------------------------------------------- */

#alv-preloader.is-exiting .alv-wave-main {
    opacity: 0 !important;

    transition:
        opacity 750ms
        cubic-bezier(0.22, 1, 0.36, 1) !important;
}

#alv-preloader.is-exiting .alv-wave-main {
    animation: none !important;
}

/* =========================================================
   CENTRED LOGO
   ========================================================= */

/*
 * Smooth physical travel from centre to navbar.
 * Only transform changes; opacity is never animated here.
 */
#alv-preloader.is-flight .alv-pre-mark {
    transition:
        transform 1150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.alv-pre-mark {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 8;

    width:
        min(280px, 62vw);

    text-align: center;

    transform:
        translate(-50%, -50%);

    transform-origin:
        50% 50%;

    /*
     * IMPORTANT:
     * There is NO opacity transition on the main logo.
     */
    will-change:
        transform;
}

.alv-pre-logo-wrap {
    position: relative;

    width: 100%;
}

#alvPreLogo {
    display: block;

    width: 100%;
    height: auto;

    position: relative;
    z-index: 2;

    filter:
        drop-shadow(
            0 10px 26px rgba(0,0,0,0.22)
        );
}

/* ---------------------------------------------------------
   Reflection
   --------------------------------------------------------- */

.alv-pre-reflection {
    position: absolute;

    left: 0;
    right: 0;

    top:
        calc(100% + 8px);

    height: 34%;

    overflow: hidden;

    opacity: 0.13;

    transform:
        scaleY(-1);

    filter:
        blur(1.2px);

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.75),
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.75),
            transparent
        );
}

.alv-pre-reflection img {
    display: block;

    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------
   Tagline
   --------------------------------------------------------- */

.alv-pre-label {
    display: block;

    margin-top: 18px;

    color:
        rgba(255,255,255,0.94);

    font-family:
        'Inter',
        sans-serif;

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 4px;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    transition:
        opacity 350ms ease,
        transform 350ms ease;
}

/*
 * Tagline disappears before the logo travels.
 * The actual logo remains fully visible.
 */
#alv-preloader.is-flight .alv-pre-label {
    opacity: 0;

    transform:
        translateY(-8px);
}

/* ---------------------------------------------------------
   Bottom micro label
   --------------------------------------------------------- */

.alv-pre-status {
    position: absolute;

    left: 50%;
    bottom: 26px;

    z-index: 7;

    transform:
        translateX(-50%);

    color:
        rgba(255,255,255,0.42);

    font-family:
        'Inter',
        sans-serif;

    font-size: 7px;

    letter-spacing: 3px;

    text-transform:
        uppercase;

    white-space:
        nowrap;

    transition:
        opacity 300ms ease;
}

#alv-preloader.is-exiting .alv-pre-status {
    opacity: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    /*
     * Same single wave.
     * No second layer.
     * Fixed 2200px width prevents the wave from becoming
     * vertically compressed just because the viewport is narrow.
     */
    .alv-wave-main {
        width: 220vw;
        height: 120vh;
        left: 50%;
        --wave-x: 0px;
        --wave-y: 100vh;
        transform:
            translateX(-50%)
            translate3d(var(--wave-x), var(--wave-y), 0);
    }

    .alv-pre-mark {
        width:
            min(230px, 62vw);
    }

    .alv-pre-label {
        font-size: 8px;

        letter-spacing: 3px;
    }

    .alv-pre-status {
        bottom: 18px;

        font-size: 6px;

        letter-spacing: 2px;
    }
}

@media (max-width: 480px) {

    .alv-wave-main {
        width: 220vw;
        height: 120vh;
        left: 50%;
        --wave-x: 0px;
        --wave-y: 100vh;
        transform:
            translateX(-50%)
            translate3d(var(--wave-x), var(--wave-y), 0);
    }

    .alv-pre-mark {
        width: 210px;
    }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

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

    #alv-preloader,
    #alv-preloader *,
    body.alv-preload #home,
    body.alv-preload .site-navbar > .navbar {
        animation: none !important;

        transition: none !important;
    }

    .alv-wave-main {
        --wave-x: 0px;
        --wave-y: -20vh;
        transform: translate3d(var(--wave-x), var(--wave-y), 0);
    }

    body.alv-preload #home {
        opacity: 1;

        transform:
            none;
    }
}

/* ---------------------------------------------------------
   MOBILE HERO / NAVBAR LOGO MASK
   --------------------------------------------------------- */

@media (max-width: 768px) {
    .site-navbar {
        z-index: 13000 !important;
    }

    .site-navbar > .navbar {
        background: rgba(8, 29, 43, 0.97) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}


/* =========================================================
   LOGO HANDOFF — HOLD + CROSS-FADE ON HERO EXIT
   ---------------------------------------------------------
   The travelling logo stays at the navbar position after the
   intro. Once the hero is scrolled past, it fades out while
   the real navbar logo fades in at exactly the same position.
   ========================================================= */

.site-navbar .navbar-logo img{
    visibility:hidden;
    opacity:0;
    transition:
        opacity 420ms cubic-bezier(0.22,1,0.36,1),
        visibility 0s linear 420ms;
}

/* Keep the travelling logo alive after the intro handoff. */
#alv-preloader.is-finished .alv-pre-mark{
    visibility:visible !important;
    opacity:1;
    pointer-events:none !important;
    transition:
        opacity 420ms cubic-bezier(0.22,1,0.36,1),
        visibility 0s linear 0s;
}

/* Once hero is passed: cross-fade them at the same position. */
body.alv-hero-passed .site-navbar .navbar-logo img{
    visibility:visible;
    opacity:1;
    transition:
        opacity 420ms cubic-bezier(0.22,1,0.36,1),
        visibility 0s linear 0s;
}

body.alv-hero-passed #alv-preloader.is-finished .alv-pre-mark{
    opacity:0;
    visibility:hidden !important;
    transition:
        opacity 420ms cubic-bezier(0.22,1,0.36,1),
        visibility 0s linear 420ms;
}