/*=========================================================
  BANNER
=========================================================*/

.banner {
    position: relative;

    width: 100%;
    height: 100vh;

    background: url("../images/vinitha.png")
                center center / cover no-repeat;

    display: flex;
    justify-content: center;
    align-items: center;

    /*
        Banner ke effects ko isi banner ke andar contain rakhta hai.
    */
    isolation: isolate;

    overflow: hidden;
}


/*=========================================================
  BLUE CINEMATIC WATER TINT
=========================================================*/

.banner::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            ellipse at 50% 25%,
            rgba(50,200,255,.18),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            rgba(0,45,75,.22),
            rgba(0,10,25,.72)
        );

    /*
        IMPORTANT:
        Background image ko blur nahi karna.
    */

    backdrop-filter:
        brightness(.72)
        saturate(1.2);

    -webkit-backdrop-filter:
        brightness(.72)
        saturate(1.2);

    z-index: 1;

    pointer-events: none;
}


/*=========================================================
  GLASS LIGHT
=========================================================*/

.banner::after {

    content: "";

    position: absolute;

    inset: -20%;

    background:

        linear-gradient(
            115deg,
            transparent 35%,
            rgba(190,240,255,.08) 48%,
            transparent 60%
        );

    transform: rotate(-4deg);

    animation:
        glassLight
        10s ease-in-out
        infinite;

    z-index: 2;

    pointer-events: none;
}


@keyframes glassLight {

    0% {
        transform:
            translateX(-35%)
            rotate(-4deg);
    }

    50% {
        transform:
            translateX(35%)
            rotate(-4deg);
    }

    100% {
        transform:
            translateX(-35%)
            rotate(-4deg);
    }

}


/*=========================================================
  DARK OVERLAY
=========================================================*/

.overlay {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            ellipse at center,
            transparent 15%,
            rgba(0,0,0,.40) 100%
        );

    z-index: 3;

    pointer-events: none;
}


/*=========================================================
  BANNER CONTENT
=========================================================*/

.banner-content {

    position: relative;

    z-index: 10;

    text-align: center;

    color: #fff;

    width: 90%;

    max-width: 900px;
}


.banner-content h1 {

    font-size: 70px;

    font-weight: 700;

    margin-bottom: 15px;

    line-height: 1.2;
}


.banner-content p {

    font-size: 22px;

    font-weight: 300;

    margin-bottom: 30px;
}


.banner-content .btn {

    display: inline-block;

    padding: 15px 40px;

    color: #fff;

    border: 2px solid #fff;

    text-decoration: none;

    transition: .3s;
}


.banner-content .btn:hover {

    background: #fff;

    color: #000;
}


/*=========================================================
  MENU
=========================================================*/

/*
   IMPORTANT:
   Menu ki existing position ko change nahi kar rahe.
   Sirf stacking priority di gayi hai.
*/

.banner #menu {

    z-index: 20;
}


/*=========================================================
  FLOATING LIGHT PARTICLES
=========================================================*/

.particles {

    position: absolute;

    inset: 0;

    z-index: 5;

    pointer-events: none;
}


.particle {

    position: absolute;

    width: 2px;

    height: 2px;

    border-radius: 50%;

    background:
        rgba(190,240,255,.75);

    box-shadow:
        0 0 8px
        rgba(120,220,255,.65);

    animation:
        particleFloat
        var(--time)
        ease-in-out
        infinite alternate;
}


@keyframes particleFloat {

    from {

        transform:
            translateY(0);

        opacity: .2;
    }

    to {

        transform:
            translateY(-35px);

        opacity: .9;
    }

}


/*=========================================================
  LIVE SNOW
=========================================================*/

.snow-container {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 6;
}


.snowflake {

    position: absolute;

    top: -40px;

    width: var(--size);

    height: var(--size);

    border-radius: 50%;

    background:
        rgba(255,255,255,.96);

    opacity:
        var(--opacity);

    filter:
        blur(var(--blur));

    box-shadow:

        0 0 5px
        rgba(255,255,255,.8),

        0 0 14px
        rgba(150,230,255,.35);

    animation:

        snowfall
        var(--duration)
        linear
        infinite,

        snowdrift
        var(--sway)
        ease-in-out
        infinite alternate;
}


@keyframes snowfall {

    0% {

        transform:
            translate3d(0,-50px,0)
            rotate(0deg);
    }

    100% {

        transform:
            translate3d(0,110vh,0)
            rotate(360deg);
    }

}


@keyframes snowdrift {

    0% {
        margin-left: -45px;
    }

    100% {
        margin-left: 45px;
    }

}


/*=========================================================
  WATER SURFACE
=========================================================*/

.water-surface {

    position: absolute;

    inset: 0;

    z-index: 8;

    overflow: hidden;

    pointer-events: none;
}


/*=========================================================
  MAIN RIPPLE
=========================================================*/

.ripple {

    position: absolute;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    transform:
        translate(-50%,-50%)
        scale(.1);

    background:

        radial-gradient(
            circle,
            rgba(160,240,255,.22) 0%,
            rgba(40,180,230,.13) 25%,
            rgba(0,110,180,.07) 50%,
            transparent 72%
        );

    border:
        1.5px solid
        rgba(190,245,255,.72);

    box-shadow:

        0 0 5px
        rgba(150,235,255,.55),

        0 0 18px
        rgba(30,180,240,.25),

        inset 0 0 12px
        rgba(210,250,255,.30);

    animation:
        rippleExpand
        1.8s
        cubic-bezier(.12,.58,.22,1)
        forwards;
}


.ripple::before {

    content: "";

    position: absolute;

    inset: 7px;

    border-radius: 50%;

    border:
        1px solid
        rgba(235,255,255,.78);

    box-shadow:
        0 0 8px
        rgba(180,245,255,.35);
}


.ripple::after {

    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border:
        1px solid
        rgba(80,205,245,.32);
}


@keyframes rippleExpand {

    0% {

        transform:
            translate(-50%,-50%)
            scale(.1);

        opacity: 1;

        filter: blur(0);
    }

    30% {
        opacity: .9;
    }

    60% {
        opacity: .50;
    }

    100% {

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

        opacity: 0;

        filter: blur(1.5px);
    }

}


/*=========================================================
  SECOND WATER WAVE
=========================================================*/

.water-wave {

    position: absolute;

    width: 60px;

    height: 22px;

    border-radius: 50%;

    border:
        1px solid
        rgba(170,240,255,.55);

    box-shadow:

        0 0 10px
        rgba(50,200,245,.25);

    transform:
        translate(-50%,-50%)
        scale(.1);

    animation:
        waveExpand
        1.55s
        ease-out
        forwards;
}


@keyframes waveExpand {

    0% {

        transform:
            translate(-50%,-50%)
            scale(.1);

        opacity: .8;
    }

    100% {

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

        opacity: 0;
    }

}


/*=========================================================
  MOBILE
=========================================================*/

@media (max-width: 768px) {

    .banner {

        height: 100vh;

        /*
            Mobile par image ka RIGHT portion dikhayega.
            50% = center
            75% = right side
            100% = extreme right
        */

        background-position: 75% center;

        background-size: cover;

        background-repeat: no-repeat;
    }


    .banner-content h1 {

        font-size: 42px;
    }


    .banner-content p {

        font-size: 18px;
    }


    .banner-content .btn {

        padding: 12px 28px;
    }

}