/* ================================================
   DIOD STUDIO — style.css
   Stable Performance Version
================================================ */

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

:root {
    --gold: #C9A84C;
    --gold-lt: #E8C97A;
    --cream: #FAF8F5;
    --warm: #F5EFE0;
    --dark: #0A0A0A;
    --dark2: #111111;
    --rust: #8B3A2A;
    --nav-h: 80px;

    --ease-out-expo:
        cubic-bezier(0.16, 1, 0.3, 1);

    --ease-in-out:
        cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--dark);
    color: white;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
}

/* ================================================
   LOCAL FONTS
================================================ */

@font-face {
    font-family: 'The Seasons';

    src:
        url('./Fonts/MonumentExtended-Regular.otf')
        format('opentype');

    font-weight: normal;
    font-style: normal;

    font-display: swap;
}

@font-face {
    font-family: 'TamilFont';

    src:
        url('./Fonts/st_168.TTF')
        format('truetype');

    font-weight: 400;
    font-style: normal;

    font-display: swap;
}

@font-face {
    font-family: 'TamFont';

    src:
        url('./Fonts/st_140.TTF')
        format('truetype');

    font-weight: 400;
    font-style: normal;

    font-display: swap;
}

/* ================================================
   CUSTOM CURSOR
================================================ */

.cursor-dot,
.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;

    border-radius: 50%;

    pointer-events: none;

    z-index: 9999;

    will-change: transform;

    transition:
        opacity .3s;
}

.cursor-dot {
    width: 6px;
    height: 6px;

    background:
        var(--gold);

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

.cursor-ring {
    width: 36px;
    height: 36px;

    border:
        1.5px solid
        rgba(201,168,76,.5);

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

    transition:
        width .3s,
        height .3s,
        border-color .3s;
}

.cursor-ring.hovering {
    width: 56px;
    height: 56px;

    border-color:
        var(--gold);
}

@media (max-width:768px) {
    .cursor-dot,
    .cursor-ring {
        display: none;
    }
}

/* ================================================
   NAV
================================================ */

nav {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 1000;

    height:
        var(--nav-h);

    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    padding:
        0 28px;

    transition:
        background .5s var(--ease-in-out),
        backdrop-filter .5s,
        box-shadow .5s;
}

nav.scrolled {
    background:
        rgba(10,10,10,.82);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);

    box-shadow:
        0 1px 0
        rgba(255,255,255,.06);
}

nav ul {
    display: flex;
    align-items: center;
    gap: 40px;

    list-style: none;

    margin-left: auto;
}

nav ul a {
    color: #fff;

    text-decoration: none;

    font-size: 13px;

    letter-spacing: 1px;

    text-transform:
        uppercase;

    position: relative;
}

nav ul a::after {
    content: '';

    position: absolute;

    bottom: -5px;
    left: 0;

    width: 0;
    height: 1px;

    background:
        var(--gold);

    transition:
        width .35s
        var(--ease-out-expo);
}

nav ul a:hover::after {
    width: 100%;
}

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

.logo {
    display: flex;

    align-items: center;

    gap: 0;

    color: white;

    text-decoration: none;

    position: relative;

    font-family:
        'Playfair Display',
        serif;

    letter-spacing:
        2px;
}

.logo span {
    font-family:
        'Playfair Display',
        serif;

    font-size:
        24px;
}

.flip-d {
    display:
        inline-block;

    transform:
        scaleX(-1);

    margin-left:
        -2px;
}

.studio-text {
    margin-left:
        12px !important;

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

    font-size:
        16px !important;

    letter-spacing:
        4px !important;
}

.logo::after {
    content: '';

    position: absolute;

    bottom: -4px;
    left: 0;

    width: 0;
    height: 1px;

    background:
        var(--gold);

    transition:
        width .4s
        var(--ease-out-expo);
}

.logo:hover::after {
    width: 100%;
}

/* ================================================
   NAV CTA
================================================ */

.nav-cta {
    background:
        var(--gold);

    color:
        #000 !important;

    padding:
        10px 24px;

    border-radius:
        100px;

    transition:
        background .3s,
        transform .3s,
        box-shadow .3s;
}

