:root {
    --midnight: #080B18;
    --midnight-soft: #11162A;
    --navy: #151B34;
    --navy-light: #202845;
    --muse: #BFA4FF;
    --muse-soft: #D8CAFF;
    --muse-pale: #EEE8FF;
    --moon: #F7E9C8;
    --moon-soft: #FFF6DD;
    --champagne: #D6B56D;
    --rose-dust: #C98FA5;
    --silver: #AAB4D5;
    --line: rgba(216, 202, 255, 0.18);
    --line-gold: rgba(214, 181, 109, 0.24);
    --text: #F8F5FF;
    --muted: #B8B4CE;
    --muted-dark: #8F8AA8;
    --glass: rgba(17, 22, 42, 0.72);
    --glass-soft: rgba(255, 255, 255, 0.055);

    --reveal-distance: 32px;
    --reveal-duration: 1200ms;
    --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);

    --leaf-tr-top: -40px;
    --leaf-tr-right: -55px;
    --leaf-bl-bottom: -45px;
    --leaf-bl-left: -55px;
    --leaf-size-desktop: 180px;
    --leaf-size-tablet: 90px;
    --leaf-size-mobile: 90px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    background:
        radial-gradient(circle at 12% 8%, rgba(191,164,255,0.18), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(214,181,109,0.12), transparent 26%),
        radial-gradient(circle at 50% 100%, rgba(201,143,165,0.10), transparent 32%),
        linear-gradient(180deg, #060814 0%, #0B1022 42%, #070914 100%);
    color: var(--text);
    overflow-x: hidden;
}

body.invitation-locked {
    overflow: hidden;
}

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

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

.font-editorial {
    font-family: 'Cormorant Garamond', serif;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Background */
.bg-midnight {
    background:
        radial-gradient(circle at 18% 18%, rgba(191,164,255,0.20), transparent 26%),
        radial-gradient(circle at 78% 25%, rgba(214,181,109,0.12), transparent 24%),
        radial-gradient(circle at 50% 85%, rgba(201,143,165,0.10), transparent 30%),
        linear-gradient(180deg, rgba(8,11,24,0.96), rgba(17,22,42,0.94)),
        repeating-linear-gradient(
            120deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 18px
        );
    position: relative;
}

.bg-midnight::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 20%, rgba(247,233,200,0.08), transparent 18%),
        radial-gradient(circle at 70% 78%, rgba(191,164,255,0.09), transparent 22%);
    opacity: 0.75;
    animation: midnightAura 10s ease-in-out infinite alternate;
}

@keyframes midnightAura {
    from {
        opacity: 0.48;
        transform: scale(1);
    }

    to {
        opacity: 0.82;
        transform: scale(1.025);
    }
}

.section-label {
    font-size: 10px;
    letter-spacing: 0.36em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--champagne);
}

/* Random asset stars */
.star-field {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 25;
    overflow: hidden;
    contain: layout paint style;
}

.star-item {
    position: absolute;
    display: block;
    width: 8px;
    height: auto;
    pointer-events: none;
    user-select: none;
    opacity: 0.55;
    will-change: transform, opacity;
    animation-name: starTwinkle;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    filter:
        brightness(1.12)
        drop-shadow(0 0 6px rgba(247, 233, 200, 0.55));
}

@keyframes starTwinkle {
    0%, 100% {
        opacity: 0.24;
        transform: scale(0.84) rotate(var(--star-rotate));
    }

    45% {
        opacity: 0.82;
        transform: scale(1.1) rotate(var(--star-rotate));
    }

    70% {
        opacity: 0.48;
        transform: scale(0.96) rotate(var(--star-rotate));
    }
}

/* Cover pembuka undangan */
.invitation-content {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
    transition: opacity 800ms ease;
}

.invitation-content.is-open {
    opacity: 1;
    visibility: visible;
    height: auto;
    overflow: visible;
}

#invitation-cover {
    transition:
        opacity 800ms ease,
        visibility 800ms ease,
        transform 800ms ease;
}

#invitation-cover.cover-hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.04);
    pointer-events: none;
}

.cover-card {
    animation: coverFadeUp 1200ms var(--reveal-ease) both;
}

.cover-corner {
    position: absolute;
    width: min(280px, 60vw);
    max-width: 420px;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    opacity: 0.92;
    filter:
        drop-shadow(0 0 18px rgba(214, 181, 109, 0.22))
        drop-shadow(0 0 34px rgba(191, 164, 255, 0.12))
        drop-shadow(0 18px 35px rgba(0, 0, 0, 0.35));
}

.cover-corner-tr {
    top: -32px;
    right: -32px;
    transform: scaleX(-1);
    transform-origin: center;
    animation: coverTopFloat 9s ease-in-out infinite;
}

