/* =========================================================
   MAHAJAN — PREMIUM BRAND REVEAL
========================================================= */

:root {

    --pink: #d90068;
    --pink-light: #ff9fc7;
    --pink-soft: #ffd8e8;

    --white: #ffffff;

    --background: #fff9fc;

    --text: #292329;

    --muted: #8f838a;

}


/* =========================================================
   RESET
========================================================= */

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html,
body {

    width: 100%;
    height: 100%;

    overflow: hidden;

}


body {

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

    background:
        var(--background);

}


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

.mahajan-reveal {

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 50% 46%,
            rgba(
                255,
                197,
                222,
                0.38
            ),
            transparent 27%
        ),

        radial-gradient(
            circle at 50% 50%,
            rgba(
                255,
                238,
                246,
                0.8
            ),
            transparent 65%
        ),

        var(--background);

    color:
        var(--text);

}


/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.reveal-background {

    position: absolute;

    inset: 0;

    pointer-events: none;

}


.background-glow {

    position: absolute;

    width: 45vw;
    height: 45vw;

    border-radius: 50%;

    filter: blur(80px);

    opacity: 0.28;

}


.background-glow:not(.glow-left):not(.glow-right) {

    left: 50%;
    top: 50%;

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

    background:
        rgba(
            255,
            152,
            198,
            0.18
        );

}


.glow-left {

    left: -20%;
    top: 20%;

    background:
        rgba(
            255,
            176,
            211,
            0.13
        );

}


.glow-right {

    right: -20%;
    bottom: 10%;

    background:
        rgba(
            255,
            188,
            218,
            0.13
        );

}


/* =========================================================
   TEMPLE ART
========================================================= */

.temple-art {

    position: absolute;

    bottom: -90px;

    width: 360px;
    height: 560px;

    color:
        rgba(
            217,
            0,
            104,
            0.10
        );

    opacity: 0.75;

    z-index: 1;

    pointer-events: none;

}


.temple-art svg {

    width: 100%;
    height: 100%;

}


.temple-left {

    left: -50px;

}


.temple-right {

    right: -50px;

    transform:
        scaleX(-1);

}


.temple-left,
.temple-right {

    animation:
        templeBreathing
        8s
        ease-in-out
        infinite
        alternate;

}


@keyframes templeBreathing {

    from {

        transform:
            translateY(8px);

        opacity:
            0.55;

    }

    to {

        transform:
            translateY(-8px);

        opacity:
            0.82;

    }

}


/* =========================================================
   SACRED RINGS
========================================================= */

.sacred-rings {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 720px;
    height: 720px;

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

    pointer-events: none;

    z-index: 2;

}


.sacred-rings span {

    position: absolute;

    left: 50%;
    top: 50%;

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

    border:
        1px solid
        rgba(
            217,
            0,
            104,
            0.075
        );

    border-radius: 50%;

}


.sacred-rings span:nth-child(1) {

    width: 220px;
    height: 220px;

}


.sacred-rings span:nth-child(2) {

    width: 320px;
    height: 320px;

}


.sacred-rings span:nth-child(3) {

    width: 420px;
    height: 420px;

}


.sacred-rings span:nth-child(4) {

    width: 540px;
    height: 540px;

}


.sacred-rings span:nth-child(5) {

    width: 680px;
    height: 680px;

}


.sacred-rings {

    animation:
        ringsRotate
        35s
        linear
        infinite;

}


@keyframes ringsRotate {

    from {

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(0deg);

    }

    to {

        transform:
            translate(
                -50%,
                -50%
            )
            rotate(360deg);

    }

}


/* =========================================================
   PETALS
========================================================= */

.petals {

    position: absolute;

    inset: 0;

    z-index: 7;

    pointer-events: none;

    overflow: hidden;

}


.petal {

    position: absolute;

    width: 22px;
    height: 12px;

    background:
        linear-gradient(
            135deg,
            #ff9dc5,
            #d90068
        );

    border-radius:
        100% 0
        100% 0;

    opacity: 0.72;

    filter:
        blur(0.2px)
        drop-shadow(
            0 7px 8px
            rgba(
                217,
                0,
                104,
                0.12
            )
        );

    transform-origin:
        0 100%;

}


/* =========================================================
   PETAL POSITIONS
========================================================= */

.petal-1 {
    left: 4%;
    top: 18%;
    --duration: 9s;
    --delay: -2s;
}

.petal-2 {
    left: 15%;
    top: 4%;
    --duration: 11s;
    --delay: -7s;
}

.petal-3 {
    left: 27%;
    top: 20%;
    --duration: 8s;
    --delay: -3s;
}

.petal-4 {
    left: 38%;
    top: 7%;
    --duration: 12s;
    --delay: -8s;
}

.petal-5 {
    left: 52%;
    top: 14%;
    --duration: 10s;
    --delay: -5s;
}

.petal-6 {
    left: 67%;
    top: 5%;
    --duration: 9s;
    --delay: -2s;
}