.nav-cta::after {
    display:
        none !important;
}

.nav-cta:hover {
    background:
        var(--gold-lt) !important;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 30px
        rgba(201,168,76,.35);
}

/* ================================================
   HAMBURGER
================================================ */

.nav-toggle {
    display: none;

    flex-direction:
        column;

    gap: 5px;

    cursor: pointer;

    z-index: 1100;

    background: none;

    border: none;

    padding: 6px;
}

.nav-toggle span {
    display: block;

    width: 24px;
    height: 1.5px;

    background: white;

    border-radius: 2px;

    transition:
        transform .35s
        var(--ease-out-expo),
        opacity .2s;

    transform-origin:
        center;
}

.nav-toggle.open span:nth-child(1) {
    transform:
        translateY(6.5px)
        rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;

    transform:
        scaleX(0);
}

.nav-toggle.open span:nth-child(3) {
    transform:
        translateY(-6.5px)
        rotate(-45deg);
}

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

.mobile-menu {
    position: fixed;

    inset: 0;

    background:
        rgba(5,5,5,.97);

    z-index: 1050;

    display: flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    gap: 32px;

    opacity: 0;

    pointer-events:
        none;

    transition:
        opacity .4s
        var(--ease-in-out);
}

.mobile-menu.open {
    opacity: 1;

    pointer-events:
        all;
}

.mobile-menu a {
    color: white;

    text-decoration:
        none;

    font-family:
        'Playfair Display',
        serif;

    font-size:
        36px;

    font-weight:
        500;

    opacity: 0;

    transform:
        translateY(20px);

    transition:
        opacity .4s,
        transform .4s
        var(--ease-out-expo),
        color .3s;
}

.mobile-menu.open a {
    opacity: 1;

    transform:
        translateY(0);
}

.mobile-menu.open a:nth-child(1) {
    transition-delay: .08s;
}

.mobile-menu.open a:nth-child(2) {
    transition-delay: .14s;
}

.mobile-menu.open a:nth-child(3) {
    transition-delay: .20s;
}

.mobile-menu.open a:nth-child(4) {
    transition-delay: .26s;
}

.mobile-menu.open a:nth-child(5) {
    transition-delay: .32s;
}

.mobile-menu a:hover {
    color:
        var(--gold);
}

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

.hero {
    position: relative;

    height: 100vh;

    overflow: hidden;
}

.hero-bg {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.15) 0%,
            rgba(0,0,0,.40) 60%,
            rgba(10,10,10,1) 100%
        ),
        url("images/hero.webp")
        center / cover
        no-repeat;

    will-change:
        transform;

    animation:
        kenburns
        18s
        ease-in-out
        infinite
        alternate;
}

@keyframes kenburns {

    from {
        transform:
            scale(1)
            translateX(0);
    }

    to {
        transform:
            scale(1.12)
            translateX(-1%);
    }
}

.hero-content {
    position: relative;

    z-index: 10;

    height: 100vh;

    display: flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

    padding:
        0 24px;

    padding-top:
        var(--nav-h);
}

.hero-eyebrow {
    font-size: 12px;

    letter-spacing:
        4px;

    text-transform:
        uppercase;

    color:
        var(--gold);

    margin-bottom:
        10px;

    opacity: 0;

    transform:
        translateY(16px);

    animation:
        fadeUp
        .8s
        .3s
        var(--ease-out-expo)
        forwards;
}

.hero-content h1 {
    max-width:
        780px;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(
            42px,
            6vw,
            76px
        );

    line-height:
        1.5;

    font-weight:
        400;

    opacity: 0;

    transform:
        translateY(24px);

    animation:
        fadeUp
        .9s
        .55s
        var(--ease-out-expo)
        forwards;
}

.hero-content h1 em {
    display:
        inline-block;

    font-style:
        italic;

    color:
        var(--gold-lt);

    line-height:
        .95;

    font-size:
        40px;
}

.hero-cta {
    margin-top:
        44px;

    display: flex;

    gap: 16px;

    opacity: 0;

    transform:
        translateY(16px);

    animation:
        fadeUp
        .8s
        .85s
        var(--ease-out-expo)
        forwards;
}

