@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Great+Vibes&family=Montserrat:wght@400;500;600;700&display=swap');


/* =========================================================
   CHARITH & SARANGI — WEDDING INVITATION
   V2.1 Traditional Kandyan Style
   ========================================================= */


/* ---------------------------------------------------------
   1. VARIABLES
   --------------------------------------------------------- */

:root {
    --ivory: #f8f1e4;
    --paper: #fffaf1;

    --maroon: #5b1825;
    --maroon2: #7b2838;

    --gold: #c49a4a;
    --gold2: #ead49c;

    --ink: #33251f;

    --shadow:
        0 20px 60px rgba(70, 35, 25, .14);

    --transition:
        .35s cubic-bezier(.22, 1, .36, 1);
}


/* ---------------------------------------------------------
   2. RESET
   --------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 30px;
}

body {
    margin: 0;
    background: var(--ivory);
    color: var(--ink);
    font-family: Montserrat, Arial, sans-serif;
    overflow-x: hidden;

    opacity: 0;
    transition: opacity .8s ease;
}

body.page-loaded {
    opacity: 1;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}


/* ---------------------------------------------------------
   3. OPENING SCREEN
   --------------------------------------------------------- */

.opening {
    position: fixed;
    inset: 0;

    z-index: 50;

    background:
        radial-gradient(
            circle at center,
            #7f3041 0,
            #5b1825 48%,
            #351019 100%
        );

    color: #fff8e9;

    display: grid;
    place-items: center;

    text-align: center;

    padding: 28px;

    transition:
        opacity .9s ease,
        transform .9s ease;

    overflow: hidden;
}


/* Decorative glow */

.opening::before {
    content: "";
    position: absolute;

    width: 420px;
    height: 420px;

    border: 1px solid rgba(234, 212, 156, .15);
    border-radius: 50%;

    animation: openingRotate 25s linear infinite;
}

.opening::after {
    content: "✥";

    position: absolute;

    top: 12%;
    left: 50%;

    transform: translateX(-50%);

    font-size: 80px;

    color: var(--gold2);

    opacity: .12;

    animation: gentleFloat 5s ease-in-out infinite;
}

.opening.hide {
    opacity: 0;
    transform: scale(1.03);
    pointer-events: none;
}

.opening-inner {
    max-width: 600px;
    position: relative;
    z-index: 2;

    animation: openingContent 1.1s ease both;
}

.opening .small {
    letter-spacing: .28em;
    font-size: .72rem;
}

.opening h1 {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(4rem, 13vw, 8rem);
    line-height: .82;

    margin: 24px 0;
}

.opening h1 span {
    font-family: 'Cormorant Garamond';
    font-size: .38em;
}

.gold-line {
    height: 1px;
    width: 120px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold2),
            transparent
        );

    margin: 20px auto;

    animation: goldShimmer 3s ease-in-out infinite;
}


/* ---------------------------------------------------------
   4. BUTTONS
   --------------------------------------------------------- */

.btn {
    display: inline-flex;

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

    text-decoration: none;

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

    background: var(--maroon);

    color: #fff8e9;

    padding: 13px 22px;

    border-radius: 999px;

    font-size: .72rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    font-weight: 700;

    box-shadow:
        0 10px 24px rgba(91, 24, 37, .2);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        background var(--transition),
        border-color var(--transition);
}

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

    box-shadow:
        0 15px 30px rgba(91, 24, 37, .28);
}

.btn:active,
.btn.touch-active {
    transform: translateY(0) scale(.97);
}

.btn.light {
    background: transparent;
    border-color: var(--gold2);
}

.btn.light:hover {
    background: rgba(234, 212, 156, .12);
}


/* ---------------------------------------------------------
   5. HERO
   --------------------------------------------------------- */

.hero {
    min-height: 100svh;

    padding: 40px 18px 80px;

    display: grid;
    place-items: center;

    background:
        radial-gradient(
            circle at 50% 12%,
            #fffdf7 0,
            #f7eddb 60%,
            #ead8b8 100%
        );

    position: relative;

    overflow: hidden;
}


/* Background ornaments */

.hero:before,
.hero:after {
    content: '❦';

    position: absolute;

    color: var(--gold);

    font-size: 120px;

    opacity: .16;

    pointer-events: none;

    animation: gentleFloat 7s ease-in-out infinite;
}

.hero:before {
    top: 25px;
    left: 4%;
}

.hero:after {
    bottom: 35px;
    right: 4%;

    transform: rotate(180deg);

    animation-delay: -3s;
}


/* ---------------------------------------------------------
   6. TRADITIONAL ARCH
   --------------------------------------------------------- */

