/* ==========================================================================
   1. CSS VARIABLES (These act as defaults, dynamically updated by JS!)
   ========================================================================== */
:root {
    --bg-dark: #0b132b;
    --bg-light: #1c2541;
    --text-main: #f5f7ff;
    --text-muted: #cfd8ff;
    --accent: #f4d58d;

    --font-heading: 'Playfair Display', serif;
    --font-script: 'Great Vibes', cursive;
    --font-body: 'Lato', sans-serif;

    --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   2. GLOBAL RESET & BASE STYLES
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 600;
}

.script-font {
    font-family: var(--font-script);
    color: var(--accent);
    font-weight: normal;
}

section {
    padding: 80px 20px;
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

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

.reveal {
    opacity: 0;
    transform: translateY(50px) scale(0.97);
    transition: var(--transition-smooth);
    transition-duration: 1.2s;
    will-change: opacity, transform;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.glass-panel {
    background: rgba(28, 37, 65, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.02);
    border-radius: 20px;
}

.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    max-width: 600px;
    opacity: 0.7;
}

.section-divider::before,
.section-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: linear-gradient(to right, transparent, var(--accent));
}

.section-divider::after {
    background: linear-gradient(to left, transparent, var(--accent));
}

.section-divider .star-icon {
    color: var(--accent);
    margin: 0 20px;
    font-size: 1.2rem;
    filter: drop-shadow(0 0 8px var(--accent));
}

.ken-burns {
    animation: kenBurnsAnim 20s ease-in-out infinite alternate;
    transform-origin: center;
    will-change: transform;
}

@keyframes kenBurnsAnim {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

/* ==========================================================================
   3. BACKGROUND EFFECTS
   ========================================================================== */
.sky-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-dark);
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.parallax-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    will-change: transform;
}

.star {
    background-color: #fff;
    border-radius: 50%;
    animation: twinkle var(--duration) infinite alternate;
    will-change: opacity, transform;
    box-shadow: 0 0 3px #fff;
}

@keyframes twinkle {
    0% {
        opacity: 0.1;
        transform: scale(0.8);
    }

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

.real-clouds-container {
    z-index: 10;
    opacity: 0;
    mix-blend-mode: screen;
    height: 120vh;
    width: 100vw;
    top: -10vh;
    position: absolute;
    pointer-events: none;
}

.real-cloud {
    position: absolute;
    width: 200%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center;
    will-change: transform;
}

.real-cloud-1 {
    background-image: url('https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png');
    animation: driftRealClouds 80s linear infinite;
    z-index: 11;
}

.real-cloud-2 {
    background-image: url('https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png');
    animation: driftRealClouds 120s linear infinite;
    z-index: 10;
    opacity: 0.8;
}

@keyframes driftRealClouds {
    0% {
        transform: translateX(0);
    }

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

.shooting-star {
    position: absolute;
    top: 10%;
    right: 20%;
    width: 150px;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--text-main), transparent);
    transform: rotate(-45deg);
    opacity: 0;
    animation: shoot 5s linear infinite 1s;
}

@keyframes shoot {
    0% {
        transform: translate(0, 0) rotate(-45deg);
        opacity: 0;
    }

    2% {
        opacity: 1;
    }

    20% {
        transform: translate(-80vw, 80vh) rotate(-45deg);
        opacity: 0;
    }

    100% {
        transform: translate(-80vw, 80vh) rotate(-45deg);
        opacity: 0;
    }
}

/* ==========================================================================
   4. HERO SECTION 
   ========================================================================== */
#hero {
    height: 100vh;
    max-width: 100%;
    /* Overrides the global section 1200px limit */
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    position: relative;
    overflow: hidden;
}

.hero-center-group {
    position: relative;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -5vh;
}

.moon-stack {
    position: relative;
    width: 450px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.moon-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    filter: drop-shadow(0 0 40px rgba(100, 160, 255, 0.4));
    pointer-events: none;
}

.moon-3d-canvas {
    width: 100%;
    height: 100%;
    outline: none;
}

@keyframes moonAmbientPulse {
    0% {
        filter: drop-shadow(0 0 30px rgba(100, 160, 255, 0.3));
    }

    100% {
        filter: drop-shadow(0 0 70px rgba(100, 160, 255, 0.6));
    }
}

.constellation-wrapper {
    position: relative;
    width: 82%;
    z-index: 20;
    margin-top: -15px;
}

.constellation-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 180%;
    background: radial-gradient(ellipse at center, rgba(11, 19, 43, 0.2) 0%, transparent 60%);
    z-index: -1;
    filter: blur(15px);
    border-radius: 50%;
    opacity: 0;
    animation: fadeIn 2s ease forwards 2.5s;
}

.constellation-svg {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 12px rgba(255, 215, 0, 0.9)) drop-shadow(0 0 25px rgba(255, 215, 0, 0.6));
    overflow: visible;
}