.btn-primary {
    padding:
        14px 36px;

    background:
        var(--gold);

    color:
        var(--dark);

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

    font-size:
        13px;

    font-weight:
        500;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

    text-decoration:
        none;

    border-radius:
        100px;

    transition:
        transform .3s
        var(--ease-out-expo),
        box-shadow .3s,
        background .3s;
}

.btn-primary:hover {
    background:
        var(--gold-lt);

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 40px
        rgba(201,168,76,.4);
}

.btn-outline {
    padding:
        14px 36px;

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

    color: white;

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

    font-size:
        13px;

    letter-spacing:
        1px;

    text-transform:
        uppercase;

    text-decoration:
        none;

    border-radius:
        100px;

    transition:
        border-color .3s,
        background .3s,
        transform .3s;
}

.btn-outline:hover {
    border-color:
        white;

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

    transform:
        translateY(-3px);
}

/* ================================================
   MARQUEE
================================================ */

.marquee-wrap {
    background:
        var(--gold);

    overflow:
        hidden;

    padding:
        14px 0;
}

.marquee-track {
    display: flex;

    animation:
        marquee
        22s
        linear
        infinite;

    will-change:
        transform;
}

.marquee-track span {
    white-space:
        nowrap;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        15px;

    letter-spacing:
        2px;

    color:
        var(--dark);

    padding:
        0 40px;

    flex-shrink: 0;
}

.marquee-track span.dot {
    padding: 0;

    opacity: .4;
}

@keyframes marquee {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }
}

/* ================================================
   COMMON
================================================ */

.section-eyebrow {
    display:
        inline-block;

    font-size:
        11px;

    letter-spacing:
        4px;

    text-transform:
        uppercase;

    color:
        var(--gold);

    margin-bottom:
        20px;

    position: relative;

    padding-left:
        36px;
}

.section-eyebrow::before {
    content: '';

    position: absolute;

    left: 0;

    top: 50%;

    width: 24px;

    height: 1px;

    background:
        var(--gold);
}

/* ================================================
   PORTRAIT / FESTIVAL
================================================ */

.prewedding {
    background:
        #050505;

    padding:
        100px 70px;
}

.prewedding-header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    margin-bottom:
        50px;
}

.prewedding-header h2 {
    max-width:
        780px;

    font-family:
        'The Seasons',
        serif;

    font-size:
        clamp(
            20px,
            3vw,
            24px
        );

    font-weight:
        500;
}

.pre-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.pre-card {
    position: relative;

    overflow: hidden;

    border-radius:
        16px;
}

.pre-card::before {
    content: '';

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            #1a1a1a 25%,
            #2a2a2a 50%,
            #1a1a1a 75%
        );

    background-size:
        200% 100%;

    animation:
        shimmer
        1.5s
        infinite;

    z-index: 0;

    transition:
        opacity .4s;
}

.pre-card.loaded::before {
    opacity: 0;

    pointer-events: none;
}

@keyframes shimmer {

    from {
        background-position:
            -200% 0;
    }

    to {
        background-position:
            200% 0;
    }
}

.pre-card img {
    width: 100%;

    height:
        650px;

    object-fit:
        cover;

    position: relative;

    z-index: 1;

    transition:
        transform .9s
        var(--ease-out-expo);
}

.pre-card:hover img {
    transform:
        scale(1.07);
}

/* ================================================
   TIMELESS
================================================ */

.timeless {
    background:
        var(--warm);

    padding:
        110px 0;

    overflow: hidden;
}

.timeless-content {
    width: 88%;

    margin: auto;
}

.timeless-main-img {
    width: 100%;

    border-radius:
        24px;

    overflow: hidden;
}

.timeless-main-img img {
    width: 100%;

    object-fit:
        cover;

    transition:
        transform 1.2s
        var(--ease-out-expo);
}

.timeless-main-img:hover img {
    transform:
        scale(1.04);
}

.timeless-text {
    margin:
        70px 0;

    text-align:
        center;
}

.timeless-text h2 {
    color:
        var(--rust);

    font-family:
        'The Seasons',
        serif;

    font-size:
        clamp(
            36px,
            5vw,
            50px
        );

    line-height:
        1.2;

    max-width:
        860px;

    margin:
        0 auto 30px;
}