.arch {
    width: min(720px, 94vw);

    min-height: 760px;

    padding: 90px 45px 70px;

    position: relative;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(255, 250, 241, .94),
            rgba(255, 247, 232, .78)
        );

    border: 1px solid rgba(196, 154, 74, .7);

    box-shadow: var(--shadow);

    clip-path:
        polygon(
            0 11%,
            8% 5%,
            16% 2%,
            25% 0,
            50% 0,
            75% 0,
            84% 2%,
            92% 5%,
            100% 11%,
            100% 100%,
            0 100%
        );

    animation:
        archEntrance 1.2s cubic-bezier(.22, 1, .36, 1) both;
}


/* Inner border */

.arch:before {
    content: '';

    position: absolute;

    inset: 18px;

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

    pointer-events: none;

    opacity: .8;
}


/* Top ornament */

.arch:after {
    content: '✥';

    position: absolute;

    top: 28px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 42px;

    color: var(--gold);

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


/* ---------------------------------------------------------
   7. HERO TYPOGRAPHY
   --------------------------------------------------------- */

.eyebrow {
    font-size: .65rem;

    letter-spacing: .3em;

    text-transform: uppercase;

    color: var(--maroon2);

    font-weight: 700;
}

.parents {
    font-family: 'Cormorant Garamond';

    font-size: 1.05rem;

    line-height: 1.45;
}

.parents span {
    font-style: italic;
    color: var(--gold);
}

.ornament {
    font-size: 38px;

    color: var(--gold);

    margin: 14px;

    animation:
        ornamentPulse 5s ease-in-out infinite;
}

.names {
    font-family: 'Great Vibes', cursive;

    font-weight: 400;

    font-size: clamp(4rem, 11vw, 7rem);

    line-height: .78;

    color: var(--maroon);

    margin: 22px 0 25px;

    text-shadow:
        0 2px 12px rgba(91, 24, 37, .08);
}

.names i {
    font-family: 'Cormorant Garamond';

    font-size: .42em;
}

.invite {
    max-width: 480px;

    margin: 0 auto 24px;

    font-family: 'Cormorant Garamond';

    font-size: 1.25rem;

    line-height: 1.45;
}

.invite span {
    font-style: italic;
    color: var(--gold);
}


/* ---------------------------------------------------------
   8. DATE
   --------------------------------------------------------- */

.date {
    display: inline-grid;

    grid-template-columns: auto 1fr;

    align-items: center;

    gap: 16px;

    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);

    padding: 15px 22px;

    text-align: left;

    position: relative;
}

.date::before,
.date::after {
    content: '✦';

    position: absolute;

    color: var(--gold);

    font-size: 10px;
}

.date::before {
    left: -6px;
}

.date::after {
    right: -6px;
}

.date strong {
    font-family: 'Cormorant Garamond';

    font-size: 4.5rem;

    color: var(--maroon);

    line-height: .75;
}

.date span {
    font-size: .7rem;

    letter-spacing: .14em;
}

.date em {
    grid-column: 1/-1;

    text-align: center;

    font-style: normal;

    font-size: .6rem;

    letter-spacing: .28em;

    color: var(--maroon2);
}


/* ---------------------------------------------------------
   9. SECTIONS
   --------------------------------------------------------- */

section {
    padding: 90px 18px;
}

.section-inner {
    width: min(1050px, 100%);

    margin: auto;

    text-align: center;
}

h2 {
    font-family: 'Cormorant Garamond';

    font-size: clamp(2.3rem, 6vw, 4rem);

    font-weight: 500;

    color: var(--maroon);

    margin: 8px 0 20px;
}


/* ---------------------------------------------------------
   10. COUNTDOWN
   --------------------------------------------------------- */

.countdown {
    background: var(--maroon);

    color: #fff7e8;

    text-align: center;

    position: relative;

    overflow: hidden;
}

.countdown::before {
    content: '✥';

    position: absolute;

    top: 50%;
    left: 4%;

    transform: translateY(-50%);

    font-size: 150px;

    color: var(--gold2);

    opacity: .05;

    animation: gentleFloat 8s ease-in-out infinite;
}

.countdown::after {
    content: '✥';

    position: absolute;

    top: 50%;
    right: 4%;

    transform: translateY(-50%);

    font-size: 150px;

    color: var(--gold2);

    opacity: .05;

    animation: gentleFloat 8s ease-in-out infinite reverse;
}

.countdown .eyebrow {
    color: var(--gold2);
}

.countdown h2 {
    color: #fff7e8;
}

.timer {
    display: grid;

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

    max-width: 720px;

    margin: 35px auto 0;

    border: 1px solid rgba(234, 212, 156, .5);

    position: relative;

    z-index: 2;
}

.timer div {
    padding: 22px 8px;

    border-right:
        1px solid rgba(234, 212, 156, .35);

    transition:
        background .3s ease;
}

