/* ============================================================
   ROOT
============================================================ */

:root {

    --deep-maroon: #30050d;
    --maroon: #4a0e17;
    --maroon-light: #681523;

    --gold: #d4af37;
    --gold-light: #f3d77b;

    --cream: #f7f0df;

    --white: #ffffff;

    --border-gold:
        rgba(212,175,55,0.42);

}


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

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}


html {

    scroll-behavior: smooth;

}


body {

    min-height: 100vh;

    background:
        radial-gradient(
            circle at center,
            #641321,
            #30050d 58%,
            #180207
        );

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

    overflow: hidden;

}


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

.mobile-container {

    width: 100%;

    max-width: 430px;

    height: 100vh;

    max-height: 932px;

    margin: auto;

    overflow-y: auto;

    position: relative;

    background:
        #30050d;

    box-shadow:
        0 0 45px
        rgba(0,0,0,0.75);

    scrollbar-width: none;

}


.mobile-container::-webkit-scrollbar {

    display: none;

}


/* ============================================================
   MUSIC
============================================================ */

.music-control-btn {

    position: fixed;

    top: 18px;

    right: 18px;

    width: 43px;

    height: 43px;

    border-radius: 50%;

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

    background:
        rgba(45,5,12,0.86);

    color:
        var(--gold-light);

    z-index: 10000;

    cursor: pointer;

    backdrop-filter:
        blur(10px);

    box-shadow:
        0 8px 25px
        rgba(0,0,0,0.4);

    transition:
        transform .3s ease;

}


.music-control-btn:hover {

    transform:
        scale(1.08);

}


/* ============================================================
   WELCOME
============================================================ */

.welcome-overlay {

    position: absolute;

    inset: 0;

    z-index: 5000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(48,5,13,.2),
            rgba(48,5,13,.7)
        ),
        url('assets/bg4.png');

    background-size: cover;

    background-position: center;

    transition:
        transform 1.2s
        cubic-bezier(.77,0,.175,1),
        opacity .8s ease;

    overflow: hidden;

}


.welcome-overlay.slide-up {

    transform:
        translateY(-100%);

    opacity: 0;

    pointer-events: none;

}


.welcome-frame-container {

    width: 86%;

    max-width: 330px;

    position: relative;

    background:
        url('assets/bg3.png')
        center / contain
        no-repeat;

    filter:
        drop-shadow(
            0 18px 30px
            rgba(0,0,0,.65)
        );

}


.welcome-frame-container::before {

    content: "";

    display: block;

    padding-top: 145%;

}


.welcome-content {

    position: absolute;

    inset:
        25% 15%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    text-align: center;

}


.welcome-subtitle {

    color:
        var(--gold);

    font-family:
        'Cinzel',
        serif;

    font-size:
        .6rem;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


.welcome-title {

    color:
        white;

    font-family:
        'Cinzel',
        serif;

    font-size:
        1rem;

    margin:
        10px 0;

}


.open-btn {

    padding:
        7px 18px;

    color:
        var(--gold-light);

    background:
        transparent;

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

    font-family:
        'Cinzel',
        serif;

    font-size:
        .6rem;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

}


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

.hero-section {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding:
        55px 18px;

    overflow: hidden;

    color:
        white;

    background:
        linear-gradient(
            to bottom,
            rgba(43,5,12,.12),
            rgba(43,5,12,.34)
        ),
        url('assets/bg2.png');

    background-size: cover;

    background-position: center;

}


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

.hero-glow {

    position: absolute;

    width: 330px;

    height: 330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,.17),
            rgba(212,175,55,.06) 35%,
            transparent 70%
        );

    filter:
        blur(2px);

    animation:
        breathingGlow
        5s
        ease-in-out
        infinite;

    pointer-events: none;

}


@keyframes breathingGlow {

    0%,
    100% {

        transform:
            scale(.88);

        opacity:
            .65;

    }

    50% {

        transform:
            scale(1.12);

        opacity:
            1;

    }

}


/* ============================================================
   ROYAL ORBITS
============================================================ */