.timeless-text p {
    color:
        #7c6d60;

    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        clamp(
            20px,
            2vw,
            27px
        );

    max-width:
        580px;

    margin:
        0 auto;

    line-height:
        1.7;
}

.timeless-image {
    overflow: hidden;

    border-radius:
        28px;
}

.timeless-image img {
    width: 100%;

    max-height:
        640px;

    object-fit:
        cover;

    transition:
        transform 1.2s
        var(--ease-out-expo);
}

.timeless-image:hover img {
    transform:
        scale(1.05);
}

.timeless-stats {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 1px;

    background:
        rgba(139,58,42,.15);

    border-radius:
        16px;

    overflow: hidden;

    margin-top:
        50px;
}

.stat-box {
    background:
        var(--warm);

    padding:
        40px 30px;

    text-align:
        center;
}

.stat-num {
    font-family:
        'Cormorant Garamond',
        serif;

    font-size:
        45px;

    font-weight:
        450;

    color:
        var(--rust);

    line-height: 1;

    display: block;
}

.stat-label {
    font-size: 12px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    color:
        #9c8d80;

    margin-top:
        8px;

    display: block;
}

/* ================================================
   WEDDING SERIES
================================================ */

.wedding-series {
    padding:
        120px 7%;

    overflow: hidden;
}

.wedding-top {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    margin-bottom:
        60px;

    gap: 40px;
}

.tamil-txt1 {
    font-family:
        'TamFont',
        sans-serif;

    font-size:
        60px;

    color:
        var(--cream);

    line-height:
        1.15;

    font-weight:
        450;
}

.tamil-txt2 {
    font-family:
        'TamilFont',
        sans-serif;

    font-size:
        50px;

    color:
        var(--cream);

    line-height:
        1.15;

    font-weight:
        450;

    text-align:
        justify;
}

#gold {
    color:
        var(--gold);
}

.wedding-parallax {
    display: flex;

    flex-direction:
        column;

    gap: 20px;

    overflow: hidden;

    margin-bottom:
        -10px;
}

.parallax-row {
    display: flex;

    gap: 20px;

    width:
        max-content;

    will-change:
        transform;
}

.row-left {
    animation:
        moveLeft
        30s
        linear
        infinite;
}

.row-right {
    animation:
        moveRight
        30s
        linear
        infinite;
}

.gallery-card {
    flex:
        0 0 300px;

    height:
        420px;

    overflow: hidden;

    border-radius:
        24px;
}

.gallery-card img {
    width: 100%;

    height: 100%;

    object-fit:
        cover;

    display: block;

    border-radius:
        24px;

    transition:
        transform .8s;
}

.gallery-card:hover img {
    transform:
        scale(1.06);
}

@keyframes moveLeft {

    from {
        transform:
            translate3d(0,0,0);
    }

    to {
        transform:
            translate3d(-50%,0,0);
    }
}

@keyframes moveRight {

    from {
        transform:
            translate3d(-50%,0,0);
    }

    to {
        transform:
            translate3d(0,0,0);
    }
}

/* ================================================
   SERVICES
================================================ */

.services {
    position: relative;

    min-height:
        90vh;

    background:
        linear-gradient(
            rgba(0,0,0,.5),
            rgba(0,0,0,.5)
        ),
        url("images/services1.webp")
        center / cover
        no-repeat;

    background-attachment:
        fixed;
}

.services-overlay {
    display: flex;

    justify-content:
        center;

    align-items:
        center;

    min-height:
        90vh;

    padding:
        80px 24px;
}

.services-content {
    text-align:
        center;
}

.service-small {
    color:
        var(--gold);

    letter-spacing:
        4px;

    font-size:
        11px;

    margin-bottom:
        24px;

    text-transform:
        uppercase;
}

.services-content h2 {
    color:
        var(--cream);

    font-family:
        'The Seasons',
        serif;

    font-size:
        clamp(
            38px,
            5.5vw,
            45px
        );

    line-height:
        1.2;

    font-weight:
        450;

    margin-bottom:
        60px;
}