.timer div:last-child {
    border: 0;
}

.timer div:hover {
    background: rgba(234, 212, 156, .06);
}

.timer b {
    display: block;

    font-family: 'Cormorant Garamond';

    font-size: 3rem;

    font-weight: 500;

    min-width: 2ch;
}

.timer span {
    font-size: .58rem;

    letter-spacing: .2em;

    text-transform: uppercase;

    color: var(--gold2);
}


/* Countdown number animation */

.count-change {
    animation:
        numberFlip .45s cubic-bezier(.22, 1, .36, 1);
}


/* ---------------------------------------------------------
   11. EVENTS
   --------------------------------------------------------- */

.events {
    background:
        linear-gradient(
            #fffaf1,
            #f2e5cd
        );
}

.cards {
    display: grid;

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

    gap: 20px;

    margin-top: 35px;
}

.card {
    background:
        rgba(255, 255, 255, .7);

    border:
        1px solid rgba(196, 154, 74, .5);

    padding: 32px 24px;

    box-shadow:
        0 12px 35px rgba(70, 35, 25, .08);

    position: relative;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition),
        background var(--transition);
}

.card:hover,
.card.card-hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 45px rgba(70, 35, 25, .14);

    border-color:
        rgba(196, 154, 74, .8);

    background:
        rgba(255, 255, 255, .9);
}


/* Top star */

.card:before {
    content: '✦';

    color: var(--gold);

    font-size: 20px;

    position: absolute;

    top: 12px;
    left: 50%;

    transform: translateX(-50%);

    transition:
        transform .5s ease;
}

.card:hover:before {
    transform:
        translateX(-50%)
        rotate(180deg)
        scale(1.15);
}

.card .icon {
    font-size: 38px;

    color: var(--maroon);

    margin: 12px;

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1);
}

.card:hover .icon {
    transform:
        translateY(-3px)
        scale(1.08);
}

.card h3 {
    font-family: 'Cormorant Garamond';

    font-size: 1.8rem;

    color: var(--maroon);

    margin: 5px;
}

.card p {
    line-height: 1.6;
}

.time {
    font-weight: 700;

    color: var(--gold);

    letter-spacing: .08em;
}


/* ---------------------------------------------------------
   12. VENUE
   --------------------------------------------------------- */

.venue {
    background: var(--maroon);

    color: #fff7e8;

    text-align: center;

    position: relative;

    overflow: hidden;
}

.venue::before {
    content: '❦';

    position: absolute;

    left: 5%;
    top: 50%;

    font-size: 150px;

    color: var(--gold2);

    opacity: .04;

    animation: gentleFloat 8s ease-in-out infinite;
}

.venue::after {
    content: '❦';

    position: absolute;

    right: 5%;
    top: 50%;

    font-size: 150px;

    color: var(--gold2);

    opacity: .04;

    animation: gentleFloat 8s ease-in-out infinite reverse;
}

.venue .frame {
    width: min(760px, 100%);

    margin: auto;

    padding: 60px 25px;

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

    position: relative;

    z-index: 2;
}

.venue .frame:before {
    content: '❦';

    position: absolute;

    top: -20px;
    left: 50%;

    transform: translateX(-50%);

    background: var(--maroon);

    padding: 0 14px;

    color: var(--gold2);

    font-size: 32px;

    animation:
        ornamentPulse 5s ease-in-out infinite;
}

.venue h2 {
    color: #fff7e8;
}

.venue p {
    font-family: 'Cormorant Garamond';

    font-size: 1.3rem;
}


/* ---------------------------------------------------------
   13. RSVP
   --------------------------------------------------------- */

.rsvp {
    text-align: center;

    background:
        linear-gradient(
            135deg,
            #efe0c3,
            #f7eddb
        );
}

.rsvp .section-inner {
    position: relative;
}

.rsvp h2 {
    margin-bottom: 10px;
}

.rsvp p {
    line-height: 1.7;
}

.phone {
    font-family: 'Cormorant Garamond';

    font-size: 1.5rem;

    color: var(--maroon);

    letter-spacing: .04em;
}


/* ---------------------------------------------------------
   14. FOOTER
   --------------------------------------------------------- */

footer {
    text-align: center;

    background: #351019;

    color: #f7e7c6;

    padding: 55px 18px 95px;
}

.footer-mark {
    font-size: 35px;

    color: var(--gold);

    margin-bottom: 10px;

    animation:
        gentleFloat 5s ease-in-out infinite;
}

footer small {
    display: block;

    margin-top: 8px;

    opacity: .75;
}


/* ---------------------------------------------------------
   15. BOTTOM NAVIGATION
   --------------------------------------------------------- */