.royal-orbit {

    position: absolute;

    left: 50%;

    top: 47%;

    border:
        1px solid
        rgba(212,175,55,.15);

    border-radius: 50%;

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

    pointer-events: none;

}


.orbit-one {

    width: 300px;

    height: 300px;

    animation:
        orbitRotate
        28s
        linear
        infinite;

}


.orbit-two {

    width: 250px;

    height: 250px;

    border-style:
        dashed;

    animation:
        orbitRotateReverse
        35s
        linear
        infinite;

}


.orbit-three {

    width: 195px;

    height: 195px;

    border-color:
        rgba(212,175,55,.23);

    animation:
        orbitRotate
        20s
        linear
        infinite;

}


@keyframes orbitRotate {

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

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

}


@keyframes orbitRotateReverse {

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

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

}


/* ============================================================
   FLOATING ORNAMENTS
============================================================ */

.floating-ornament {

    position: absolute;

    color:
        rgba(243,215,123,.7);

    font-size:
        1rem;

    pointer-events: none;

    animation:
        floatOrnament
        5s
        ease-in-out
        infinite;

}


.ornament-one {

    top: 22%;

    left: 15%;

}


.ornament-two {

    top: 30%;

    right: 13%;

    animation-delay:
        1.2s;

}


.ornament-three {

    bottom: 27%;

    left: 17%;

    animation-delay:
        2.2s;

}


.ornament-four {

    bottom: 32%;

    right: 16%;

    animation-delay:
        3s;

}


@keyframes floatOrnament {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(0deg);

        opacity:
            .35;

    }

    50% {

        transform:
            translateY(-12px)
            rotate(45deg);

        opacity:
            1;

    }

}


/* ============================================================
   PARTICLES
============================================================ */

.hero-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

}


.hero-particle {

    position: absolute;

    width: 3px;

    height: 3px;

    border-radius: 50%;

    background:
        var(--gold-light);

    box-shadow:
        0 0 8px
        rgba(243,215,123,.8);

    animation:
        particleFloat
        var(--duration)
        ease-in-out
        infinite;

}


@keyframes particleFloat {

    0% {

        transform:
            translateY(30px)
            scale(.5);

        opacity:
            0;

    }

    20% {

        opacity:
            .8;

    }

    70% {

        opacity:
            .5;

    }

    100% {

        transform:
            translateY(-120px)
            scale(1.2);

        opacity:
            0;

    }

}


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

.hero-text-wrapper {

    position: relative;

    z-index: 10;

    width: 100%;

    max-width: 410px;

    display: flex;

    align-items: center;

    flex-direction: column;

    padding:
        0 5px;

}


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

.top-royal-symbol {

    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 13px;

    opacity: 0;

}


.top-royal-symbol span {

    width: 32px;

    height: 1px;

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

}


.top-royal-symbol span:last-child {

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

}


.top-royal-symbol b {

    color:
        var(--gold);

    font-size:
        .9rem;

    animation:
        sparkleRotate
        3s
        linear
        infinite;

}


@keyframes sparkleRotate {

    to {

        transform:
            rotate(360deg);

    }

}


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

.cinzel-subtitle {

    font-family:
        'Cinzel',
        serif;

    font-size:
        .72rem;

    letter-spacing:
        2.7px;

    text-transform:
        uppercase;

    color:
        var(--gold-light);

    opacity:
        0;

    line-height:
        1.5;

}


/* ============================================================
   NAMES
============================================================ */

.names-animated {

    width: 100%;

    max-width: 100%;

    padding:
        0 3px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 3px;

    font-family:
        'Pinyon Script',
        cursive;

    font-size:
        clamp(
            2.15rem,
            10vw,
            2.85rem
        );

    line-height:
        .95;

    color:
        white;

    text-align:
        center;

    margin:
        6px 0;

    opacity:
        0;

    text-shadow:
        0 0 8px
        rgba(255,255,255,.2),

        0 0 25px
        rgba(212,175,55,.35);

}


.names-animated span {

    display:
        inline-block;

}


.name-amp {

    font-family:
        'Cinzel',
        serif;

    font-size:
        .43em;

    color:
        var(--gold-light);

    transform:
        translateY(-2px);

}