.service-list {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(260px, 1fr)
        );

    gap: 20px;

    max-width:
        680px;

    margin:
        0 auto;

    justify-items:
        center;
}

.service-item {
    border:
        1px solid
        rgba(255,255,255,.15);

    padding:
        24px 22px;

    font-size:
        20px;

    width:
        280px;

    color:
        var(--cream);

    font-family:
        'Cormorant Garamond',
        serif;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    border-radius:
        40px;

    transition:
        background .4s,
        transform .4s
        var(--ease-out-expo),
        border-color .4s,
        box-shadow .4s;

    position: relative;

    overflow: hidden;
}

.service-item::before {
    content: '';

    position: absolute;

    bottom: 0;
    left: 0;

    width: 0;

    height: 2px;

    background:
        var(--gold);

    transition:
        width .4s
        var(--ease-out-expo);
}

.service-item:hover {
    background:
        rgba(201,168,76,.08);

    border-color:
        rgba(201,168,76,.35);

    transform:
        translateY(-6px);

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.4);
}

.service-item:hover::before {
    width: 100%;
}

/* ================================================
   POV
================================================ */

.pov {
    background:
        #040404;

    padding:
        100px 70px;
}

.pov-header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-end;

    margin-bottom:
        48px;
}

.pov-heading {
    color: white;

    font-family:
        'The Seasons',
        serif;

    font-size:
        clamp(
            20px,
            3vw,
            24px
        );

    font-weight:
        500;
}

.reels-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 16px;

    margin-bottom:
        60px;
}

.reel-card {
    overflow: hidden;

    border-radius:
        16px;

    position: relative;

    background:
        #0d0d0d;
}

.reel-card video {
    width: 100%;

    height:
        780px;

    object-fit:
        cover;

    display: block;

    transition:
        transform .9s
        var(--ease-out-expo);
}

.reel-card:hover video {
    transform:
        scale(1.04);
}

.reel-card::after {
    content: '▶';

    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 52px;

    height: 52px;

    background:
        rgba(201,168,76,.9);

    border-radius:
        50%;

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    color: black;

    font-size:
        14px;

    opacity: 0;

    transition:
        opacity .3s,
        transform .3s
        var(--ease-out-expo);

    pointer-events:
        none;
}

.reel-card:hover::after {
    opacity: 1;

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

.pov-text {
    text-align:
        center;

    margin:
        56px 0;
}

.pov-grid {
    display: grid;

    grid-template-columns:
        1fr 1.6fr 1fr;

    gap: 16px;
}

.pov-card {
    overflow: hidden;

    border-radius:
        16px;
}

.pov-card img {
    width: 100%;

    height:
        560px;

    object-fit:
        cover;

    display: block;

    transition:
        transform .9s
        var(--ease-out-expo);
}

.pov-card:hover img {
    transform:
        scale(1.07);
}

/* ================================================
   BIRTHDAY
================================================ */

.birthday {
    background:
        var(--dark2);

    padding:
        120px 70px;
}

.birthday-top {
    margin-bottom:
        64px;
}

.birthday-small {
    color:
        var(--gold);

    font-size:
        11px;

    letter-spacing:
        4px;

    text-transform:
        uppercase;

    margin-bottom:
        18px;

    display: block;
}

.birthday-top h2 {
    color:
        var(--cream);

    font-family:
        'The Seasons',
        serif;

    font-size:
        clamp(
            20px,
            3vw,
            24px
        );

    line-height:
        1.15;

    font-weight:
        450;

    max-width:
        780px;
}

.birthday-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap: 20px;

    align-items:
        start;
}

.birthday-card {
    overflow: hidden;

    border-radius:
        22px;

    position: relative;
}

.birthday-card:nth-child(2) {
    margin-top:
        40px;
}

.birthday-card img {
    width: 100%;

    height:
        520px;

    object-fit:
        cover;

    display: block;

    transition:
        transform 1s
        var(--ease-out-expo);
}

.birthday-card:nth-child(2) img {
    height:
        600px;
}

.birthday-card:hover img {
    transform:
        scale(1.06);
}

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