.constellation-line {
    stroke: #ffd700;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.constellation-star {
    fill: #fffcd1;
    opacity: 0;
    transform: translate(var(--startX), var(--startY)) scale(0);
    animation: starFlyIn 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes starFlyIn {
    0% {
        opacity: 0;
        transform: translate(var(--startX), var(--startY)) scale(0);
        filter: drop-shadow(0 0 0px transparent);
    }

    60% {
        opacity: 1;
        transform: translate(calc(var(--startX) * 0.1), calc(var(--startY) * 0.1)) scale(1.2);
        filter: drop-shadow(0 0 15px #fff);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
        filter: drop-shadow(0 0 8px #ffd700);
    }
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

.c-connector {
    stroke: rgba(255, 215, 0, 0.6);
    stroke-width: 2.5;
    stroke-dasharray: 6 6;
    opacity: 0;
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

.hero-text {
    position: relative;
    margin-top: 15px;
    text-align: center;
    z-index: 40;
    opacity: 0;
}

.hero-text h1 {
    font-size: 3.8rem;
    margin-bottom: 5px;
    letter-spacing: 2px;
}

.name-highlight {
    color: #ffffff;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.9), 0 0 15px rgba(136, 187, 255, 0.9), 0 0 30px rgba(136, 187, 255, 0.7), 0 0 50px rgba(136, 187, 255, 0.4);
}

.hero-text p {
    font-size: 1.3rem;
    font-style: italic;
    color: #f5f7ff;
    letter-spacing: 1px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 10px rgba(136, 187, 255, 0.5);
    margin-top: 15px;
}

.hero-date {
    font-size: 1.5rem !important;
    font-family: var(--font-body) !important;
    color: #ffd700 !important;
    letter-spacing: 5px !important;
    font-weight: 400 !important;
    margin: 10px 0 15px 0 !important;
    text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700 !important;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.hero-date::before,
.hero-date::after {
    content: '--♦--';
    color: #ffd700;
    font-size: 0.85em;
    text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700;
}

.cloud-reveal-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.css-cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(35px);
    background: radial-gradient(ellipse at center, rgba(160, 200, 255, 0.8) 0%, rgba(120, 160, 255, 0.4) 40%, transparent 70%);
    pointer-events: none;
}

.c-left {
    width: 180vw;
    height: 180vh;
    left: -40vw;
    animation: cloudPartLeft 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.2s;
}

.c-right {
    width: 180vw;
    height: 180vh;
    right: -40vw;
    animation: cloudPartRight 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards 0.2s;
}

@keyframes cloudPartLeft {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-100vw) scale(1.2);
        opacity: 0;
    }
}

@keyframes cloudPartRight {
    0% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(100vw) scale(1.2);
        opacity: 0;
    }
}

/* ==========================================================================
   5. SECTIONS: COUPLE, EVENTS, RSVP, ETC.
   ========================================================================== */
.section-title {
    font-size: 3rem;
    margin-bottom: 50px;
    color: var(--accent);
    text-align: center;
}

.couple-split {
    display: flex;
    justify-content: center;
    gap: 80px;
    flex-wrap: wrap;
}

.person-card {
    text-align: center;
    width: 300px;
}

.theme-frame {
    width: 100%;
    height: 400px;
    margin: 0 auto 25px auto;
    border-radius: 150px 150px 15px 15px;
    padding: 6px;
    background: linear-gradient(145deg, var(--accent), rgba(28, 37, 65, 0.5), var(--silver-glow));
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 35px rgba(244, 213, 141, 0.5);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease;
}

.theme-frame:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 50px rgba(244, 213, 141, 0.7);
}

.theme-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 144px 144px 10px 10px;
}

.person-info {
    text-align: center;
}

.couple-title {
    font-family: var(--font-script);
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: -5px;
}

.couple-name {
    font-size: 2.2rem;
    color: var(--text-main);
    margin-bottom: 10px;
}

.couple-extra {
    color: var(--text-muted);
    font-size: 1rem;
    font-style: italic;
    line-height: 1.4;
    display: none;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.event-card {
    background: rgba(28, 37, 65, 0.5);
    border: 1px solid rgba(244, 213, 141, 0.15);
    padding: 40px 20px;
    border-radius: 15px;
    text-align: center;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
}

.event-card:hover {
    transform: translateY(-10px);
    background: rgba(28, 37, 65, 0.8);
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(244, 213, 141, 0.1);
}

.moon-icon {
    font-size: 3rem;
    margin-bottom: 15px;
    display: block;
    filter: drop-shadow(0 0 10px var(--text-muted));
}

.event-card h4 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--text-main);
}

.event-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 5px;
}

.save-date-container {
    text-align: center;
}

.countdown {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.time-box {
    padding: 20px;
    min-width: 110px;
}

.time-box span {
    display: block;
    font-size: 2.5rem;
    font-family: var(--font-heading);
    color: var(--accent);
}

.time-box label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.calendar-widget {
    max-width: 400px;
    margin: 0 auto 40px;
    padding: 30px;
}

.calendar-widget h3 {
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    text-align: center;
    font-size: 0.9rem;
}

.day-name {
    color: var(--accent);
    font-weight: bold;
    margin-bottom: 10px;
}

.day {
    padding: 8px 0;
    border-radius: 50%;
    color: var(--text-muted);
}

.day.highlight {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-main);
    font-weight: bold;
}