/* ============================================================
   NAME DIVIDER
============================================================ */

.name-divider {

    display: flex;

    align-items: center;

    gap: 8px;

    margin:
        9px 0;

    opacity: 0;

}


.name-divider span {

    width:
        45px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,.8)
        );

}


.name-divider span:last-child {

    background:
        linear-gradient(
            90deg,
            rgba(212,175,55,.8),
            transparent
        );

}


.name-divider i {

    color:
        var(--gold);

    font-size:
        .45rem;

}


/* ============================================================
   DATE
============================================================ */

.date-location {

    font-size:
        .76rem;

    letter-spacing:
        1.8px;

    color:
        #e9e0d1;

    opacity:
        0;

}


.date-location b {

    color:
        var(--gold);

    padding:
        0 4px;

}


/* ============================================================
   COUNTDOWN
============================================================ */

.countdown-container {

    display: flex;

    justify-content: center;

    gap:
        8px;

    margin-top:
        26px;

    opacity:
        0;

}


.countdown-box {

    min-width:
        57px;

    padding:
        10px 7px;

    border:
        1px solid
        rgba(212,175,55,.55);

    border-radius:
        8px;

    background:
        linear-gradient(
            145deg,
            rgba(71,10,20,.75),
            rgba(30,3,9,.82)
        );

    backdrop-filter:
        blur(8px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.07),

        0 7px 18px
        rgba(0,0,0,.28);

    animation:
        countdownBreath
        3.5s
        ease-in-out
        infinite;

}


.countdown-box:nth-child(2) {

    animation-delay:
        .4s;

}


.countdown-box:nth-child(3) {

    animation-delay:
        .8s;

}


.countdown-box:nth-child(4) {

    animation-delay:
        1.2s;

}


@keyframes countdownBreath {

    0%,
    100% {

        transform:
            translateY(0);

        box-shadow:
            0 7px 18px
            rgba(0,0,0,.28);

    }

    50% {

        transform:
            translateY(-4px);

        box-shadow:
            0 12px 25px
            rgba(212,175,55,.18);

    }

}


.countdown-box span {

    display:
        block;

    font-family:
        'Cinzel',
        serif;

    color:
        var(--gold-light);

    font-size:
        1.05rem;

    font-weight:
        600;

}


.countdown-box small {

    display:
        block;

    margin-top:
        3px;

    color:
        #bdb5aa;

    font-size:
        .45rem;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

}


/* ============================================================
   INVITATION LINE
============================================================ */

.hero-invitation-line {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        25px;

    color:
        rgba(243,215,123,.75);

    font-family:
        'Cinzel',
        serif;

    font-size:
        .47rem;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;

    opacity:
        0;

}


.hero-invitation-line .line {

    width:
        25px;

    height:
        1px;

    background:
        rgba(212,175,55,.45);

}


/* ============================================================
   HERO ACTIVE ANIMATIONS
============================================================ */

.hero-section.active
.top-royal-symbol {

    animation:
        fadeUp
        .9s
        ease
        forwards;

}


.hero-section.active
.cinzel-subtitle {

    animation:
        fadeUp
        1s
        .2s
        ease
        forwards;

}


.hero-section.active
.names-animated {

    animation:
        nameReveal
        1.4s
        .35s
        cubic-bezier(.2,.8,.2,1)
        forwards;

}


.hero-section.active
.name-divider {

    animation:
        fadeUp
        .9s
        .65s
        ease
        forwards;

}


.hero-section.active
.date-location {

    animation:
        fadeUp
        .9s
        .8s
        ease
        forwards;

}


.hero-section.active
.countdown-container {

    animation:
        fadeUp
        1s
        1s
        ease
        forwards;

}


.hero-section.active
.hero-invitation-line {

    animation:
        fadeUp
        1s
        1.25s
        ease
        forwards;

}