.petal-7 {
    left: 81%;
    top: 17%;
    --duration: 12s;
    --delay: -6s;
}

.petal-8 {
    left: 92%;
    top: 31%;
    --duration: 8s;
    --delay: -4s;
}

.petal-9 {
    left: 7%;
    top: 47%;
    --duration: 11s;
    --delay: -9s;
}

.petal-10 {
    left: 19%;
    top: 62%;
    --duration: 9s;
    --delay: -5s;
}

.petal-11 {
    left: 31%;
    top: 72%;
    --duration: 12s;
    --delay: -3s;
}

.petal-12 {
    left: 47%;
    top: 82%;
    --duration: 10s;
    --delay: -7s;
}

.petal-13 {
    left: 61%;
    top: 72%;
    --duration: 9s;
    --delay: -1s;
}

.petal-14 {
    left: 75%;
    top: 62%;
    --duration: 11s;
    --delay: -8s;
}

.petal-15 {
    left: 89%;
    top: 72%;
    --duration: 10s;
    --delay: -5s;
}

.petal-16 {
    left: 3%;
    top: 82%;
    --duration: 13s;
    --delay: -6s;
}

.petal-17 {
    left: 40%;
    top: 42%;
    --duration: 14s;
    --delay: -10s;
}

.petal-18 {
    left: 72%;
    top: 40%;
    --duration: 12s;
    --delay: -3s;
}

.petal-19 {
    left: 84%;
    top: 51%;
    --duration: 9s;
    --delay: -6s;
}

.petal-20 {
    left: 55%;
    top: 55%;
    --duration: 13s;
    --delay: -4s;
}


/* =========================================================
   PETAL MOTION
========================================================= */

.petal {

    animation:
        petalFloat
        var(--duration)
        var(--delay)
        linear
        infinite;

}


@keyframes petalFloat {

    0% {

        transform:
            translate3d(
                -20px,
                -20px,
                0
            )
            rotate(0deg)
            scale(0.7);

    }

    25% {

        transform:
            translate3d(
                35px,
                25px,
                0
            )
            rotate(110deg)
            scale(1);

    }

    50% {

        transform:
            translate3d(
                -30px,
                70px,
                0
            )
            rotate(210deg)
            scale(0.85);

    }

    75% {

        transform:
            translate3d(
                50px,
                110px,
                0
            )
            rotate(290deg)
            scale(1.08);

    }

    100% {

        transform:
            translate3d(
                -40px,
                160px,
                0
            )
            rotate(400deg)
            scale(0.7);

    }

}


/* =========================================================
   TOP
========================================================= */

.reveal-top {

    position: absolute;

    top: 28px;

    left: 50px;
    right: 50px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 30;

}


.reveal-mini-brand {

    width: 58px;
    height: 58px;

    border-radius: 18px;

    display: flex;

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

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    box-shadow:
        0 15px 40px
        rgba(
            217,
            0,
            104,
            0.08
        );

}


.reveal-mini-brand img {

    width: 42px;

}


.reveal-top-label {

    display: flex;

    align-items: center;

    gap: 15px;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.28em;

    color: #7f7379;

}


.reveal-top-label span {

    width: 75px;

    height: 1px;

    background:
        rgba(
            217,
            0,
            104,
            0.45
        );

}


/* =========================================================
   MAIN STAGE
========================================================= */

.reveal-stage {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 100%;

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

    text-align: center;

    z-index: 20;

}


/* =========================================================
   EYEBROW
========================================================= */

.reveal-eyebrow {

    display: flex;

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

    gap: 18px;

    margin-bottom: 35px;

    opacity: 0;

}


.reveal-eyebrow span {

    width: 58px;

    height: 1px;

    background:
        rgba(
            217,
            0,
            104,
            0.48
        );

}


.reveal-eyebrow p {

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.3em;

    color:
        #766c72;

}


/* =========================================================
   MAHAJAN TYPOGRAPHY
========================================================= */

.mahajan-word {

    display: flex;

    justify-content: center;

    /*
     * Baseline is important because J has a descender.
     */
    align-items: baseline;

    width: 100%;

    font-family:
        "Cormorant Garamond",
        "Times New Roman",
        serif;

    font-size:
        clamp(
            110px,
            16vw,
            245px
        );

    font-weight: 700;

    /*
     * J needs enough vertical space.
     */
    line-height: 1;

    letter-spacing:
        -0.035em;

    white-space: nowrap;

    position: relative;

    z-index: 25;

}


/* =========================================================
   LETTERS
========================================================= */