.day.moon-day {
    background: var(--accent);
    color: var(--bg-dark);
    box-shadow: 0 0 15px var(--accent);
    position: relative;
    font-weight: bold;
}

.empty {
    padding: 8px 0;
}

.quote {
    font-size: 1.6rem;
    font-family: var(--font-heading);
    font-style: italic;
    color: var(--text-main);
    margin-bottom: 30px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
}

.gallery-item {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    aspect-ratio: 4/5;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(207, 216, 255, 0.1);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 19, 43, 0.3);
    opacity: 0;
    transition: var(--transition-smooth);
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-item:hover::after {
    opacity: 1;
}

#lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(5, 9, 20, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(10px);
}

#lightbox.active {
    opacity: 1;
    pointer-events: all;
}

#lightbox img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

.location-container {
    display: flex;
    gap: 40px;
    padding: 40px;
    align-items: stretch;
}

.location-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.location-map {
    flex: 1.2;
    border-radius: 15px;
    overflow: hidden;
    min-height: 400px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

html.lenis-scrolling iframe {
    pointer-events: none;
}

.location-map iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    filter: invert(100%) hue-rotate(180deg) brightness(85%) contrast(110%) sepia(20%) hue-rotate(-20deg);
}

.location-details h3 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--accent);
}

.location-details p {
    color: var(--text-muted);
    margin-bottom: 30px;
    font-size: 1.1rem;
}

.rsvp-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 50px;
    background: linear-gradient(145deg, rgba(28, 37, 65, 0.4), rgba(11, 19, 43, 0.8));
    border-radius: 20px;
    border: 1px solid rgba(244, 213, 141, 0.3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.form-group {
    margin-bottom: 30px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--accent);
    letter-spacing: 2px;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.form-control {
    width: 100%;
    padding: 10px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(207, 216, 255, 0.3);
    border-radius: 0;
    color: #fff;
    font-family: var(--font-body);
    font-size: 1.1rem;
    transition: var(--transition-smooth);
}

.form-control:focus {
    outline: none;
    border-bottom: 1px solid var(--accent);
}

select.form-control {
    appearance: none;
    cursor: pointer;
}

select.form-control option {
    background: var(--bg-dark);
    color: #fff;
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
    font-family: var(--font-body);
}

.btn {
    display: inline-block;
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    padding: 15px 40px;
    font-size: 1rem;
    font-family: var(--font-body);
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 30px;
    cursor: pointer;
    text-decoration: none;
    transition: var(--transition-smooth);
    font-weight: bold;
}

.btn:hover {
    background: var(--accent);
    color: var(--bg-dark);
    box-shadow: 0 0 25px rgba(244, 213, 141, 0.6);
    transform: translateY(-3px);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.error-msg {
    color: #ff6b6b;
    margin-top: 10px;
    font-size: 0.9rem;
    display: none;
}

/* ==========================================================================
   6. FOOTER 
   ========================================================================== */
.site-footer {
    background-color: #02040a;
    padding: 20px;
    border-top: 1px solid rgba(244, 213, 141, 0.15);
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-couple h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 0;
    line-height: 1;
    color: var(--accent);
    text-align: center;
}

.footer-credits {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
    text-align: center;
}

.footer-credits p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
    line-height: 1.2;
    text-align: center;
    width: 100%;
}

.footer-credits a {
    color: var(--accent);
    text-decoration: none;
    transition: var(--transition-smooth);
    font-weight: bold;
}

.footer-credits a:hover {
    color: #fff;
    text-shadow: 0 0 10px var(--accent);
}

.insta-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.85rem;
    margin-top: 2px;
    width: 100%;
    text-align: center;
}

.insta-icon {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    section {
        padding: 50px 15px;
    }

    .moon-stack {
        width: 320px;
        height: 320px;
    }

    .hero-text h1 {
        font-size: 3rem;
    }

    .couple-split {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .location-container {
        flex-direction: column;
        padding: 25px 20px;
        gap: 20px;
    }

    .location-details {
        text-align: center;
        align-items: center;
    }

    .location-details h3,
    .location-details p {
        text-align: center;
        margin-bottom: 15px;
    }

    .location-details .btn {
        margin: 0 auto 10px auto;
    }

    .location-map {
        flex: none;
        width: 100%;
        height: 350px;
        min-height: 350px;
        display: block;
        margin: 0;
    }

    .countdown {
        gap: 10px;
    }

    .time-box {
        min-width: auto;
        flex: 1;
        padding: 15px 5px;
    }

    .time-box span {
        font-size: 1.6rem;
    }

    .time-box label {
        font-size: 0.75rem;
    }

    .rsvp-form {
        padding: 40px 20px;
    }

    .rsvp-heading {
        font-size: 2.8rem !important;
    }

    .section-title {
        font-size: 2.5rem;
    }
}