.cover-corner-bl {
    bottom: -32px;
    left: -32px;
    transform: scaleY(-1);
    transform-origin: center;
    animation: coverBottomFloat 10s ease-in-out infinite;
}

@keyframes coverFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.985);
        filter: blur(12px);
    }

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

@keyframes coverTopFloat {
    0%, 100% {
        transform: scaleX(-1) translate(0, 0);
        opacity: 0.86;
    }

    50% {
        transform: scaleX(-1) translate(8px, 8px);
        opacity: 1;
    }
}

@keyframes coverBottomFloat {
    0%, 100% {
        transform: scaleY(-1) translate(0, 0);
        opacity: 0.86;
    }

    50% {
        transform: scaleY(-1) translate(8px, 8px);
        opacity: 1;
    }
}

/* Corner ornament utama */
.corner-art {
    position: fixed !important;
    width: min(34vw, 390px);
    height: auto;
    z-index: 80;
    pointer-events: none;
    user-select: none;
    display: block;
    opacity: 0.9;
    filter:
        drop-shadow(0 0 18px rgba(214, 181, 109, 0.22))
        drop-shadow(0 0 34px rgba(191, 164, 255, 0.12));
}

/* Leaf dibuat terpisah dari corner art */
.leaf {
    position: fixed !important;
    width: var(--leaf-size-desktop);
    height: auto;
    z-index: 79;
    pointer-events: none;
    user-select: none;
    display: block;
    opacity: 0.88;
}

/* Kanan atas */
.corner-art-tr {
    top: -35px;
    right: -50px;
    transform: scaleX(-1);
    transform-origin: center;
    animation: cornerTopFloat 9s ease-in-out infinite;
}

.leaf-tr {
    top: var(--leaf-tr-top);
    right: var(--leaf-tr-right);
    transform-origin: center;
    animation: leafTopSway 7.5s ease-in-out infinite;
}

/* Kiri bawah */
.corner-art-bl {
    bottom: -40px;
    left: -55px;
    transform: scaleY(-1);
    transform-origin: center;
    animation: cornerBottomFloat 10s ease-in-out infinite;
}

.leaf-bl {
    bottom: var(--leaf-bl-bottom);
    left: var(--leaf-bl-left);
    transform-origin: center;
    animation: leafBottomSway 8.5s ease-in-out infinite;
}

@keyframes cornerTopFloat {
    0%, 100% {
        transform: scaleX(-1) translate(0, 0);
        opacity: 0.86;
    }

    50% {
        transform: scaleX(-1) translate(8px, 8px);
        opacity: 1;
    }
}

@keyframes cornerBottomFloat {
    0%, 100% {
        transform: scaleY(-1) translate(0, 0);
        opacity: 0.86;
    }

    50% {
        transform: scaleY(-1) translate(8px, 8px);
        opacity: 1;
    }
}

@keyframes leafTopSway {
    0%, 100% {
        transform: rotate(8deg) translate(0, 0);
    }

    50% {
        transform: rotate(15deg) translate(-6px, 12px);
    }
}

@keyframes leafBottomSway {
    0%, 100% {
        transform: scaleY(-1) rotate(8deg) translate(0, 0);
    }

    50% {
        transform: scaleY(-1) rotate(15deg) translate(6px, -12px);
    }
}

/* Hero */
.hero-frame {
    position: relative;
    background: rgba(17,22,42,0.70);
    backdrop-filter: blur(18px);
    border: 1px solid var(--line);
    box-shadow:
        0 34px 90px rgba(0,0,0,0.42),
        0 0 80px rgba(191,164,255,0.08);
    overflow: hidden;
    border-radius: 42px;
    animation: heroEnter 1800ms var(--reveal-ease) both;
}

.hero-frame::before {
    content: "";
    position: absolute;
    inset: 18px;
    border-radius: 30px;
    border: 1px solid rgba(214,181,109,0.18);
    pointer-events: none;
    animation: glassBorderGlow 6s ease-in-out infinite;
}

.hero-frame::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(247,233,200,0.18), rgba(191,164,255,0.12) 42%, transparent 72%);
    filter: blur(2px);
    pointer-events: none;
    animation: moonGlowDrift 9s ease-in-out infinite alternate;
}

@keyframes glassBorderGlow {
    0%, 100% {
        border-color: rgba(214,181,109,0.16);
        box-shadow: 0 0 0 rgba(214,181,109,0);
    }

    50% {
        border-color: rgba(214,181,109,0.32);
        box-shadow: 0 0 36px rgba(191,164,255,0.08);
    }
}

@keyframes moonGlowDrift {
    from {
        transform: translate(0, 0) scale(1);
        opacity: 0.76;
    }

    to {
        transform: translate(-22px, 18px) scale(1.08);
        opacity: 0.52;
    }
}