.letter {

    display: inline-block;

    position: relative;

    will-change:
        transform,
        opacity;

    background:
        linear-gradient(
            180deg,
            #c6005e 0%,
            #ed4388 30%,
            #ffffff 55%,
            #e62b78 72%,
            #b80055 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    color:
        transparent;

    filter:
        drop-shadow(
            0 3px 0
            rgba(
                255,
                255,
                255,
                0.7
            )
        )
        drop-shadow(
            0 12px 25px
            rgba(
                217,
                0,
                104,
                0.14
            )
        );

}


/* =========================================================
   J — SPECIAL TYPOGRAPHY FIX
========================================================= */

.letter-j {

    /*
     * The J is deliberately given more vertical
     * breathing space than the other letters.
     */

    line-height: 1.05;

    font-size: 0.94em;

    margin-left: 0.025em;

    margin-right: 0.025em;

    overflow: visible;

    z-index: 8;

}


/* =========================================================
   PRODUCT
========================================================= */

.reveal-product-stage {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 280px;
    height: 280px;

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

    z-index: 40;

    pointer-events: none;

}


.reveal-product {

    position: absolute;

    inset: 0;

    display: flex;

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

    opacity: 0;

    visibility: hidden;

}


.reveal-product-image {

    width: 250px;
    height: 250px;

    display: flex;

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

}


.reveal-product-image img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 35px 35px
            rgba(
                110,
                25,
                65,
                0.18
            )
        );

}


.reveal-product-info {

    position: absolute;

    left: 50%;

    bottom: -35px;

    transform:
        translateX(-50%);

    display: flex;

    gap: 9px;

    white-space: nowrap;

    font-size: 8px;

    letter-spacing: 0.17em;

    text-transform: uppercase;

}


.product-number {

    color:
        var(--pink);

    font-weight: 700;

}


.product-name {

    color:
        #887c82;

}


/* =========================================================
   SUBTITLE
========================================================= */

.reveal-subtitle {

    margin-top: 55px;

    opacity: 0;

}


.reveal-subtitle .gujarati {

    display: block;

    color:
        var(--pink);

    font-family:
        "Noto Sans Gujarati",
        sans-serif;

    font-size: 30px;

}


.reveal-subtitle .english {

    display: block;

    margin-top: 10px;

    font-size: 12px;

    letter-spacing: 0.08em;

    color:
        #756a71;

}


.lotus-mark {

    margin-top: 18px;

    color:
        var(--pink);

    font-size: 25px;

}


/* =========================================================
   BOTTOM
========================================================= */

.reveal-bottom {

    position: absolute;

    left: 60px;
    bottom: 28px;

    display: flex;

    align-items: center;

    gap: 12px;

    z-index: 30;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 0.26em;

    color:
        #81767c;

}


.reveal-bottom i {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--pink);

}


/* =========================================================
   COUNTER
========================================================= */

.reveal-progress {

    position: absolute;

    right: 55px;
    bottom: 28px;

    z-index: 30;

    display: flex;

    gap: 7px;

    align-items: center;

    font-size: 11px;

    letter-spacing: 0.12em;

    color:
        #81767c;

}


.reveal-progress strong {

    color:
        var(--pink);

    font-size: 14px;

}


/* =========================================================
   EXIT
========================================================= */

.reveal-exit {

    position: absolute;

    inset: 0;

    background:
        var(--pink);

    z-index: 100;

    transform:
        scaleY(0);

    transform-origin:
        bottom;

    pointer-events: none;

}


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

@media(max-width: 768px) {


    .reveal-top {

        left: 20px;
        right: 20px;

        top: 18px;

    }


    .reveal-mini-brand {

        width: 45px;
        height: 45px;

        border-radius: 13px;

    }


    .reveal-mini-brand img {

        width: 32px;

    }


    .reveal-top-label {

        font-size: 6px;

        letter-spacing: 0.18em;

    }


    .reveal-top-label span {

        width: 35px;

    }


    .temple-art {

        width: 220px;

        height: 380px;

        bottom: -50px;

    }


    .temple-left {

        left: -90px;

    }


    .temple-right {

        right: -90px;

    }


    .sacred-rings {

        width: 450px;
        height: 450px;

    }


    .mahajan-word {

        font-size: 20vw;

        letter-spacing:
            -0.07em;

    }


    .reveal-eyebrow {

        gap: 10px;

        margin-bottom: 25px;

    }


    .reveal-eyebrow span {

        width: 25px;

    }


    .reveal-eyebrow p {

        font-size: 7px;

        letter-spacing:
            0.18em;

    }


    .reveal-product-stage {

        width: 190px;
        height: 190px;

    }


    .reveal-product-image {

        width: 175px;
        height: 175px;

    }


    .reveal-subtitle {

        margin-top: 40px;

    }


    .reveal-subtitle .gujarati {

        font-size: 21px;

    }


    .reveal-subtitle .english {

        width: 80%;

        margin-left: auto;
        margin-right: auto;

        font-size: 9px;

    }


    .reveal-bottom {

        left: 20px;

        bottom: 18px;

        font-size: 6px;

        gap: 7px;

    }


    .reveal-progress {

        right: 20px;

        bottom: 18px;

    }


    .petal {

        transform:
            scale(0.7);

    }

}