/* =========================
   Base
========================= */

html,
body{
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    overscroll-behavior-y: none;

    touch-action: manipulation;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;
}

body{
    font-family: "Cinzel", sans-serif;

    background: #fff8ee;

    letter-spacing: 2px;

    font-size: clamp(10px, 1vw + 0.5vh, 15px);
}

/* =========================
   Main Layout
========================= */

.container{
    position: relative;

    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-layout{
    display: flex;
    flex-direction: column;

    width: 100%;
    flex: 1;
}

/* =========================
   Ganesh
========================= */

.ganesh{
    display: flex;
    justify-content: center;

    padding: 20px 0 10px;

    z-index: 2;
}

/* =========================
   Main Image
========================= */

.main-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
}

.main{
    width: min(70vw, 250px);
    height: auto;

    opacity: 0;

    transform: scale(0.92);

    animation:
        mainReveal 2s ease forwards;

    animation-delay: 3s;
}

/* =========================
   Greeting Area
========================= */

.middle{
    position: relative;

    flex: 1;
    width: 100%;

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

    overflow: visible;

    z-index: 5;
}

.greeting{
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;

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

    padding: 20px 24px;

    box-sizing: border-box;

    text-align: center;

    overflow: visible;

    /* DYNAMIC TEXT SCALING */
    font-size: clamp(12px, 1vw + 1vh, 22px);

    line-height: 1.25;

    opacity: 0;
    visibility: hidden;

    transform: translateY(40px);

    filter: blur(8px);

    transition:
        opacity 2s ease,
        transform 2s cubic-bezier(0.22,1,0.36,1),
        filter 2s ease,
        visibility 2s ease;

    pointer-events: none;

    z-index: 20;
}

.greeting.active{
    opacity: 1;
    visibility: visible;

    transform: translateY(0);

    filter: blur(0);

    pointer-events: auto;
}

.greeting.enter-up,
.greeting.enter-down{
    opacity: 1;

    transform: translateY(0);

    filter: blur(0);
}

.greeting.exit-up{
    opacity: 0;

    transform: translateY(-40px);

    filter: blur(8px);
}

.greeting.exit-down{
    opacity: 0;

    transform: translateY(40px);

    filter: blur(8px);
}

.greeting a,
.greeting button{
    pointer-events: auto;

    position: relative;

    z-index: 9999;
}

/* =========================
   Typography
========================= */

.heading{
    font-size: 1.8em;

    line-height: 1.1;

    margin: 0.4em 0;
}

.name{
    font-size: 2.5em;

    line-height: 1.05;

    margin: 0.3em 0;
}

.highlight{
    font-family: "Great Vibes", sans-serif;

    font-size: 3.4em;

    line-height: 0.95;

    color: rgb(182, 0, 0);

    margin: 0;
}

/* =========================
   Decorative Wrapper
========================= */