@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(18px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


@keyframes nameReveal {

    from {

        opacity: 0;

        transform:
            scale(.78)
            translateY(15px);

        filter:
            blur(5px);

    }

    to {

        opacity: 1;

        transform:
            scale(1)
            translateY(0);

        filter:
            blur(0);

    }

}


/* ============================================================
   SCROLL INDICATOR
============================================================ */

.scroll-indicator {

    position: absolute;

    bottom:
        23px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        5px;

    color:
        rgba(243,215,123,.8);

    font-family:
        'Cinzel',
        serif;

    font-size:
        .48rem;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    z-index:
        10;

}


.scroll-mouse {

    width:
        17px;

    height:
        27px;

    border:
        1px solid
        rgba(243,215,123,.65);

    border-radius:
        12px;

    display:
        flex;

    justify-content:
        center;

    padding-top:
        5px;

}


.scroll-mouse span {

    width:
        2px;

    height:
        6px;

    border-radius:
        2px;

    background:
        var(--gold-light);

    animation:
        mouseScroll
        1.5s
        ease-in-out
        infinite;

}


.scroll-indicator b {

    font-size:
        .7rem;

    animation:
        arrowBounce
        1.5s
        ease-in-out
        infinite;

}


@keyframes mouseScroll {

    0%,
    100% {

        transform:
            translateY(0);

        opacity:
            .4;

    }

    50% {

        transform:
            translateY(7px);

        opacity:
            1;

    }

}


@keyframes arrowBounce {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(4px);

    }

}


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

.story-section,
.details-section,
.wishes-section,
.venue-section,
.rsvp-section-wrap {

    position: relative;

    min-height:
        90vh;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        70px 20px;

    overflow:
        hidden;

}


.story-section {

    background:
        linear-gradient(
            rgba(35,5,10,.72),
            rgba(35,5,10,.88)
        ),
        url('assets/bg4.png')
        center / cover;

}


/* ============================================================
   CONTENT CARD
============================================================ */

.content-card,
.details-container,
.venue-card {

    position:
        relative;

    z-index:
        5;

    width:
        100%;

    max-width:
        360px;

    padding:
        35px 22px;

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

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            rgba(73,10,21,.94),
            rgba(28,4,9,.96)
        );

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 25px 55px
        rgba(0,0,0,.55),

        inset 0 1px 0
        rgba(255,255,255,.07);

    text-align:
        center;

}


.card-badge {

    display:
        inline-block;

    padding:
        6px 12px;

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

    border-radius:
        20px;

    color:
        var(--gold-light);

    background:
        rgba(212,175,55,.1);

    font-family:
        'Cinzel',
        serif;

    font-size:
        .55rem;

    letter-spacing:
        1.7px;

    text-transform:
        uppercase;

}


.section-heading,
.section-title {

    font-family:
        'Cinzel',
        serif;

    color:
        var(--gold-light);

    font-size:
        1.3rem;

    line-height:
        1.4;

    margin:
        15px 0;

}


.gold-line {

    width:
        55px;

    height:
        1px;

    margin:
        0 auto 18px;

    background:
        var(--gold);

}


.story-text {

    color:
        #d9d0c1;

    font-size:
        .82rem;

    line-height:
        1.75;

}


.story-extra {

    margin-top:
        12px;

}


.floating-anim {

    animation:
        floatingCard
        5s
        ease-in-out
        infinite;

}


@keyframes floatingCard {

    0%,
    100% {

        transform:
            translateY(0);

    }

    50% {

        transform:
            translateY(-7px);

    }

}


/* ============================================================
   EVENTS
============================================================ */

.details-section {

    background:
        linear-gradient(
            rgba(35,5,10,.72),
            rgba(35,5,10,.9)
        ),
        url('assets/bg2.png')
        center / cover;

}


.section-ornament {

    color:
        var(--gold);

    font-size:
        .7rem;

    letter-spacing:
        5px;

    margin-bottom:
        8px;

}


.event-card {

    display:
        flex;

    gap:
        12px;

    text-align:
        left;

    padding:
        15px 0;

    border-bottom:
        1px solid
        rgba(212,175,55,.18);

}


.event-card:last-of-type {

    border-bottom:
        none;

}