.muse-card {
    background: rgba(17,22,42,0.72);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    box-shadow: 0 20px 60px rgba(0,0,0,0.28);
}

.paper-card {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(32,40,69,0.88), rgba(17,22,42,0.92));
    border: 1px solid var(--line);
    box-shadow:
        0 24px 70px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.paper-card::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    top: -80px;
    right: -70px;
    background: radial-gradient(circle, rgba(191,164,255,0.16), transparent 70%);
    pointer-events: none;
    transition:
        transform 700ms ease,
        opacity 700ms ease;
}

.paper-card:hover::before {
    transform: scale(1.2);
    opacity: 0.9;
}

.profile-frame {
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(216,202,255,0.16);
    box-shadow: 0 22px 65px rgba(0,0,0,0.28);
    padding: 14px;
    border-radius: 2rem;
}

.profile-photo {
    height: 440px;
    background:
        radial-gradient(circle at 50% 25%, rgba(191,164,255,0.18), transparent 42%),
        var(--midnight-soft);
    overflow: hidden;
    border-radius: 1.5rem;
    position: relative;
}

.profile-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(8,11,24,0.22), transparent 42%),
        radial-gradient(circle at 50% 0%, rgba(247,233,200,0.10), transparent 30%);
    pointer-events: none;
}

.profile-photo img {
    transition:
        transform 1200ms var(--reveal-ease),
        filter 900ms ease;
}

.profile-frame:hover .profile-photo img {
    transform: scale(1.04);
    filter: brightness(1.06);
}

.muse-divider {
    width: 100%;
    max-width: 320px;
    margin: 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--moon);
}

.muse-divider::before,
.muse-divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(to right, transparent, rgba(214,181,109,0.50), transparent);
}

.muse-divider span {
    animation: tinyFloat 4.8s ease-in-out infinite;
}

/* Event */
.event-card {
    position: relative;
    background: rgba(17,22,42,0.82);
    backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    box-shadow: 0 24px 70px rgba(0,0,0,0.32);
    overflow: hidden;
}

.event-card::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px dashed rgba(214,181,109,0.18);
    border-radius: 28px;
    pointer-events: none;
}

.event-card::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(191,164,255,0.18), transparent 70%);
    pointer-events: none;
    transition:
        transform 700ms ease,
        opacity 700ms ease;
}

.event-card:hover::after {
    transform: scale(1.24);
    opacity: 0.88;
}

/* Maps */
.map-shell {
    background: rgba(17,22,42,0.82);
    border: 1px solid var(--line);
    box-shadow: 0 24px 70px rgba(0,0,0,0.32);
    padding: 12px;
}

/* Story */
.story-line::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(214,181,109,0.42), transparent);
    transform-origin: top;
}

.story-line.reveal-on-scroll::before,
.story-line.reveal::before {
    transform: scaleY(0);
    transition: transform 1400ms var(--reveal-ease);
}

.story-line.reveal-on-scroll.is-visible::before,
.story-line.reveal.is-visible::before {
    transform: scaleY(1);
}

.story-dot {
    width: 24px;
    height: 24px;
    background: var(--midnight-soft);
    border: 1px solid rgba(214,181,109,0.38);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--moon);
    border-radius: 999px;
    box-shadow: 0 0 24px rgba(191,164,255,0.16);
    animation: tinyPulse 4.8s ease-in-out infinite;
    transition:
        transform 320ms ease,
        box-shadow 320ms ease,
        border-color 320ms ease,
        background-color 320ms ease;
}

.story-dot:hover {
    transform: scale(1.14);
    border-color: rgba(214,181,109,0.62);
    background: rgba(214,181,109,0.12);
    box-shadow:
        0 0 26px rgba(191,164,255,0.24),
        0 0 18px rgba(214,181,109,0.18);
}

/* Gallery */
.gallery-card {
    background: rgba(17,22,42,0.82);
    border: 1px solid var(--line);
    box-shadow: 0 22px 55px rgba(0,0,0,0.30);
    padding: 12px;
    border-radius: 2rem;
    overflow: hidden;
}

.gallery-card img {
    border-radius: 1.4rem;
    transition:
        transform 1200ms var(--reveal-ease),
        filter 900ms ease;
}

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

/* Gift */
.gift-card {
    position: relative;
    background: rgba(17,22,42,0.84);
    border: 1px solid var(--line);
    box-shadow: 0 22px 55px rgba(0,0,0,0.28);
    overflow: hidden;
}

.gift-card::after {
    content: "";
    position: absolute;
    top: -35px;
    right: -35px;
    width: 140px;
    height: 140px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(214,181,109,0.16), transparent 70%);
    transition:
        transform 700ms ease,
        opacity 700ms ease;
}

.gift-card:hover::after {
    transform: scale(1.22);
    opacity: 0.9;
}