.bottom-nav {
    position: fixed;

    z-index: 40;

    bottom: 14px;
    left: 50%;

    transform: translateX(-50%);

    width: min(520px, calc(100% - 24px));

    background:
        rgba(53, 16, 25, .94);

    backdrop-filter: blur(10px);

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

    border:
        1px solid rgba(234, 212, 156, .45);

    border-radius: 999px;

    padding: 7px;

    display: grid;

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

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

    animation:
        navEntrance .9s 1.2s cubic-bezier(.22, 1, .36, 1) both;
}

.bottom-nav a {
    color: #fff7e8;

    text-decoration: none;

    text-align: center;

    font-size: .62rem;

    letter-spacing: .08em;

    text-transform: uppercase;

    padding: 9px 4px;

    border-radius: 999px;

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

.bottom-nav a:hover {
    background:
        rgba(196, 154, 74, .2);

    color: var(--gold2);
}

.bottom-nav a.active {
    background:
        rgba(196, 154, 74, .18);

    color: var(--gold2);

    box-shadow:
        inset 0 0 0 1px rgba(234, 212, 156, .15);
}

.bottom-nav a:active,
.bottom-nav a.touch-active {
    transform: scale(.94);
}


/* ---------------------------------------------------------
   16. SCROLL REVEAL
   --------------------------------------------------------- */

.fade {
    opacity: 0;

    transform:
        translateY(28px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22, 1, .36, 1);
}

.fade.visible {
    opacity: 1;

    transform: none;
}


/* Slight stagger for event cards */

.cards .card:nth-child(1) {
    transition-delay: .05s;
}

.cards .card:nth-child(2) {
    transition-delay: .12s;
}

.cards .card:nth-child(3) {
    transition-delay: .19s;
}


/* ---------------------------------------------------------
   17. ANIMATIONS
   --------------------------------------------------------- */

@keyframes openingContent {

    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

@keyframes openingRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

@keyframes archEntrance {

    from {
        opacity: 0;
        transform:
            translateY(30px)
            scale(.97);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

}

@keyframes gentleFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

}

@keyframes ornamentPulse {

    0%,
    100% {
        opacity: .75;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }

}

@keyframes goldShimmer {

    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }

}

@keyframes numberFlip {

    0% {
        opacity: .35;
        transform:
            translateY(-6px)
            scale(.96);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scale(1);
    }

}

@keyframes navEntrance {

    from {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(25px);
    }

    to {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0);
    }

}


/* ---------------------------------------------------------
   18. MOBILE
   --------------------------------------------------------- */

@media (max-width: 760px) {

    .hero {
        padding:
            30px 12px 70px;
    }

    .arch {
        width: 96vw;

        min-height: 700px;

        padding:
            85px 28px 60px;
    }

    .arch:before {
        inset: 14px;
    }

    .parents {
        font-size: .98rem;
    }

    .invite {
        font-size: 1.15rem;
    }

    .names {
        font-size:
            clamp(3.6rem, 16vw, 5.5rem);
    }

    .date {
        gap: 12px;

        padding:
            14px 18px;
    }

    .date strong {
        font-size: 4rem;
    }

    section {
        padding:
            75px 15px;
    }

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

        gap: 16px;
    }

    .card {
        padding:
            30px 22px;
    }

    .timer {
        margin-top: 28px;
    }

    .timer b {
        font-size: 2.1rem;
    }

    .timer div {
        padding:
            18px 4px;
    }

    .timer span {
        font-size: .48rem;

        letter-spacing: .12em;
    }

    .venue .frame {
        padding:
            50px 20px;
    }

    .actions {
        flex-direction: column;

        align-items: center;
    }

    .actions .btn {
        width: min(300px, 100%);
    }

    .bottom-nav {
        bottom: 10px;

        width:
            calc(100% - 18px);

        padding: 6px;
    }

    .bottom-nav a {
        font-size: .55rem;

        padding:
            9px 2px;
    }

}


/* ---------------------------------------------------------
   19. SMALL PHONES
   --------------------------------------------------------- */

@media (max-width: 380px) {

    .opening h1 {
        font-size: 3.5rem;
    }

    .arch {
        min-height: 660px;

        padding:
            78px 22px 50px;
    }

    .names {
        font-size: 3.5rem;
    }

    .parents {
        font-size: .9rem;
    }

    .invite {
        font-size: 1.05rem;
    }

    .date strong {
        font-size: 3.5rem;
    }

    .timer b {
        font-size: 1.8rem;
    }

    .timer span {
        font-size: .42rem;
    }

}


/* ---------------------------------------------------------
   20. REDUCED MOTION
   --------------------------------------------------------- */

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

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    html {
        scroll-behavior: auto;
    }

    body {
        opacity: 1;
    }

}

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
}