.event-icon {

    flex:
        0 0 40px;

    width:
        40px;

    height:
        40px;

    border:
        1px solid
        rgba(212,175,55,.4);

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(212,175,55,.08);

}


.event-content {

    flex:
        1;

}


.event-number {

    color:
        rgba(212,175,55,.55);

    font-family:
        'Cinzel',
        serif;

    font-size:
        .48rem;

    letter-spacing:
        1px;

}


.event-card h3 {

    color:
        white;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .85rem;

    margin:
        2px 0 5px;

}


.event-card p {

    color:
        #cfc5b6;

    font-size:
        .7rem;

    line-height:
        1.55;

}


.event-card em {

    color:
        var(--gold-light);

    font-style:
        normal;

}


/* ============================================================
   PETAL BUTTON
============================================================ */

.interactive-petal-btn,
.rsvp-submit-btn {

    border:
        none;

    width:
        100%;

    padding:
        12px;

    border-radius:
        8px;

    background:
        linear-gradient(
            135deg,
            #d4af37,
            #a77d08
        );

    color:
        #1c0508;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .65rem;

    font-weight:
        700;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

    cursor:
        pointer;

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

}


.interactive-petal-btn {

    margin-top:
        18px;

}


.interactive-petal-btn:hover,
.rsvp-submit-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(212,175,55,.35);

}


/* ============================================================
   WISHES
============================================================ */

.wishes-section {

    background:
        linear-gradient(
            rgba(35,5,10,.7),
            rgba(35,5,10,.9)
        ),
        url('assets/bg4.png')
        center / cover;

}


.wish-input-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}


.wish-input-group input,
.wish-input-group textarea,
#rsvpForm input,
#rsvpForm select {

    width:
        100%;

    padding:
        12px;

    border:
        1px solid
        rgba(212,175,55,.3);

    border-radius:
        8px;

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

    color:
        white;

    outline:
        none;

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

    font-size:
        .75rem;

}


.wish-input-group textarea {

    resize:
        vertical;

}


.wish-input-group input:focus,
.wish-input-group textarea:focus,
#rsvpForm input:focus,
#rsvpForm select:focus {

    border-color:
        var(--gold);

}


.wish-input-group input::placeholder,
.wish-input-group textarea::placeholder,
#rsvpForm input::placeholder {

    color:
        #aaa;

}


.small-note {

    margin-top:
        9px;

    color:
        #a9a095;

    font-size:
        .6rem;

}


/* ============================================================
   VENUE
============================================================ */

.venue-section {

    min-height:
        95vh;

    background:
        linear-gradient(
            rgba(30,4,9,.62),
            rgba(30,4,9,.9)
        ),
        url('assets/bg1.png')
        center / cover;

}


.palace-backdrop {

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

}


.palace-arch {

    position:
        absolute;

    top:
        13%;

    width:
        125px;

    height:
        280px;

    border:
        1px solid
        rgba(212,175,55,.14);

    border-bottom:
        none;

    border-radius:
        100px 100px 0 0;

}


.arch-left {

    left:
        -70px;

}


.arch-right {

    right:
        -70px;

}


.venue-card {

    padding:
        42px 24px;

}


.venue-decoration {

    color:
        var(--gold);

    font-size:
        1.3rem;

    margin-bottom:
        12px;

}


.venue-label {

    color:
        var(--gold);

    font-family:
        'Cinzel',
        serif;

    font-size:
        .55rem;

    letter-spacing:
        3px;

}


.venue-title {

    color:
        white;

    font-family:
        'Pinyon Script',
        cursive;

    font-size:
        3rem;

    line-height:
        1;

    margin:
        9px 0;

}


.venue-location {

    color:
        #ddd2c1;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .65rem;

    letter-spacing:
        2px;

}


.palace-divider {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    margin:
        22px 0;

}


.palace-divider span {

    width:
        55px;

    height:
        1px;

    background:
        var(--gold);

    opacity:
        .45;

}


.palace-divider b {

    color:
        var(--gold);

    font-size:
        .5rem;

}


.venue-description {

    color:
        #d0c5b5;

    font-size:
        .75rem;

    line-height:
        1.7;

    margin-bottom:
        22px;

}