/* Buttons */
.btn-muse {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(135deg, var(--muse), var(--champagne));
    color: #080B18;
    border: 1px solid transparent;
    transition:
        transform 300ms ease,
        box-shadow 300ms ease,
        filter 300ms ease,
        border-color 300ms ease;
    box-shadow: 0 16px 36px rgba(191,164,255,0.18);
}

.btn-muse::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.55) 45%, transparent 72%);
    transform: translateX(-120%);
    transition: transform 700ms ease;
}

.btn-muse:hover {
    transform: translateY(-3px);
    filter: brightness(1.05);
    box-shadow:
        0 20px 44px rgba(214,181,109,0.20),
        0 0 30px rgba(191,164,255,0.12);
}

.btn-muse:hover::before {
    transform: translateX(120%);
}

.btn-muse:active {
    transform: translateY(-1px) scale(0.985);
}

.btn-outline-muse {
    background: rgba(255,255,255,0.04);
    color: var(--moon);
    border: 1px solid rgba(214,181,109,0.32);
    transition:
        transform 300ms ease,
        box-shadow 300ms ease,
        background-color 300ms ease,
        color 300ms ease,
        border-color 300ms ease;
}

.btn-outline-muse:hover {
    background: rgba(214,181,109,0.16);
    color: var(--moon-soft);
    border-color: rgba(214,181,109,0.55);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.20);
}

.btn-outline-muse:active {
    transform: translateY(-1px) scale(0.985);
}

/* Forms */
.form-field-muse {
    width: 100%;
    background: rgba(8,11,24,0.55);
    border: 1px solid rgba(216,202,255,0.18);
    color: var(--text);
    font-size: 0.875rem;
    border-radius: 1rem;
    padding: 1rem;
    transition:
        border-color 260ms ease,
        box-shadow 260ms ease,
        background-color 260ms ease;
    outline: none;
}

.form-field-muse::placeholder {
    color: rgba(184,180,206,0.62);
}

.form-field-muse:focus {
    border-color: rgba(214,181,109,0.55);
    background: rgba(8,11,24,0.68);
    box-shadow:
        0 0 0 4px rgba(214,181,109,0.08),
        0 0 28px rgba(191,164,255,0.08);
}

/* =========================================================
   Elegant Scroll Reveal Animation
   Kompatibel dengan .reveal-on-scroll dan .reveal
========================================================= */

.reveal-on-scroll,
.reveal {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    filter: blur(10px);
    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease),
        filter var(--reveal-duration) var(--reveal-ease),
        box-shadow 360ms ease,
        border-color 360ms ease,
        background-color 360ms ease;
    will-change: opacity, transform, filter;
}

.reveal-on-scroll.is-visible,
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.reveal-left {
    transform: translateX(-40px);
}

.reveal-right {
    transform: translateX(40px);
}

.reveal-scale {
    transform: translateY(28px) scale(0.95);
}

.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
    transform: translateX(0) translateY(0) scale(1);
    filter: blur(0);
}

/* Alias tambahan agar cocok dengan pola tema lain */
.reveal-up {
    transform: translateY(var(--reveal-distance));
}

.reveal-down {
    transform: translateY(-24px);
}

.reveal-blur {
    transform: translateY(24px) scale(0.985);
    filter: blur(12px);
}