.footer-hero {
    position: relative;

    min-height:
        100vh;

    background:
        linear-gradient(
            rgba(0,0,0,.3) 0%,
            rgba(0,0,0,.55) 60%,
            rgba(10,10,10,1) 100%
        ),
        url("images/footer-bg.webp")
        center / cover
        no-repeat;
}

.footer-overlay {
    min-height:
        100vh;

    display: flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    padding:
        100px 70px 56px;
}

.footer-content {
    display: flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    flex: 1;

    text-align:
        center;
}

.footer-content h2 {
    font-family:
        'Playfair Display',
        serif;

    font-size:
        clamp(
            50px,
            9vw,
            100px
        );

    line-height:
        1.05;

    color:
        var(--cream);

    font-weight:
        500;
}

.footer-content h2 em {
    font-style:
        italic;

    color:
        var(--gold-lt);
}

.footer-content p {
    margin-top:
        28px;

    font-size:
        18px;

    color:
        #ccc;

    font-family:
        'Cormorant Garamond',
        serif;

    letter-spacing:
        1px;
}

.footer-book-btn {
    margin-top:
        44px;

    padding:
        16px 48px;

    border:
        1.5px solid
        var(--gold);

    color:
        var(--gold);

    font-size:
        13px;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    text-decoration:
        none;

    border-radius:
        100px;

    transition:
        background .4s,
        color .4s,
        transform .3s;
}

.footer-book-btn:hover {
    background:
        var(--gold);

    color:
        var(--dark);

    transform:
        translateY(-3px);
}

.footer-divider {
    width: 60px;

    height: 1px;

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

    margin:
        50px auto 0;
}

.footer-bottom {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    color:
        rgba(255,255,255,.5);

    font-size:
        12px;

    letter-spacing:
        1px;

    padding-top:
        30px;

    border-top:
        1px solid
        rgba(255,255,255,.08);
}

.footer-contact {
    margin-top:
        40px;

    padding-left:
        100px;
}

.footer-socials {
    display: flex;

    gap: 20px;
}

.footer-socials a {
    color:
        rgba(255,255,255,.5);

    text-decoration:
        none;

    font-size:
        12px;

    transition:
        color .3s;
}

.footer-socials a:hover {
    color:
        var(--gold);
}

.footer-flip-d {
    display:
        inline-block;

    transform:
        scaleX(-1);

    margin-left:
        -8px;
}

.footer-credit {
    text-align:
        center;

    margin-top:
        22px;
}

.footer-credit p {
    font-size:
        12px;

    color:
        rgba(255,255,255,.5);
}

.footer-credit span {
    color:
        var(--gold);

    font-weight:
        600;
}

/* ================================================
   REVEAL
================================================ */