.wrapper{
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

/* =========================
   Decorations
========================= */

.leaves-top-left,
.leaves-top-right,
.leaves-bottom-left,
.leaves-bottom-right,
.top-leaf-bg,
.bottom-leaf-bg{
    position: absolute;
}

.leaves-top-left{
    top: -30px;
    left: -30px;
}

.leaves-top-right{
    top: -30px;
    right: -30px;

    transform: scaleX(-1);
}

.leaves-bottom-left{
    bottom: -30px;
    left: -30px;

    transform: scaleY(-1);
}

.leaves-bottom-right{
    bottom: -30px;
    right: -30px;

    transform: scale(-1,-1);
}

.top-leaf-bg{
    top: -30px;
    left: -30px;
}

.bottom-leaf-bg{
    bottom: -30px;
    right: -30px;

    transform: scale(-1,-1);
}

/* =========================
   CORNER LEAF ANIMATIONS
========================= */

.leaves-top-left{
    opacity: 0;

    transform: translateX(-120px);

    animation:
        slideLeft 1.8s cubic-bezier(0.22,1,0.36,1)
        forwards;
}

.leaves-top-right{
    opacity: 0;

    transform:
        translateX(120px)
        scaleX(-1);

    animation:
        slideRight 1.8s cubic-bezier(0.22,1,0.36,1)
        forwards;
}

.leaves-bottom-left{
    opacity: 0;

    transform:
        translateX(-120px)
        scaleY(-1);

    animation:
        slideBottomLeft 1.8s cubic-bezier(0.22,1,0.36,1)
        forwards;
}

.leaves-bottom-right{
    opacity: 0;

    transform:
        translateX(120px)
        scale(-1,-1);

    animation:
        slideBottomRight 1.8s cubic-bezier(0.22,1,0.36,1)
        forwards;
}

/* =========================
   Decor
========================= */

.decorL,
.decorR{
    position: absolute;

    top: -130px;

    opacity: 0;

    transform: translateY(-120px);

    animation:
        decorDrop 1.5s cubic-bezier(0.22,1,0.36,1)
        forwards;

    animation-delay: 2s;
}

.decorL{
    left: 70px;
}

.decorR{
    right: 70px;
}

/* =========================
   Flowers
========================= */

.flower-left,
.flower-right{
    position: absolute;

    opacity: 0;

    scale: 0.2;

    filter: blur(10px);

    animation:
        sprayPaint 1.6s ease-out forwards;

    animation-delay: 1.2s;

    z-index: -1;
}

.flower-left{
    top: 35%;
    left: -3%;
}

.flower-right{
    top: 20%;
    right: -3%;
}

/* =========================
   Flying Leaves
========================= */

.flying-leaves{
    position: fixed;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}

.leaf{
    position: absolute;

    width: 7px;
    height: 12px;

    border-radius: 0 100% 0 100%;

    background:
        linear-gradient(
            135deg,
            rgba(24, 99, 24, 0.72),
            rgba(71, 130, 76, 0.65)
        );

    filter: blur(0.12px);

    box-shadow:
        0 0 2px rgba(60,180,75,0.08);

    animation-name: flyLeaf;
    animation-iteration-count: infinite;

    will-change: transform, opacity;
}

.leaf1{ left:2%; top:-15%; opacity:.22; scale:.7; animation-duration:14s; }
.leaf2{ left:8%; top:-40%; opacity:.18; scale:.9; animation-duration:18s; }
.leaf3{ left:14%; top:-65%; opacity:.26; scale:.8; animation-duration:15s; }
.leaf4{ left:20%; top:-25%; opacity:.20; scale:1; animation-duration:20s; }
.leaf5{ left:28%; top:-55%; opacity:.15; scale:.6; animation-duration:16s; }
.leaf6{ left:35%; top:-80%; opacity:.25; scale:1.1; animation-duration:13s; }
.leaf7{ left:42%; top:-35%; opacity:.18; scale:.7; animation-duration:21s; }
.leaf8{ left:50%; top:-60%; opacity:.28; scale:.9; animation-duration:15s; }
.leaf9{ left:58%; top:-20%; opacity:.17; scale:.8; animation-duration:18s; }
.leaf10{ left:64%; top:-50%; opacity:.24; scale:1; animation-duration:14s; }
.leaf11{ left:70%; top:-75%; opacity:.14; scale:.6; animation-duration:22s; }
.leaf12{ left:76%; top:-15%; opacity:.27; scale:.9; animation-duration:16s; }
.leaf13{ left:82%; top:-58%; opacity:.19; scale:.7; animation-duration:19s; }
.leaf14{ left:88%; top:-30%; opacity:.26; scale:1.1; animation-duration:13s; }
.leaf15{ left:94%; top:-85%; opacity:.18; scale:.8; animation-duration:20s; }

/* =========================
   Intro Screen
========================= */

.intro-screen{
    position: fixed;
    inset: 0;

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

    background:
        rgba(255,248,238,0.15);

    z-index: 99999;

    transition:
        opacity 1.5s ease,
        visibility 1.5s ease;
}

.intro-screen.hide{
    opacity: 0;

    visibility: hidden;
}

.intro-content{
    text-align: center;

    opacity: 0;

    transform: translateY(20px);

    animation:
        introReveal 2s cubic-bezier(0.22,1,0.36,1)
        forwards;
}

.mantra-bn{
    font-family: "Mina", sans-serif;

    font-size: 30px;

    line-height: 2;

    color: rgb(145,0,0);

    letter-spacing: 1px;

    margin-bottom: 40px;
}

/* =========================
   Buttons
========================= */

.begin-btn,
.map-btn{
    display: inline-flex;

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

    align-self: center;

    position: relative;

    z-index: 9999;

    pointer-events: auto;

    cursor: pointer;

    margin-top: clamp(12px, 2vh, 22px);

    padding:
        clamp(8px, 1vh, 14px)
        clamp(18px, 2vw, 30px);

    border-radius: 999px;

    border: 1.5px solid rgba(212, 175, 55, 0.85);

    text-decoration: none;

    font-family: "Cinzel", sans-serif;

    /* Dynamic sizing from greeting */
    font-size: 0.72em;

    letter-spacing: 0.18em;

    white-space: nowrap;

    color: #fff8ee;

    background:
        linear-gradient(
            180deg,
            rgb(170,20,20),
            rgb(120,0,0)
        );

    box-shadow:
        0 6px 18px rgba(120,0,0,.18),
        0 0 0 1px rgba(255,215,120,.25),
        inset 0 1px 1px rgba(255,255,255,.15),
        inset 0 -2px 4px rgba(0,0,0,.18);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        opacity .3s ease;

    -webkit-tap-highlight-color: transparent;
}

.map-btn:hover{
    transform: translateY(-2px);

    opacity: .96;

    box-shadow:
        0 10px 24px rgba(120,0,0,.24),
        0 0 0 1px rgba(255,215,120,.4),
        inset 0 1px 1px rgba(255,255,255,.18),
        inset 0 -2px 4px rgba(0,0,0,.18);
}

.map-btn:active{
    transform:
        translateY(2px)
        scale(.98);

    box-shadow:
        0 2px 8px rgba(120,0,0,.18),
        0 0 0 1px rgba(255,215,120,.2),
        inset 0 3px 6px rgba(0,0,0,.18);
}

.map-btn:focus{
    outline: none;
}

.begin-btn{
    padding: 14px 34px;

    font-size: 11px;

    letter-spacing: 4px;

    box-shadow:
        0 6px 18px rgba(120,0,0,.22),
        inset 0 1px 1px rgba(255,255,255,.18),
        inset 0 -2px 4px rgba(0,0,0,.18);
}

.begin-btn:hover,
.map-btn:hover{
    transform: translateY(-2px);

    opacity: .96;
}

.begin-btn:active,
.map-btn:active{
    transform:
        translateY(2px)
        scale(.98);
}

/* =========================
   Preload
========================= */

.preload .leaf,
.preload .leaves-top-left,
.preload .leaves-top-right,
.preload .leaves-bottom-left,
.preload .leaves-bottom-right,
.preload .flower-left,
.preload .flower-right,
.preload .decorL,
.preload .decorR,
.preload .main,
.preload .greeting{
    animation: none !important;

    opacity: 0 !important;
}

/* =========================
   Keyframes
========================= */

@keyframes flyLeaf{

    0%{
        transform:
            translate3d(0,-20vh,0)
            rotate(0deg);

        opacity: 0;
    }

    8%,
    92%{
        opacity: inherit;
    }

    30%{
        transform:
            translate3d(14px,30vh,0)
            rotate(110deg);
    }

    65%{
        transform:
            translate3d(-12px,70vh,0)
            rotate(240deg);
    }

    100%{
        transform:
            translate3d(8px,120vh,0)
            rotate(360deg);

        opacity: 0;
    }
}

@keyframes slideLeft{
    to{
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideRight{
    to{
        opacity: 1;
        transform: translateX(0) scaleX(-1);
    }
}

@keyframes slideBottomLeft{
    to{
        opacity: 1;
        transform: translateX(0) scaleY(-1);
    }
}

@keyframes slideBottomRight{
    to{
        opacity: 1;
        transform: translateX(0) scale(-1,-1);
    }
}

@keyframes sprayPaint{

    0%{
        opacity: 0;

        scale: .2;

        filter: blur(12px);
    }

    60%{
        opacity: 1;

        scale: 1.08;

        filter: blur(0);
    }

    100%{
        opacity: 1;

        scale: 1;

        filter: blur(0);
    }
}

@keyframes decorDrop{
    to{
        opacity: 1;

        transform: translateY(0);
    }
}

@keyframes mainReveal{
    to{
        opacity: 1;

        transform: scale(1);
    }
}

@keyframes introReveal{
    to{
        opacity: 1;

        transform: translateY(0);
    }
}

/* =========================
   Desktop Layout
========================= */

@media (min-width: 900px){

    .content-layout{
        flex-direction: row;

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

        gap: 40px;

        padding: 40px 60px;

        box-sizing: border-box;
    }

    .main-wrapper{
        flex: 0 0 40%;
    }

    .main{
        width: min(32vw, 500px);
    }

    .middle{
        flex: 1;

        min-height: 70vh;
    }

    .greeting{
        font-size: clamp(14px, 0.9vw + 1.1vh, 26px);
    }
}