.reveal-up.is-visible,
.reveal-down.is-visible,
.reveal-blur.is-visible {
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Delay manual */
.reveal-delay-100 {
    transition-delay: 100ms;
}

.reveal-delay-200 {
    transition-delay: 200ms;
}

.reveal-delay-300 {
    transition-delay: 300ms;
}

.reveal-delay-400 {
    transition-delay: 400ms;
}

.reveal-delay-500 {
    transition-delay: 500ms;
}

/* Staggered reveal */
.reveal-stagger,
.stagger {
    --stagger-step: 110ms;
}

.reveal-stagger > *,
.stagger > * {
    opacity: 0;
    transform: translateY(26px);
    filter: blur(8px);
    transition:
        opacity 900ms var(--reveal-ease),
        transform 900ms var(--reveal-ease),
        filter 900ms var(--reveal-ease),
        box-shadow 360ms ease,
        border-color 360ms ease,
        background-color 360ms ease;
    transition-delay: calc(var(--stagger-index, 0) * var(--stagger-step));
    will-change: opacity, transform, filter;
}

.reveal-stagger.is-visible > *,
.stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Fallback stagger manual jika JS belum set --stagger-index */
.reveal-stagger.is-visible > *:nth-child(1),
.stagger.is-visible > *:nth-child(1) {
    transition-delay: 80ms;
}

.reveal-stagger.is-visible > *:nth-child(2),
.stagger.is-visible > *:nth-child(2) {
    transition-delay: 180ms;
}

.reveal-stagger.is-visible > *:nth-child(3),
.stagger.is-visible > *:nth-child(3) {
    transition-delay: 280ms;
}

.reveal-stagger.is-visible > *:nth-child(4),
.stagger.is-visible > *:nth-child(4) {
    transition-delay: 380ms;
}

.reveal-stagger.is-visible > *:nth-child(5),
.stagger.is-visible > *:nth-child(5) {
    transition-delay: 480ms;
}

.reveal-stagger.is-visible > *:nth-child(6),
.stagger.is-visible > *:nth-child(6) {
    transition-delay: 580ms;
}

/* Blur-safe untuk card */
.paper-card.reveal-on-scroll:not(.is-visible),
.muse-card.reveal-on-scroll:not(.is-visible),
.event-card.reveal-on-scroll:not(.is-visible),
.map-shell.reveal-on-scroll:not(.is-visible),
.gallery-card.reveal-on-scroll:not(.is-visible),
.gift-card.reveal-on-scroll:not(.is-visible),
.profile-frame.reveal-on-scroll:not(.is-visible),
.paper-card.reveal:not(.is-visible),
.muse-card.reveal:not(.is-visible),
.event-card.reveal:not(.is-visible),
.map-shell.reveal:not(.is-visible),
.gallery-card.reveal:not(.is-visible),
.gift-card.reveal:not(.is-visible),
.profile-frame.reveal:not(.is-visible) {
    filter: blur(10px);
}

.paper-card.reveal-on-scroll.is-visible,
.muse-card.reveal-on-scroll.is-visible,
.event-card.reveal-on-scroll.is-visible,
.map-shell.reveal-on-scroll.is-visible,
.gallery-card.reveal-on-scroll.is-visible,
.gift-card.reveal-on-scroll.is-visible,
.profile-frame.reveal-on-scroll.is-visible,
.paper-card.reveal.is-visible,
.muse-card.reveal.is-visible,
.event-card.reveal.is-visible,
.map-shell.reveal.is-visible,
.gallery-card.reveal.is-visible,
.gift-card.reveal.is-visible,
.profile-frame.reveal.is-visible {
    filter: blur(0);
}

/* Section glow title */
.section-glow-title {
    text-shadow:
        0 0 22px rgba(191,164,255,0.18),
        0 0 42px rgba(214,181,109,0.08);
    animation: titleSoftGlow 6s ease-in-out infinite;
}

@keyframes titleSoftGlow {
    0%, 100% {
        text-shadow:
            0 0 18px rgba(191,164,255,0.14),
            0 0 34px rgba(214,181,109,0.06);
    }

    50% {
        text-shadow:
            0 0 28px rgba(191,164,255,0.26),
            0 0 54px rgba(214,181,109,0.12);
    }
}

/* Hover card */
.muse-card,
.paper-card,
.profile-frame,
.event-card,
.map-shell,
.gallery-card,
.gift-card {
    transition:
        transform 360ms ease,
        box-shadow 360ms ease,
        border-color 360ms ease,
        filter 360ms ease,
        background-color 360ms ease;
}

.muse-card:hover,
.paper-card:hover,
.profile-frame:hover,
.event-card:hover,
.map-shell:hover,
.gallery-card:hover,
.gift-card:hover {
    transform: translateY(-5px);
    border-color: rgba(214,181,109,0.34);
    box-shadow:
        0 30px 82px rgba(0,0,0,0.34),
        0 0 40px rgba(191,164,255,0.08);
}

.muse-card.reveal-on-scroll.is-visible:hover,
.paper-card.reveal-on-scroll.is-visible:hover,
.profile-frame.reveal-on-scroll.is-visible:hover,
.event-card.reveal-on-scroll.is-visible:hover,
.map-shell.reveal-on-scroll.is-visible:hover,
.gallery-card.reveal-on-scroll.is-visible:hover,
.gift-card.reveal-on-scroll.is-visible:hover,
.muse-card.reveal.is-visible:hover,
.paper-card.reveal.is-visible:hover,
.profile-frame.reveal.is-visible:hover,
.event-card.reveal.is-visible:hover,
.map-shell.reveal.is-visible:hover,
.gallery-card.reveal.is-visible:hover,
.gift-card.reveal.is-visible:hover {
    transform: translateY(-5px);
    filter: blur(0);
}

.gallery-card.reveal-scale.is-visible:hover,
.profile-frame.reveal-scale.is-visible:hover {
    transform: translateY(-5px) scale(1.01);
    filter: blur(0);
}

/* Animations */
@keyframes heroEnter {
    from {
        opacity: 0;
        transform: translateY(34px) scale(0.98);
        filter: blur(12px);
    }

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

@keyframes tinyPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(191,164,255,0.13);
    }

    50% {
        box-shadow:
            0 0 30px rgba(191,164,255,0.22),
            0 0 18px rgba(214,181,109,0.12);
    }
}

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

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