.venue-map-btn {

    width:
        100%;

    padding:
        12px;

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

    border-radius:
        8px;

    background:
        rgba(212,175,55,.08);

    color:
        var(--gold-light);

    font-family:
        'Cinzel',
        serif;

    font-size:
        .62rem;

    letter-spacing:
        1.3px;

    text-transform:
        uppercase;

}


/* ============================================================
   RSVP
============================================================ */

.rsvp-section-wrap {

    flex-direction:
        column;

    justify-content:
        center;

    background:
        linear-gradient(
            rgba(35,5,10,.8),
            rgba(20,2,7,.96)
        ),
        url('assets/bg2.png')
        center / cover;

}


#rsvpForm {

    display:
        flex;

    flex-direction:
        column;

}


#rsvpForm input,
#rsvpForm select {

    margin-bottom:
        10px;

}


#rsvpForm option {

    background:
        #2b080e;

    color:
        white;

}


.success-message {

    display:
        none;

    margin-top:
        15px;

    color:
        var(--gold-light);

    font-size:
        .75rem;

}


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

.footer-note {

    margin-top:
        20px;

    text-align:
        center;

}


.footer-note p {

    color:
        #bcb2a5;

    font-size:
        .65rem;

    margin-bottom:
        5px;

}


.footer-note h4 {

    color:
        var(--gold);

    font-family:
        'Pinyon Script',
        cursive;

    font-size:
        2rem;

}


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

.global-petals-container {

    position:
        fixed;

    inset:
        0;

    pointer-events:
        none;

    overflow:
        hidden;

    z-index:
        99999;

}


/* ============================================================
   SPARKLES
============================================================ */

.sparkle-particle {

    position:
        absolute;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        var(--gold-light);

    box-shadow:
        0 0 12px
        var(--gold);

    pointer-events:
        none;

    animation:
        sparkleOut
        .8s
        ease
        forwards;

}


@keyframes sparkleOut {

    from {

        opacity:
            1;

        transform:
            translate(0,0)
            scale(1);

    }

    to {

        opacity:
            0;

        transform:
            translate(
                var(--dx),
                var(--dy)
            )
            scale(0);

    }

}


/* ============================================================
   PETAL ANIMATION
============================================================ */

.rose-petal {

    position:
        absolute;

    top:
        -40px;

    background-size:
        contain;

    background-repeat:
        no-repeat;

    pointer-events:
        none;

    animation:
        fallAndDrift
        var(--fall-time)
        linear
        forwards;

}


@keyframes fallAndDrift {

    0% {

        transform:
            translateY(-50px)
            translateX(0)
            rotate(0deg);

        opacity:
            0;

    }

    15% {

        opacity:
            .85;

    }

    85% {

        opacity:
            .75;

    }

    100% {

        transform:
            translateY(105vh)
            translateX(55px)
            rotate(360deg);

        opacity:
            0;

    }

}


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

@media (max-width:430px) {


    .hero-section {

        padding:
            55px 8px;

    }


    .hero-glow {

        width:
            290px;

        height:
            290px;

    }


    .orbit-one {

        width:
            275px;

        height:
            275px;

    }


    .orbit-two {

        width:
            225px;

        height:
            225px;

    }


    .orbit-three {

        width:
            180px;

        height:
            180px;

    }


    .names-animated {

        font-size:
            clamp(
                2rem,
                9.5vw,
                2.65rem
            );

    }


    .cinzel-subtitle {

        font-size:
            .65rem;

        letter-spacing:
            2.1px;

    }


    .countdown-box {

        min-width:
            54px;

    }


}


/* ============================================================
   VERY SMALL PHONES
============================================================ */

@media (max-width:360px) {


    .names-animated {

        font-size:
            1.85rem;

    }


    .countdown-container {

        gap:
            5px;

    }


    .countdown-box {

        min-width:
            50px;

        padding:
            8px 5px;

    }


    .countdown-box span {

        font-size:
            .95rem;

    }


    .hero-invitation-line {

        font-size:
            .42rem;

    }

}

