/* ============================================================
   DESIGN SYSTEM
============================================================ */

:root {

    --leaf-dark: #1f301d;
    --leaf: #3e572d;
    --leaf-mid: #526c36;
    --leaf-light: #71854a;

    --rice: #f1e5c5;
    --rice-shadow: #cdbd98;

    --maroon: #541c19;
    --maroon-dark: #2a0d0c;

    --terracotta: #a84e2d;
    --orange: #c36c31;

    --mustard: #c99d43;
    --gold: #d5b261;

    --fish: #a74e25;
    --fish-dark: #672719;

    --chicken: #9e4c24;
    --chicken-dark: #5f2418;

    --curry: #a64c20;
    --rasam: #b75a25;

    --cream: #ead9b5;
    --paper: #d6bd91;

    --dark: #160d0a;

    --serif:
        "Cormorant Garamond",
        Georgia,
        serif;

    --sans:
        "DM Sans",
        sans-serif;

    --tamil:
        "Noto Serif Tamil",
        serif;
}


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

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {

    min-height: 100vh;

    overflow-x: hidden;

    background:

        radial-gradient(circle at 50% 20%,
            rgba(150, 73, 38, 0.18),
            transparent 38%),

        linear-gradient(135deg,
            #1b0c09,
            #321512 45%,
            #140907);

    color: var(--cream);

    font-family: var(--sans);
}


/* ============================================================
   VINTAGE FILM GRAIN
============================================================ */

.grain {

    position: fixed;

    inset: -50%;

    z-index: 100;

    pointer-events: none;

    opacity: 0.075;

    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");

    animation:
        grainMove .3s steps(2) infinite;
}

@keyframes grainMove {

    0% {
        transform: translate(0);
    }

    25% {
        transform: translate(2%, -2%);
    }

    50% {
        transform: translate(-2%, 1%);
    }

    75% {
        transform: translate(1%, 2%);
    }

    100% {
        transform: translate(-1%, -1%);
    }
}


/* ============================================================
   VIGNETTE
============================================================ */

.vignette {

    position: fixed;

    inset: 0;

    z-index: 90;

    pointer-events: none;

    background:

        radial-gradient(ellipse at center,
            transparent 32%,
            rgba(0, 0, 0, 0.72) 100%);
}


/* ============================================================
   POINTER LIGHT
============================================================ */

.cursor-light {

    position: fixed;

    width: 480px;
    height: 480px;

    border-radius: 50%;

    pointer-events: none;

    z-index: 1;

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

    background:

        radial-gradient(circle,
            rgba(225, 162, 79, 0.12),
            transparent 68%);

    mix-blend-mode: screen;
}


/* ============================================================
   PAGE
============================================================ */

.page {

    position: relative;

    z-index: 2;

    width: min(1500px,
            100%);

    margin: auto;

    padding:
        80px 32px 0;
}


/* ============================================================
   HERO
============================================================ */

.hero {

    text-align: center;

    max-width: 950px;

    margin:
        0 auto 80px;
}

.ornament-title {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

    margin-bottom: 24px;
}

.ornament-title span {

    width: 70px;

    height: 1px;

    background:

        linear-gradient(90deg,
            transparent,
            var(--gold));
}

.ornament-title span:last-child {

    transform:
        scaleX(-1);
}

.ornament-title p {

    font-family: var(--tamil);

    color: var(--gold);

    font-size: 0.95rem;
}

.eyebrow {

    font-size: 0.6rem;

    letter-spacing: 0.35em;

    color:
        rgba(234,
            217,
            181,
            0.55);

    margin-bottom: 20px;
}

.hero h1 {

    font-family: var(--serif);

    font-size:
        clamp(5rem,
            12vw,
            10rem);

    line-height: 0.7;

    font-weight: 500;

    letter-spacing: -0.06em;

    text-shadow:
        0 10px 40px rgba(0, 0, 0, .45);
}

.hero h1 em {

    display: block;

    color:
        var(--mustard);

    font-style: italic;

    font-weight: 600;
}

.subtitle {

    margin-top: 40px;

    font-family: var(--serif);

    font-size: 1.25rem;

    line-height: 1.5;

    color:
        rgba(234,
            217,
            181,
            0.65);
}

.hero-divider {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    margin-top: 30px;

    color: var(--gold);
}

.hero-divider span {

    width: 70px;

    height: 1px;

    background:
        rgba(213,
            178,
            97,
            0.45);
}


/* ============================================================
   FEAST SECTION
============================================================ */

.feast-section {

    position: relative;

    min-height:
        950px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 80px;
}


/* ============================================================
   WEDDING HALL LAMPS
============================================================ */

.hall-decoration {

    position: absolute;

    top: 25%;

    width: 80px;

    height: 180px;

    opacity: .55;
}

.left-decoration {
    left: 2%;
}

.right-decoration {
    right: 2%;
}

.lamp {

    position: absolute;

    bottom: 0;

    left: 50%;

    transform:
        translateX(-50%);

    width: 48px;

    height: 90px;

    border-radius:
        50% 50% 20% 20%;

    background:
        linear-gradient(90deg,
            #785724,
            #d3af60,
            #72521f);

    box-shadow:
        0 0 35px rgba(210,
            155,
            64,
            0.25);
}

.lamp::before {

    content: "";

    position: absolute;

    width: 90px;

    height: 35px;

    left: -21px;

    top: -12px;

    border-radius: 50%;

    background:
        radial-gradient(ellipse,
            rgba(238, 178, 80, .4),
            transparent 70%);
}


/* ============================================================
   BANANA LEAF
============================================================ */

.banana-leaf {

    position: relative;

    width:
        min(1250px,
            95vw);

    height: 720px;

    border-radius:
        48% 52% 46% 54% / 18% 20% 80% 82%;

    background:

        radial-gradient(ellipse at 30% 25%,
            rgba(132,
                157,
                78,
                .65),
            transparent 35%),

        linear-gradient(110deg,
            var(--leaf-dark),
            var(--leaf) 45%,
            #344923);

    box-shadow:

        0 70px 100px rgba(0, 0, 0, .65),

        inset 0 15px 40px rgba(180,
            194,
            116,
            .13),

        inset 0 -35px 60px rgba(0, 0, 0, .3);

    overflow: hidden;

    transform:
        perspective(1000px) rotateX(4deg) rotate(-1deg);
}


/* ============================================================
   LEAF VEIN
============================================================ */

.leaf-vein {

    position: absolute;

    width: 125%;

    height: 8px;

    left: -12%;

    top: 50%;

    transform:
        rotate(-2deg);

    background:

        linear-gradient(90deg,
            transparent,
            rgba(185,
                196,
                120,
                .35),
            rgba(198,
                203,
                129,
                .55),
            transparent);

    filter: blur(1px);
}

.leaf-highlight {

    position: absolute;

    width: 80%;

    height: 100%;

    left: 5%;

    top: -20%;

    transform:
        rotate(10deg);

    background:

        radial-gradient(ellipse,
            rgba(206,
                215,
                137,
                .12),
            transparent 65%);
}


/* ============================================================
   GENERIC DISH
============================================================ */

.dish {

    position: absolute;

    z-index: 10;
}

.dish label,
.rice label,
.appalam label,
.banana label,
.payasam label {

    position: absolute;

    white-space: nowrap;

    font-family: var(--serif);

    font-size: .62rem;

    color:
        rgba(238,
            219,
            173,
            .5);

    opacity: 0;

    transition:
        opacity .3s ease;
}

.dish:hover label,
.rice:hover label,
.appalam:hover label,
.banana:hover label,
.payasam:hover label {

    opacity: 1;
}


/* ============================================================
   SALT
============================================================ */

.salt {

    left: 7%;

    top: 8%;

    width: 65px;

    height: 35px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            #eee3c8,
            #cdbf9c);

    box-shadow:
        0 8px 12px rgba(0, 0, 0, .25);
}

.salt label {
    top: 45px;
    left: 5px;
}


/* ============================================================
   PICKLE
============================================================ */

.pickle {

    left: 18%;

    top: 10%;

    width: 80px;

    height: 45px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            #d57a25,
            #812d17);

    box-shadow:
        inset 0 5px 10px rgba(255, 200, 70, .2);
}

.pickle-piece {

    position: absolute;

    width: 17px;

    height: 13px;

    border-radius: 45%;

    background:
        #bd4b1b;

    transform:
        rotate(25deg);
}

.pickle-piece:nth-child(1) {
    left: 15px;
    top: 13px;
}

.pickle-piece:nth-child(2) {
    left: 38px;
    top: 20px;
}

.pickle-piece:nth-child(3) {
    left: 53px;
    top: 10px;
}

.pickle label {
    top: 50px;
}


/* ============================================================
   PORIYAL
============================================================ */

.poriyal {

    left: 29%;

    top: 9%;

    width: 100px;

    height: 65px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            #a5a94e,
            #536326);

    box-shadow:
        0 10px 15px rgba(0, 0, 0, .25);
}

.poriyal span {

    position: absolute;

    width: 30px;

    height: 8px;

    border-radius: 50%;

    background:
        #c3b852;

    transform:
        rotate(20deg);
}

.poriyal span:nth-child(1) {
    left: 15px;
    top: 15px;
}

.poriyal span:nth-child(2) {
    left: 40px;
    top: 30px;
}

.poriyal span:nth-child(3) {
    right: 12px;
    top: 15px;
}

.poriyal span:nth-child(4) {
    left: 25px;
    bottom: 12px;
}

.poriyal span:nth-child(5) {
    right: 20px;
    bottom: 15px;
}

.poriyal span:nth-child(6) {
    left: 48px;
    top: 10px;
}

.poriyal label {
    top: 70px;
}


/* ============================================================
   KOOTU
============================================================ */

.kootu {

    left: 42%;

    top: 8%;

    width: 100px;

    height: 62px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            #d0a33e,
            #866022);
}

.kootu span {

    position: absolute;

    width: 13px;

    height: 13px;

    border-radius: 50%;

    background:
        #e1b84f;
}

.kootu span:nth-child(1) {
    left: 25px;
    top: 15px;
}

.kootu span:nth-child(2) {
    left: 55px;
    top: 25px;
}

.kootu span:nth-child(3) {
    left: 40px;
    top: 38px;
}

.kootu label {
    top: 67px;
}


/* ============================================================
   CURRY BOWLS
============================================================ */

.curry {

    width: 145px;

    height: 110px;
}

.curry::before {

    content: "";

    position: absolute;

    width: 100%;

    height: 55px;

    border-radius: 50%;

    background:
        linear-gradient(180deg,
            #c29a50,
            #735321);

    box-shadow:
        0 10px 15px rgba(0, 0, 0, .3);
}

.curry-liquid {

    position: absolute;

    z-index: 2;

    width: 120px;

    height: 40px;

    left: 12px;

    top: 7px;

    border-radius: 50%;
}

.curry::after {

    content: "";

    position: absolute;

    width: 120px;

    height: 70px;

    left: 12px;

    top: 25px;

    border-radius:
        15% 15% 45% 45%;

    background:
        linear-gradient(90deg,
            #765322,
            #c29c53,
            #765322);

    z-index: 1;
}

.sambar {

    left: 5%;

    top: 25%;
}

.sambar .curry-liquid {

    background:
        radial-gradient(circle at 35% 30%,
            #ee9c38,
            #9b421c);
}

.rasam {

    left: 18%;

    top: 38%;
}

.rasam .curry-liquid {

    background:
        radial-gradient(circle at 40% 30%,
            #e28a35,
            #8b341c);
}

.curry-liquid i {

    position: absolute;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background:
        #592417;
}

.curry-liquid i:nth-child(1) {
    left: 25px;
    top: 18px;
}

.curry-liquid i:nth-child(2) {
    left: 62px;
    top: 12px;
}

.curry-liquid i:nth-child(3) {
    left: 88px;
    top: 20px;
}

.curry label {

    top: 115px;

    left: 35px;
}


/* ============================================================
   POTATO ROAST
============================================================ */

.potato {

    left: 7%;

    bottom: 22%;

    width: 130px;

    height: 75px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            #d69434,
            #80371a);

    box-shadow:
        0 12px 20px rgba(0, 0, 0, .3);
}

.potato span {

    position: absolute;

    width: 24px;

    height: 15px;

    border-radius: 40%;

    background:
        #c27b27;

    box-shadow:
        inset 2px 2px rgba(255, 190, 80, .2);
}

.potato span:nth-child(1) {
    left: 15px;
    top: 20px;
}

.potato span:nth-child(2) {
    left: 50px;
    top: 13px;
}

.potato span:nth-child(3) {
    left: 85px;
    top: 24px;
}

.potato span:nth-child(4) {
    left: 35px;
    top: 43px;
}

.potato span:nth-child(5) {
    left: 75px;
    top: 48px;
}

.potato span:nth-child(6) {
    left: 105px;
    top: 40px;
}

.potato label {
    top: 80px;
}


/* ============================================================
   VADAI
============================================================ */

.vadai {

    left: 26%;

    bottom: 12%;

    width: 115px;

    height: 80px;
}

.vadai-piece {

    position: absolute;

    width: 68px;

    height: 68px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            #d79a3d,
            #85401d);

    box-shadow:
        inset 5px 5px rgba(255, 204, 100, .18),
        0 10px 15px rgba(0, 0, 0, .3);
}

.vadai-piece::after {

    content: "";

    position: absolute;

    width: 17px;

    height: 17px;

    left: 26px;

    top: 25px;

    border-radius: 50%;

    background:
        var(--leaf-dark);
}

.vadai-piece.second {

    left: 43px;

    top: 12px;

    transform: scale(.85);
}

.vadai label {
    top: 83px;
    left: 25px;
}


/* ============================================================
   FISH FRY
============================================================ */

.fish-fry {

    right: 8%;

    top: 25%;

    width: 205px;

    height: 125px;

    transform:
        rotate(-8deg);
}

.fish-body {

    position: absolute;

    width: 175px;

    height: 85px;

    left: 5px;

    top: 20px;

    border-radius:
        55% 45% 50% 50%;

    background:

        radial-gradient(circle at 40% 35%,
            #d07a35,
            #9a3e20 65%,
            #612219);

    box-shadow:

        inset 0 6px 10px rgba(255, 205, 120, .2),

        0 15px 20px rgba(0, 0, 0, .4);
}

.fish-body::after {

    content: "";

    position: absolute;

    right: -28px;

    top: 15px;

    border-style: solid;

    border-width:
        28px 35px 28px 0;

    border-color:
        transparent #7d2d1b transparent transparent;
}

.fish-eye {

    position: absolute;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #21100c;

    right: 20px;

    top: 32px;

    z-index: 4;
}

.fish-fin {

    position: absolute;

    width: 50px;

    height: 30px;

    background:
        #7b2a1b;

    clip-path:
        polygon(0 100%,
            50% 0,
            100% 100%);
}

.fish-fin.top {
    top: -22px;
    left: 55px;
}

.fish-fin.bottom {
    bottom: -18px;
    left: 75px;
}

.fish-cut {

    position: absolute;

    width: 8px;

    height: 70px;

    border-radius: 50%;

    background:
        rgba(76, 28, 17, .5);

    transform:
        rotate(18deg);
}

.cut-one {
    left: 50px;
}

.cut-two {
    left: 88px;
}

.cut-three {
    left: 126px;
}

.fish-fry label {
    top: 115px;
    left: 60px;
}


/* ============================================================
   CHICKEN LEG
============================================================ */

.chicken-leg {

    right: 25%;

    bottom: 15%;

    width: 170px;

    height: 180px;

    transform:
        rotate(15deg);
}

.chicken-meat {

    position: absolute;

    width: 105px;

    height: 125px;

    left: 15px;

    top: 5px;

    border-radius:
        55% 45% 48% 52%;

    background:

        radial-gradient(circle at 35% 30%,
            #d27a32,
            #a64421 55%,
            #5d2117);

    box-shadow:

        inset 5px 5px rgba(255, 205, 112, .2),

        0 15px 20px rgba(0, 0, 0, .4);
}

.chicken-char {

    position: absolute;

    width: 22px;

    height: 8px;

    border-radius: 50%;

    background:
        #5b2016;

    transform: rotate(-20deg);
}

.char-one {
    left: 25px;
    top: 35px;
}

.char-two {
    left: 50px;
    top: 65px;
}

.char-three {
    left: 30px;
    top: 90px;
}

.chicken-bone {

    position: absolute;

    width: 65px;

    height: 25px;

    left: 80px;

    bottom: 5px;

    border-radius: 40%;

    transform:
        rotate(-35deg);

    background:
        linear-gradient(90deg,
            #e7d2a7,
            #b99e6c);

    box-shadow:
        0 5px 8px rgba(0, 0, 0, .25);
}

.chicken-bone::after {

    content: "";

    position: absolute;

    width: 22px;

    height: 22px;

    right: -8px;

    top: 1px;

    border-radius: 50%;

    background:
        #ead9b5;
}

.chicken-leg label {
    top: 175px;
    left: 35px;
}


/* ============================================================
   CHICKEN CURRY
============================================================ */

.chicken-curry {

    right: 5%;

    top: 10%;

    width: 135px;

    height: 85px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            #b95b23,
            #682318);

    box-shadow:
        0 12px 18px rgba(0, 0, 0, .3);
}

.chicken-gravy span {

    position: absolute;

    width: 28px;

    height: 20px;

    border-radius: 50%;

    background:
        #a8411c;
}

.chicken-gravy span:nth-child(1) {
    left: 20px;
    top: 20px;
}

.chicken-gravy span:nth-child(2) {
    left: 55px;
    top: 35px;
}

.chicken-gravy span:nth-child(3) {
    left: 90px;
    top: 18px;
}

.chicken-curry label {
    top: 90px;
    left: 30px;
}


/* ============================================================
   RICE
============================================================ */

.rice {

    position: absolute;

    z-index: 8;

    left: 50%;

    top: 48%;

    width: 350px;

    height: 270px;

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

.rice-shadow {

    position: absolute;

    width: 340px;

    height: 130px;

    left: 5px;

    bottom: 20px;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, .35);

    filter:
        blur(20px);
}

.rice-mound {

    position: absolute;

    width: 310px;

    height: 190px;

    left: 20px;

    top: 35px;

    border-radius:
        50% 50% 45% 45% / 60% 60% 40% 40%;

    background:

        radial-gradient(ellipse at 35% 25%,
            #fff8df,
            var(--rice) 55%,
            var(--rice-shadow));

    box-shadow:

        inset 0 12px 25px rgba(255, 255, 255, .45),

        0 15px 25px rgba(0, 0, 0, .25);
}

.rice-mound span {

    position: absolute;

    width: 22px;

    height: 8px;

    border-radius: 50%;

    background:
        rgba(177,
            159,
            120,
            .28);

    transform:
        rotate(var(--rotation, 20deg));
}

.rice-mound span:nth-child(1) {
    left: 60px;
    top: 40px;
}

.rice-mound span:nth-child(2) {
    left: 110px;
    top: 30px;
}

.rice-mound span:nth-child(3) {
    left: 170px;
    top: 55px;
}

.rice-mound span:nth-child(4) {
    left: 220px;
    top: 40px;
}

.rice-mound span:nth-child(5) {
    left: 80px;
    top: 90px;
}

.rice-mound span:nth-child(6) {
    left: 145px;
    top: 105px;
}

.rice-mound span:nth-child(7) {
    left: 200px;
    top: 90px;
}

.rice-mound span:nth-child(8) {
    left: 125px;
    top: 135px;
}

.rice-grain {

    position: absolute;

    width: 25px;

    height: 9px;

    border-radius: 50%;

    background:
        rgba(168, 150, 111, .25);

    z-index: 2;
}

.grain-one {
    left: 120px;
    top: 65px;
}

.grain-two {
    left: 195px;
    top: 120px;
}

.grain-three {
    left: 90px;
    top: 130px;
}

.rice label {

    top: 225px;

    left: 130px;

    letter-spacing:
        .2em;

    font-family: var(--sans);
}


/* ============================================================
   APPALAM
============================================================ */

.appalam {

    position: absolute;

    left: 42%;

    bottom: 8%;

    width: 180px;

    height: 110px;

    border-radius: 50%;

    transform:
        rotate(-8deg);

    background:

        radial-gradient(circle at 30% 30%,
            #e9ca80,
            #bd8a36);

    opacity: .9;

    box-shadow:
        0 12px 18px rgba(0, 0, 0, .3);

    z-index: 12;
}

.appalam span {

    position: absolute;

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background:
        #93662a;
}

.appalam span:nth-child(1) {
    left: 45px;
    top: 35px;
}

.appalam span:nth-child(2) {
    left: 100px;
    top: 55px;
}

.appalam span:nth-child(3) {
    left: 130px;
    top: 30px;
}

.appalam label {
    top: 112px;
    left: 60px;
}


/* ============================================================
   FRIED CHILLI
============================================================ */

.fried-chilli {

    position: absolute;

    left: 63%;

    bottom: 8%;

    width: 130px;

    height: 70px;

    transform:
        rotate(15deg);

    z-index: 14;
}

.fried-chilli span {

    position: absolute;

    width: 75px;

    height: 13px;

    border-radius:
        100% 20% 20% 100%;

    background:
        linear-gradient(90deg,
            #879048,
            #53652c);
}

.fried-chilli span:nth-child(1) {
    left: 0;
    top: 15px;
    transform: rotate(10deg);
}

.fried-chilli span:nth-child(2) {
    left: 25px;
    top: 30px;
    transform: rotate(-5deg);
}

.fried-chilli span:nth-child(3) {
    left: 45px;
    top: 45px;
    transform: rotate(8deg);
}


/* ============================================================
   BANANA
============================================================ */

.banana {

    position: absolute;

    right: 8%;

    bottom: 5%;

    width: 150px;

    height: 100px;

    z-index: 15;

    transform:
        rotate(-15deg);
}

.banana-body {

    position: absolute;

    width: 125px;

    height: 48px;

    top: 25px;

    left: 5px;

    border-radius:
        80% 20% 80% 20%;

    transform:
        rotate(-15deg);

    background:
        linear-gradient(180deg,
            #e4c452,
            #a27b22);

    box-shadow:
        inset 0 5px rgba(255, 238, 136, .3),

        0 8px 15px rgba(0, 0, 0, .25);
}

.banana-tip {

    position: absolute;

    width: 18px;

    height: 18px;

    left: 115px;

    top: 8px;

    border-radius: 50%;

    background:
        #533019;
}

.banana label {
    top: 75px;
    left: 50px;
}


/* ============================================================
   PAYASAM
============================================================ */

.payasam {

    position: absolute;

    left: 8%;

    bottom: 5%;

    width: 145px;

    height: 120px;

    z-index: 16;
}

.payasam-bowl {

    position: absolute;

    bottom: 0;

    width: 130px;

    height: 70px;

    border-radius:
        15% 15% 45% 45%;

    background:
        linear-gradient(90deg,
            #87632c,
            #d0a95c,
            #765321);

    box-shadow:
        0 15px 20px rgba(0, 0, 0, .35);
}

.payasam-liquid {

    position: absolute;

    width: 112px;

    height: 35px;

    left: 9px;

    top: -8px;

    border-radius: 50%;

    background:
        radial-gradient(circle at 40% 35%,
            #e9d08b,
            #a87c3b);
}

.payasam-liquid span {

    position: absolute;

    width: 15px;

    height: 7px;

    border-radius: 50%;

    background:
        #5d3b1c;
}

.payasam-liquid span:nth-child(1) {
    left: 25px;
    top: 12px;
}

.payasam-liquid span:nth-child(2) {
    left: 60px;
    top: 8px;
}

.payasam-liquid span:nth-child(3) {
    left: 85px;
    top: 16px;
}

.payasam-steam {

    position: absolute;

    top: -65px;

    left: 45px;

    width: 60px;

    height: 70px;
}

.payasam-steam span {

    position: absolute;

    width: 10px;

    height: 60px;

    border-left:
        2px solid rgba(238,
            220,
            183,
            .25);

    border-radius: 50%;

    animation:
        steam 4s ease-in-out infinite;
}

.payasam-steam span:nth-child(2) {
    left: 25px;
    animation-delay: 1.5s;
}

@keyframes steam {

    0% {
        opacity: 0;
        transform:
            translateY(20px) rotate(8deg);
    }

    30% {
        opacity: .6;
    }

    100% {
        opacity: 0;
        transform:
            translateY(-35px) rotate(-8deg);
    }
}

.payasam label {
    top: 75px;
    left: 35px;
}


/* ============================================================
   CURRY LEAVES
============================================================ */

.curry-leaves {

    position: absolute;

    right: 30%;

    bottom: 7%;

    width: 170px;

    height: 100px;

    z-index: 20;

    transform:
        rotate(-12deg);
}

.curry-leaves::before {

    content: "";

    position: absolute;

    width: 170px;

    height: 3px;

    top: 50%;

    background:
        #34421f;

    transform:
        rotate(-15deg);
}

.curry-leaves span {

    position: absolute;

    width: 38px;

    height: 17px;

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(120deg,
            #74854b,
            #35431f);
}

.curry-leaves span:nth-child(1) {
    left: 5px;
    top: 30px;
    transform: rotate(-20deg);
}

.curry-leaves span:nth-child(2) {
    left: 35px;
    top: 12px;
    transform: rotate(15deg);
}

.curry-leaves span:nth-child(3) {
    left: 65px;
    top: 32px;
    transform: rotate(-8deg);
}

.curry-leaves span:nth-child(4) {
    left: 95px;
    top: 13px;
    transform: rotate(18deg);
}

.curry-leaves span:nth-child(5) {
    left: 120px;
    top: 35px;
    transform: rotate(-8deg);
}

.curry-leaves span:nth-child(6) {
    left: 70px;
    top: 60px;
    transform: rotate(12deg);
}


/* ============================================================
   SERVING MESSAGE
============================================================ */

.serving-message {

    position: absolute;

    bottom: 10px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 20px;

    white-space: nowrap;

    color: var(--gold);

    text-align: center;
}

.serving-message p {

    font-family: var(--tamil);

    font-size: 1.25rem;
}

.serving-message small {

    display: none;

    font-family: var(--serif);

    color:
        rgba(234,
            217,
            181,
            .45);
}

.message-line {

    width: 70px;

    height: 1px;

    background:
        rgba(213,
            178,
            97,
            .45);
}


/* ============================================================
   WEDDING CARD
============================================================ */

.wedding-card {

    width:
        min(650px,
            94vw);

    margin:
        0 auto 160px;

    padding: 12px;

    background:
        rgba(67,
            35,
            20,
            .65);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .35);
}

.card-inner {

    padding:
        55px 45px;

    border:
        1px solid rgba(213,
            178,
            97,
            .45);

    text-align: center;
}

.card-label {

    font-size: .58rem;

    letter-spacing: .3em;

    color:
        var(--gold);
}

.card-inner h2 {

    margin-top: 15px;

    font-family: var(--serif);

    font-size: 3.2rem;

    font-weight: 500;
}

.card-divider {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    margin: 25px 0 35px;

    color: var(--gold);
}

.card-divider span {

    width: 60px;

    height: 1px;

    background:
        rgba(213,
            178,
            97,
            .45);
}

.menu-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 25px;

    text-align: left;
}

.menu-grid strong {

    font-family: var(--serif);

    font-size: 1.25rem;
}

.menu-grid p {

    margin-top: 5px;

    font-size: .7rem;

    line-height: 1.6;

    color:
        rgba(234,
            217,
            181,
            .45);
}


/* ============================================================
   STORY
============================================================ */

.story {

    max-width: 750px;

    margin:
        0 auto 170px;

    text-align: center;
}

.story-label {

    font-size: .6rem;

    letter-spacing: .3em;

    color: var(--gold);

    margin-bottom: 30px;
}

.story h2 {

    font-family: var(--serif);

    font-size:
        clamp(3rem,
            7vw,
            6rem);

    line-height: .85;

    font-weight: 500;
}

.story-highlight {

    margin-top: 30px;

    font-family: var(--serif);

    font-size: 2rem;

    font-style: italic;

    color:
        var(--mustard);
}

.vertical-line {

    width: 1px;

    height: 70px;

    margin: 35px auto;

    background:
        linear-gradient(var(--gold),
            transparent);
}

.story-copy {

    max-width: 530px;

    margin:
        0 auto 25px;

    font-family: var(--serif);

    font-size: 1.1rem;

    line-height: 1.8;

    color:
        rgba(234,
            217,
            181,
            .55);
}

.story-copy strong {

    color:
        var(--cream);
}


/* ============================================================
   FOOTER
============================================================ */

footer {

    padding:
        80px 20px 45px;

    text-align: center;

    border-top:
        1px solid rgba(213,
            178,
            97,
            .22);
}

.footer-symbol {

    color:
        var(--gold);

    margin-bottom: 20px;
}

footer h2 {

    font-family: var(--serif);

    font-size: 2.6rem;

    font-weight: 500;
}

footer p {

    margin-top: 10px;

    font-family: var(--serif);

    font-style: italic;

    color:
        rgba(234,
            217,
            181,
            .5);
}

.footer-location {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 30px;

    font-size: .55rem;

    letter-spacing: .25em;

    color:
        var(--gold);
}

.footer-location i {
    font-style: normal;
}

footer small {

    display: block;

    margin-top: 45px;

    font-size: .5rem;

    color:
        rgba(234,
            217,
            181,
            .25);
}


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

@media (max-width: 1000px) {

    .page {
        padding-top: 50px;
    }

    .feast-section {
        min-height: 850px;
    }

    .banana-leaf {
        height: 650px;
    }

    .hall-decoration {
        display: none;
    }
}


@media (max-width: 700px) {

    .page {
        padding:
            45px 12px 0;
    }

    .hero {
        margin-bottom: 35px;
    }

    .hero h1 {
        font-size:
            clamp(4rem,
                18vw,
                7rem);
    }

    .feast-section {
        min-height: 800px;
    }

    .banana-leaf {

        width: 100%;

        height: 620px;

        transform:
            rotate(-1deg) scale(.96);
    }

    .rice {

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

    .fish-fry {
        transform:
            rotate(-8deg) scale(.75);

        right: -1%;
    }

    .chicken-leg {

        transform:
            rotate(15deg) scale(.72);

        right: 17%;
    }

    .chicken-curry {

        transform:
            scale(.75);

        right: -2%;
    }

    .sambar {

        transform:
            scale(.72);

        left: -2%;
    }

    .rasam {

        transform:
            scale(.72);

        left: 10%;
    }

    .potato {

        transform:
            scale(.72);

        left: -2%;
    }

    .poriyal {

        transform:
            scale(.75);

        left: 23%;
    }

    .kootu {

        transform:
            scale(.75);

        left: 40%;
    }

    .vadai {

        transform:
            scale(.7);

        left: 23%;
    }

    .appalam {

        transform:
            rotate(-8deg) scale(.65);

        left: 38%;
    }

    .payasam {

        transform:
            scale(.7);

        left: 0;
    }

    .banana {

        transform:
            rotate(-15deg) scale(.7);

        right: 1%;
    }

    .curry-leaves {

        transform:
            rotate(-12deg) scale(.7);

        right: 20%;
    }

    .menu-grid {
        grid-template-columns: 1fr;
    }

    .card-inner {
        padding:
            40px 20px;
    }

    .serving-message {
        gap: 10px;
    }

    .message-line {
        width: 35px;
    }
}


@media (max-width: 450px) {

    .hero h1 {
        font-size: 4rem;
    }

    .banana-leaf {
        height: 540px;
    }

    .rice {
        transform:
            translate(-50%, -50%) scale(.62);
    }

    .fish-fry {
        transform:
            rotate(-8deg) scale(.52);

        right: -8%;
        top: 27%;
    }

    .chicken-leg {
        transform:
            rotate(15deg) scale(.52);

        right: 4%;
        bottom: 16%;
    }

    .chicken-curry {
        transform:
            scale(.55);

        right: -9%;
    }

    .sambar {
        transform:
            scale(.55);

        left: -10%;
    }

    .rasam {
        transform:
            scale(.55);

        left: 4%;
    }

    .potato {
        transform:
            scale(.55);

        left: -8%;
    }

    .poriyal {
        transform:
            scale(.55);

        left: 19%;
    }

    .kootu {
        transform:
            scale(.55);

        left: 39%;
    }

    .vadai {
        transform:
            scale(.5);

        left: 17%;
    }

    .appalam {
        transform:
            rotate(-8deg) scale(.48);

        left: 34%;
    }

    .payasam {
        transform:
            scale(.5);

        left: -6%;
    }

    .banana {
        transform:
            rotate(-15deg) scale(.5);

        right: -8%;
    }

    .serving-message small {
        display: none;
    }

    .story h2 {
        font-size: 3.2rem;
    }
}


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

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

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;
    }
}