@keyframes fadeUp {

    from {
        opacity: 0;

        transform:
            translateY(24px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

.reveal-stagger > * {
    opacity: 0;

    transform:
        translateY(40px);

    transition:
        opacity .7s
        var(--ease-out-expo),
        transform .7s
        var(--ease-out-expo);
}

.reveal-stagger.active > * {
    opacity: 1;

    transform: none;
}

.reveal-stagger.active > *:nth-child(1) {
    transition-delay: 0s;
}

.reveal-stagger.active > *:nth-child(2) {
    transition-delay: .1s;
}

.reveal-stagger.active > *:nth-child(3) {
    transition-delay: .2s;
}

.reveal-stagger.active > *:nth-child(4) {
    transition-delay: .3s;
}

.reveal-stagger.active > *:nth-child(5) {
    transition-delay: .4s;
}

.reveal-stagger.active > *:nth-child(6) {
    transition-delay: .5s;
}

.reveal {
    opacity: 0;

    transform:
        translateY(56px);

    transition:
        opacity 1s
        var(--ease-out-expo),
        transform 1s
        var(--ease-out-expo);
}

.reveal.active {
    opacity: 1;

    transform:
        translateY(0);
}

.count-up {
    font-variant-numeric:
        tabular-nums;
}

/* ================================================
   TABLET
================================================ */

@media (max-width:1100px) {

    nav {
        padding:
            0 40px;
    }

    .prewedding {
        padding:
            80px 40px;
    }

    .pov {
        padding:
            80px 40px;
    }

    .birthday {
        padding:
            90px 40px;
    }

    .wedding-series {
        padding:
            90px 40px;
    }

    .footer-overlay {
        padding:
            80px 40px 44px;
    }

    .pov-grid {
        grid-template-columns:
            repeat(3,1fr);
    }

    .pov-card img {
        height:
            260px;
    }

    .reel-card video {
        height:
            580px;
    }
}

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

@media (max-width:768px) {

    :root {
        --nav-h:
            64px;
    }

    nav {
        padding:
            0 20px;
    }

    nav ul {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }

    .logo span {
        font-size:
            16px;
    }

    .studio-text {
        font-size:
            13px !important;

        letter-spacing:
            2px !important;

        margin-left:
            8px !important;
    }

    .hero-content h1 {
        font-size:
            clamp(
                32px,
                8vw,
                46px
            );
    }

    .hero-content h1 em {
        font-size:
            22px;

        line-height: 1;
    }

    .hero-cta {
        flex-direction:
            column;

        align-items:
            center;

        gap: 12px;
    }

    .btn-primary,
    .btn-outline {
        padding:
            13px 32px;

        font-size:
            12px;

        width:
            240px;

        text-align:
            center;
    }

    .marquee-track span {
        font-size:
            13px;

        padding:
            0 28px;
    }

    .prewedding {
        padding:
            60px 20px;
    }

    .prewedding-header {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap: 12px;
    }

    .pre-grid {
        grid-template-columns:
            repeat(3,1fr);

        gap:
            10px;
    }

    .pre-card img {
        width: 100%;

        height: 100%;
    }

    .timeless {
        padding:
            60px 20px;
    }

    .timeless-content {
        width: 100%;

        display: flex;

        flex-direction:
            column;

        gap: 40px;
    }

    .timeless-main-img img {
        width: 100%;

        height:
            580px;

        object-fit:
            cover;

        border-radius:
            15px;
    }

    .timeless-text h2 {
        font-size:
            clamp(
                28px,
                7vw,
                40px
            );
    }

    .timeless-text p {
        font-size:
            19px;
    }

    .timeless-stats {
        grid-template-columns:
            1fr;
    }

    .wedding-series {
        padding:
            70px 20px;
    }

    .wedding-top {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            14px;
    }

    .gallery-card {
        flex:
            0 0 140px;

        height:
            200px;
    }

    .parallax-row {
        gap: 12px;
    }

    .row-left {
        animation-duration:
            20s;
    }

    .row-right {
        animation-duration:
            20s;
    }

    .services {
        background-attachment:
            scroll;
    }

    .service-list {
        grid-template-columns:
            1fr;

        gap: 12px;
    }

    .pov {
        padding:
            60px 20px;
    }

    .pov-header {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap: 12px;
    }

    .reels-grid {
        grid-template-columns:
            1fr;

        gap: 12px;
    }

    .reel-card video {
        height:
            660px;
    }

    .pov-grid {
        grid-template-columns:
            1fr;

        gap: 12px;
    }

    .pov-card img {
        width: 100%;

        height: 100%;
    }

    .tamil-txt1 {
        font-size:
            42px;
    }

    .tamil-txt2 {
        font-size:
            34px;
    }

    .birthday {
        padding:
            70px 20px;
    }

    .birthday-grid {
        grid-template-columns:
            repeat(3,1fr);

        gap: 8px;
    }

    .birthday-card:nth-child(2) {
        margin-top:
            20px;
    }

    .birthday-card img {
        height:
            180px;
    }

    .birthday-card:nth-child(2) img {
        height:
            220px;
    }

    .footer-overlay {
        padding:
            80px 20px 36px;
    }

    .footer-bottom {
        flex-direction:
            column;

        gap: 16px;

        text-align:
            center;
    }

    .footer-contact {
        padding-left: 0;
    }
}

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

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

    html {
        scroll-behavior:
            auto;
    }

    .hero-bg,
    .marquee-track,
    .row-left,
    .row-right {
        animation:
            none !important;
    }

    .reveal,
    .reveal-stagger > * {
        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }
}