/* Floating utility */
.float-ornament {
    animation: softMuseFloat 7s ease-in-out infinite;
}

.float-ornament-slow {
    animation: softMuseFloat 10s ease-in-out infinite;
}

.float-ornament-reverse {
    animation: softMuseFloatReverse 8s ease-in-out infinite;
}

@keyframes softMuseFloat {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.88;
    }

    50% {
        transform: translateY(-9px);
        opacity: 1;
    }
}

@keyframes softMuseFloatReverse {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.88;
    }

    50% {
        transform: translateY(9px);
        opacity: 1;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .corner-art {
        width: min(42vw, 290px);
        z-index: 80;
    }

    .leaf {
        width: var(--leaf-size-tablet);
        z-index: 79;
    }

    .corner-art-tr {
        top: -32px;
        right: -46px;
    }

    .leaf-tr {
        top: -64px;
        right: 8px;
    }

    .leaf-bl {
        bottom: -38px;
        left: -48px;
    }

    .corner-art-bl {
        bottom: -36px;
        left: -50px;
    }

    .cover-corner {
        width: min(42vw, 290px);
    }

    .cover-corner-tr {
        top: -32px;
        right: -46px;
    }

    .cover-corner-bl {
        bottom: -36px;
        left: -50px;
    }
}

@media (max-width: 768px) {
    :root {
        --reveal-distance: 22px;
        --reveal-duration: 900ms;
    }

    .corner-art {
        width: min(58vw, 230px);
        z-index: 70;
    }

    .leaf {
        width: var(--leaf-size-tablet);
        z-index: 69;
    }

    .corner-art-tr {
        top: -26px;
        right: -32px;
    }

    .leaf-tr {
        top: -18px;
        right: -38px;
    }

    .corner-art-bl {
        bottom: -32px;
        left: -44px;
    }

    .leaf-bl {
        bottom: -10px;
        left: -30px;
    }

    .cover-corner {
        width: min(58vw, 230px);
    }

    .cover-corner-tr {
        top: -26px;
        right: -32px;
    }

    .cover-corner-bl {
        bottom: -32px;
        left: -44px;
    }

    .profile-photo {
        height: 380px;
    }

    .reveal-scale {
        transform: translateY(18px) scale(0.97);
        filter: blur(4px);
    }

    .reveal-blur {
        filter: blur(8px);
    }

    .reveal-stagger > *,
    .stagger > * {
        transition-delay: calc(var(--stagger-index, 0) * 80ms);
    }

    .muse-card:hover,
    .paper-card:hover,
    .profile-frame:hover,
    .event-card:hover,
    .map-shell:hover,
    .gallery-card:hover,
    .gift-card:hover,
    .btn-muse:hover,
    .btn-outline-muse:hover {
        transform: none;
    }
}

@media (max-width: 640px) {
    .cover-card {
        border-radius: 1.8rem;
    }

    .cover-corner {
        width: 210px;
    }

    .leaf {
        width: clamp(62px, 20vw, 110px);
    }

    .cover-corner-tr {
        top: -44px;
        right: -58px;
    }

    .leaf-tr {
        top: 38px;
        right: 8px;
    }

    .cover-corner-bl {
        bottom: -44px;
        left: -58px;
    }

    .leaf-bl {
        bottom: 38px;
        left: 8px;
    }
}