/* ============================================================
   LIGHT ROYAL THEME — readability refresh
   Keeps the original artwork/animations, but improves contrast.
============================================================ */

:root {
    --deep-maroon: #4a1020;
    --maroon: #6b1d2d;
    --maroon-light: #8b3143;
    --gold: #b88924;
    --gold-light: #c99d3b;
    --cream: #fffaf0;
    --ink: #4a2530;
    --muted-ink: #6e5960;
    --border-gold: rgba(184,137,36,.45);
}

body {
    background: radial-gradient(circle at center, #fffaf0 0%, #f4e7d4 65%, #ead6c0 100%);
}

.mobile-container {
    background: #fffaf0;
    box-shadow: 0 0 45px rgba(74,16,32,.22);
}

.music-control-btn {
    background: rgba(255,250,240,.94);
    color: var(--maroon);
    border-color: var(--gold);
    box-shadow: 0 8px 25px rgba(74,16,32,.18);
}

.hero-section {
    color: var(--ink);
    background:
        linear-gradient(to bottom, rgba(255,250,240,.10), rgba(255,250,240,.20)),
        url('assets/bg2.png');
    background-size: cover;
    background-position: center;
}

.hero-glow {
    background: radial-gradient(circle, rgba(184,137,36,.16), rgba(184,137,36,.06) 35%, transparent 70%);
}

.royal-orbit { border-color: rgba(184,137,36,.18); }
.orbit-three { border-color: rgba(184,137,36,.27); }

.floating-ornament { color: rgba(184,137,36,.75); }

.hero-particle {
    background: #d4aa55;
    box-shadow: 0 0 8px rgba(184,137,36,.55);
}

.top-royal-symbol span {
    background: linear-gradient(90deg, transparent, var(--gold));
}
.top-royal-symbol span:last-child {
    background: linear-gradient(90deg, var(--gold), transparent);
}
.top-royal-symbol b { color: var(--gold); }

.cinzel-subtitle {
    color: #86601a;
    font-size: .82rem;
    font-weight: 600;
}

.names-animated {
    color: #5b1728;
    font-size: clamp(2.45rem, 11vw, 3.25rem);
    text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 4px 18px rgba(91,23,40,.14);
}

.name-amp { color: #a8791d; }

.name-divider span {
    background: linear-gradient(90deg, transparent, rgba(184,137,36,.85));
}
.name-divider span:last-child {
    background: linear-gradient(90deg, rgba(184,137,36,.85), transparent);
}
.name-divider i { color: var(--gold); }

.date-location {
    color: #5e4a50;
    font-size: .86rem;
    font-weight: 500;
}
.date-location b { color: #a8791d; }

.countdown-container { margin-top: 28px; gap: 9px; }

.countdown-box {
    min-width: 62px;
    padding: 11px 8px;
    border-color: rgba(184,137,36,.55);
    background: linear-gradient(145deg, rgba(255,252,245,.97), rgba(244,231,212,.96));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 20px rgba(74,16,32,.14);
}

.countdown-box span {
    color: #6b1d2d;
    font-size: 1.18rem;
}
.countdown-box small {
    color: #77646a;
    font-size: .50rem;
    font-weight: 600;
}

.hero-invitation-line {
    color: #80601f;
    font-size: .53rem;
}
.hero-invitation-line .line { background: rgba(184,137,36,.52); }

.scroll-indicator {
    color: #80601f;
    font-size: .54rem;
}
.scroll-mouse { border-color: rgba(184,137,36,.7); }
.scroll-mouse span { background: var(--gold); }

/* Light sections */
.story-section {
    background:
        linear-gradient(rgba(255,250,240,.76), rgba(255,250,240,.86)),
        url('assets/bg1.png') center / cover;
}

.details-section {
    background:
        linear-gradient(rgba(255,250,240,.78), rgba(255,250,240,.88)),
        url('assets/bg2.png') center / cover;
}

.wishes-section {
    background:
        linear-gradient(rgba(255,250,240,.76), rgba(255,250,240,.88)),
        url('assets/bg1.png') center / cover;
}

.rsvp-section-wrap {
    background:
        linear-gradient(rgba(255,250,240,.80), rgba(255,250,240,.92)),
        url('assets/bg2.png') center / cover;
}

/* Cards become ivory instead of dark maroon */
.content-card,
.details-container,
.venue-card {
    border-color: rgba(184,137,36,.48);
    background: linear-gradient(145deg, rgba(255,252,246,.97), rgba(248,238,222,.96));
    box-shadow: 0 25px 55px rgba(74,16,32,.16), inset 0 1px 0 rgba(255,255,255,.95);
}

.card-badge {
    color: #8a631d;
    background: rgba(184,137,36,.08);
    font-size: .62rem;
}

.section-heading,
.section-title {
    color: #651c2e;
    font-size: 1.48rem;
}

.story-text {
    color: #5f4c53;
    font-size: .91rem;
    line-height: 1.82;
}

.section-ornament,
.venue-decoration,
.venue-label,
.palace-divider b,
.footer-note h4 {
    color: #a8791d;
}

.event-card { border-bottom-color: rgba(184,137,36,.22); }

.event-icon {
    border-color: rgba(184,137,36,.45);
    background: rgba(184,137,36,.08);
}

.event-number {
    color: #9a7224;
    font-size: .54rem;
}

.event-card h3 {
    color: #5d1b2b;
    font-size: .98rem;
}

.event-card p {
    color: #68565c;
    font-size: .77rem;
    line-height: 1.62;
}

.event-card em { color: #8b641d; }

.interactive-petal-btn,
.rsvp-submit-btn {
    background: linear-gradient(135deg, #b88924, #d0a84e);
    color: #fffaf0;
    font-size: .72rem;
    box-shadow: 0 6px 18px rgba(184,137,36,.18);
}

.wish-input-group input,
.wish-input-group textarea,
#rsvpForm input,
#rsvpForm select {
    border-color: rgba(184,137,36,.32);
    background: rgba(255,255,255,.70);
    color: #4a2530;
    font-size: .82rem;
}

.wish-input-group input::placeholder,
.wish-input-group textarea::placeholder,
#rsvpForm input::placeholder {
    color: #8b7a7f;
}

.small-note,
.footer-note p {
    color: #78666c;
    font-size: .67rem;
}

/* Venue keeps the rich burgundy artwork, with a lighter card */
.venue-section {
    background:
        linear-gradient(rgba(74,16,32,.35), rgba(74,16,32,.52)),
        url('assets/bg4.png') center / cover;
}

.palace-arch { border-color: rgba(212,170,85,.25); }

.venue-title {
    color: #6b1d2d;
    font-size: 3.2rem;
}

.venue-location {
    color: #655158;
    font-size: .72rem;
}

.venue-description {
    color: #66545a;
    font-size: .82rem;
    line-height: 1.78;
}

.venue-map-btn {
    background: rgba(184,137,36,.08);
    color: #79561a;
    font-size: .69rem;
}

#rsvpForm option {
    background: #fffaf0;
    color: #4a2530;
}

.success-message {
    color: #8a631d;
    font-size: .80rem;
}

.footer-note h4 { font-size: 2.15rem; }

/* Welcome screen remains rich, but its controls are clearer */
.welcome-subtitle {
    color: #e2bd67;
    font-size: .68rem;
}
.welcome-title { font-size: 1.12rem; }
.open-btn {
    color: #f0cf82;
    border-color: #d4aa55;
    font-size: .68rem;
}

/* Small-phone readability */
@media (max-width:430px) {
    .names-animated { font-size: clamp(2.25rem, 10.5vw, 3rem); }
    .cinzel-subtitle { font-size: .72rem; }
    .date-location { font-size: .82rem; }
    .countdown-box { min-width: 57px; }
    .countdown-box span { font-size: 1.10rem; }
    .section-heading, .section-title { font-size: 1.38rem; }
    .story-text { font-size: .88rem; }
    .event-card h3 { font-size: .94rem; }
    .event-card p { font-size: .74rem; }
}

@media (max-width:360px) {
    .names-animated { font-size: 2.05rem; }
    .countdown-box { min-width: 51px; }
}