@media (max-width: 480px) {
    .corner-art {
        width: min(66vw, 190px);
        z-index: 70;
    }

    .leaf {
        width: var(--leaf-size-mobile);
        z-index: 69;
    }

    .corner-art-tr {
        top: -18px;
        right: -34px;
    }

    .leaf-tr {
        top: -32px;
        right: -54px;
    }

    .leaf-bl {
        bottom: -26px;
        left: -36px;
    }

    .corner-art-bl {
        bottom: -24px;
        left: -36px;
    }

    .cover-corner {
        width: min(66vw, 190px);
    }

    .cover-corner-tr {
        top: -18px;
        right: -34px;
    }

    .cover-corner-bl {
        bottom: -24px;
        left: -36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .hero-frame,
    .corner-art,
    .leaf,
    .cover-card,
    .cover-corner,
    .star-item,
    .section-glow-title,
    .muse-divider span,
    .story-dot,
    .float-ornament,
    .float-ornament-slow,
    .float-ornament-reverse {
        animation: none !important;
    }

    .reveal-on-scroll,
    .reveal,
    .reveal-stagger > *,
    .stagger > *,
    .muse-card,
    .paper-card,
    .profile-frame,
    .event-card,
    .map-shell,
    .gallery-card,
    .gift-card,
    .btn-muse,
    .btn-outline-muse {
        opacity: 1 !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }

    #invitation-cover,
    .invitation-content {
        transition: none !important;
    }
}

/* =========================================================
   THEME -> GLOBAL ORNAMENT ALIGNMENT + MOBILE OVERFLOW FIX v2
   Letakkan patch ini di PALING BAWAH CSS tema.
   Pastikan file global-ornament.css tetap diload sebelum CSS tema.

   v2 note:
   - Tidak memberi overflow-x/overflow-y ke html dan .bg-midnight.
   - Ini mencegah munculnya scrollbar vertikal ganda di mobile.
   ========================================================= */

/* Guard ringan: jangan ubah scroll container root */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Pertahankan behavior cover: saat undangan terkunci, halaman tidak boleh scroll */
body.invitation-locked {
    overflow: hidden !important;
}

/* Clip hanya area overlay/fixed, bukan section konten panjang */
#invitation-cover,
.star-field {
    max-width: 100vw;
    overflow: hidden;
}

/* Jangan set overflow pada .bg-midnight agar tidak menjadi scroll container kedua */
.bg-midnight {
    max-width: 100%;
    isolation: isolate;
}

.invitation-content,
.invitation-content.is-open,
main,
section {
    max-width: 100%;
}

/* Tema hanya override variable global ornament, bukan mendefinisikan ulang nilai manual */
:root {
    --ornament-cover-width: min(280px, 60vw);
    --ornament-cover-max-width: 420px;
    --ornament-cover-opacity: 0.92;
    --ornament-cover-z: 2;
    --ornament-cover-filter:
        drop-shadow(0 0 18px rgba(214, 181, 109, 0.22))
        drop-shadow(0 0 34px rgba(191, 164, 255, 0.12))
        drop-shadow(0 18px 35px rgba(0, 0, 0, 0.35));

    --ornament-cover-tr-top: -32px;
    --ornament-cover-tr-right: -32px;
    --ornament-cover-tr-transform: scaleX(-1) translate(0, 0);
    --ornament-cover-tr-transform-mid: scaleX(-1) translate(8px, 8px);
    --ornament-cover-tr-duration: 9s;

    --ornament-cover-bl-bottom: -32px;
    --ornament-cover-bl-left: -32px;
    --ornament-cover-bl-transform: scaleY(-1) translate(0, 0);
    --ornament-cover-bl-transform-mid: scaleY(-1) translate(8px, 8px);
    --ornament-cover-bl-duration: 10s;

    --ornament-main-width: min(34vw, 390px);
    --ornament-main-max-width: none;
    --ornament-main-opacity: 0.9;
    --ornament-main-z: 80;
    --ornament-main-filter:
        drop-shadow(0 0 18px rgba(214, 181, 109, 0.22))
        drop-shadow(0 0 34px rgba(191, 164, 255, 0.12));

    --ornament-main-tr-top: -35px;
    --ornament-main-tr-right: -50px;
    --ornament-main-tr-transform: scaleX(-1) translate(0, 0);
    --ornament-main-tr-transform-mid: scaleX(-1) translate(8px, 8px);
    --ornament-main-tr-duration: 9s;

    --ornament-main-bl-bottom: -40px;
    --ornament-main-bl-left: -55px;
    --ornament-main-bl-transform: scaleY(-1) translate(0, 0);
    --ornament-main-bl-transform-mid: scaleY(-1) translate(8px, 8px);
    --ornament-main-bl-duration: 10s;
}

/* Reset aturan lama tema agar kembali mengikuti global ornament */
.cover-corner {
    position: absolute;
    width: var(--ornament-cover-width);
    max-width: var(--ornament-cover-max-width);
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: var(--ornament-cover-z);
    opacity: var(--ornament-cover-opacity);
    filter: var(--ornament-cover-filter);
    transform-origin: center;
    will-change: transform;
}

.cover-corner-tr {
    top: var(--ornament-cover-tr-top);
    right: var(--ornament-cover-tr-right);
    --ornament-transform-start: var(--ornament-cover-tr-transform);
    --ornament-transform-mid: var(--ornament-cover-tr-transform-mid);
    transform: var(--ornament-transform-start);
    animation: ornamentFloat var(--ornament-cover-tr-duration) ease-in-out infinite;
}

.cover-corner-bl {
    bottom: var(--ornament-cover-bl-bottom);
    left: var(--ornament-cover-bl-left);
    --ornament-transform-start: var(--ornament-cover-bl-transform);
    --ornament-transform-mid: var(--ornament-cover-bl-transform-mid);
    transform: var(--ornament-transform-start);
    animation: ornamentFloat var(--ornament-cover-bl-duration) ease-in-out infinite;
}

.corner-art,
.main-ornament,
.ornament-main,
.botanical-ornament {
    position: fixed !important;
    width: var(--ornament-main-width);
    max-width: var(--ornament-main-max-width);
    height: auto;
    z-index: var(--ornament-main-z);
    pointer-events: none;
    user-select: none;
    display: block;
    opacity: var(--ornament-main-opacity);
    filter: var(--ornament-main-filter);
    transform-origin: center;
    will-change: transform;
}

.corner-art-tr,
.main-ornament-tr,
.ornament-main-tr,
.botanical-ornament-tr {
    top: var(--ornament-main-tr-top);
    right: var(--ornament-main-tr-right);
    --ornament-transform-start: var(--ornament-main-tr-transform);
    --ornament-transform-mid: var(--ornament-main-tr-transform-mid);
    transform: var(--ornament-transform-start);
    animation: ornamentFloat var(--ornament-main-tr-duration) ease-in-out infinite;
}

.corner-art-bl,
.main-ornament-bl,
.ornament-main-bl,
.botanical-ornament-bl {
    bottom: var(--ornament-main-bl-bottom);
    left: var(--ornament-main-bl-left);
    --ornament-transform-start: var(--ornament-main-bl-transform);
    --ornament-transform-mid: var(--ornament-main-bl-transform-mid);
    transform: var(--ornament-transform-start);
    animation: ornamentFloat var(--ornament-main-bl-duration) ease-in-out infinite;
}

/* Fallback kalau patch ini dipakai tanpa file global ornament */
@keyframes ornamentFloat {
    0%, 100% {
        transform: var(--ornament-transform-start);
    }

    50% {
        transform: var(--ornament-transform-mid);
    }
}

/* Leaf tetap milik tema, tapi dibuat aman agar tidak mendorong viewport */
.leaf {
    max-width: 28vw;
}

/* Responsive: override variable global, bukan class langsung */
@media (max-width: 1024px) {
    :root {
        --ornament-cover-width: min(42vw, 290px);
        --ornament-main-width: min(42vw, 290px);

        --ornament-cover-tr-top: -32px;
        --ornament-cover-tr-right: -46px;
        --ornament-cover-bl-bottom: -36px;
        --ornament-cover-bl-left: -50px;

        --ornament-main-tr-top: -32px;
        --ornament-main-tr-right: -46px;
        --ornament-main-bl-bottom: -36px;
        --ornament-main-bl-left: -50px;
    }

    .leaf {
        width: var(--leaf-size-tablet);
        z-index: 79;
    }

    .leaf-tr {
        top: -64px;
        right: 8px;
    }

    .leaf-bl {
        bottom: -38px;
        left: -48px;
    }
}

@media (max-width: 768px) {
    :root {
        --reveal-distance: 22px;
        --reveal-duration: 900ms;

        --ornament-cover-width: min(54vw, 220px);
        --ornament-main-width: min(54vw, 220px);
        --ornament-main-z: 70;

        --ornament-cover-tr-top: -24px;
        --ornament-cover-tr-right: -24px;
        --ornament-cover-bl-bottom: -28px;
        --ornament-cover-bl-left: -28px;

        --ornament-main-tr-top: -24px;
        --ornament-main-tr-right: -24px;
        --ornament-main-bl-bottom: -28px;
        --ornament-main-bl-left: -28px;
    }

    .leaf {
        width: clamp(62px, 18vw, 90px);
        z-index: 69;
    }

    .leaf-tr {
        top: -14px;
        right: -18px;
    }

    .leaf-bl {
        bottom: -12px;
        left: -18px;
    }
}

@media (max-width: 640px) {
    :root {
        --ornament-cover-width: clamp(150px, 48vw, 190px);

        /* Nilai lama -58px terlalu agresif dan berpotensi memicu horizontal scroll */
        --ornament-cover-tr-top: -28px;
        --ornament-cover-tr-right: -18px;
        --ornament-cover-bl-bottom: -28px;
        --ornament-cover-bl-left: -18px;
    }

    .cover-card {
        border-radius: 1.8rem;
    }

    .leaf {
        width: clamp(54px, 17vw, 82px);
    }

    .leaf-tr {
        top: 30px;
        right: 0;
    }

    .leaf-bl {
        bottom: 30px;
        left: 0;
    }
}

@media (max-width: 480px) {
    :root {
        --ornament-cover-width: clamp(138px, 44vw, 168px);
        --ornament-main-width: clamp(132px, 42vw, 160px);

        --ornament-cover-tr-top: -14px;
        --ornament-cover-tr-right: -12px;
        --ornament-cover-bl-bottom: -18px;
        --ornament-cover-bl-left: -12px;

        --ornament-main-tr-top: -14px;
        --ornament-main-tr-right: -12px;
        --ornament-main-bl-bottom: -18px;
        --ornament-main-bl-left: -12px;
    }

    .leaf {
        width: clamp(50px, 16vw, 74px);
    }

    .leaf-tr {
        top: -10px;
        right: -8px;
    }

    .leaf-bl {
        bottom: -10px;
        left: -8px;
    }
}