:root {
    --pink-deep: #8f3a5b;
    --pink-main: #c65d83;
    --pink-soft: #f7c7d6;
    --pink-pale: #fff0f5;
    --rose-bg: #fdf2f6;
    --cream: #fffaf7;
    --text: #3c3135;
    --muted: #7b6b70;
    --line: rgba(247, 199, 214, 0.72);
    --glass: rgba(255, 255, 255, 0.68);
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--rose-bg);
    color: var(--text);
    overflow-x: hidden;
}

body.invitation-locked {
    overflow: hidden;
}

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

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

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

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

/* Background utama tema */
.bg-floral-soft {
    background-color: var(--rose-bg);
    background-image:
        radial-gradient(circle at 15% 18%, rgba(246, 183, 205, 0.48), transparent 28%),
        radial-gradient(circle at 86% 75%, rgba(255, 214, 226, 0.52), transparent 30%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 240, 245, 0.68));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}

.pink-gradient-bg {
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, 0.22), transparent 28%),
        radial-gradient(circle at 85% 80%, rgba(255, 255, 255, 0.18), transparent 32%),
        linear-gradient(135deg, #b66f82, #a75d73 48%, #88475e);
}

/* ==========================================================
   Wrapper cover pembuka
   ========================================================== */

.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 {
    position: fixed;
    inset: 0;
    z-index: 9999;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(247, 199, 214, 0.55), transparent 32%),
        radial-gradient(circle at 86% 74%, rgba(198, 93, 131, 0.22), transparent 34%),
        linear-gradient(135deg, #fffaf7 0%, #fff0f5 48%, #fdf2f6 100%);
    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;
}

.opener-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    opacity: 0.42;
    filter: saturate(1.08) contrast(1.02);
}

.opener-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 250, 247, 0.42), rgba(255, 240, 245, 0.82)),
        radial-gradient(circle at center, rgba(255, 255, 255, 0.35), transparent 42%);
}

.cover-card {
    position: relative;
    z-index: 3;
    width: min(100%, 620px);
    padding: clamp(2rem, 5vw, 4rem);
    text-align: center;
    border-radius: 2.5rem;
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(247, 199, 214, 0.72);
    box-shadow:
        0 28px 80px rgba(143, 58, 91, 0.16),
        0 10px 30px rgba(198, 93, 131, 0.08);
    overflow: hidden;
    animation: coverFadeUp 1000ms ease both;
}

.cover-card::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(198, 93, 131, 0.16);
    border-radius: 2rem;
    pointer-events: none;
}

.cover-card::after {
    content: "✿";
    position: absolute;
    right: -28px;
    bottom: -54px;
    font-size: 160px;
    line-height: 1;
    color: rgba(198, 93, 131, 0.055);
    pointer-events: none;
}

@keyframes coverFadeUp {
    from {
        opacity: 0;
        transform: translateY(28px) scale(0.98);
        filter: blur(10px);
    }

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

/* Helper teks cover */
.cover-kicker {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(247, 199, 214, 0.72);
    color: var(--pink-deep);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

.cover-subtitle {
    position: relative;
    z-index: 2;
    margin: 0 0 0.75rem;
    color: rgba(143, 58, 91, 0.58);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.cover-names {
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: 'Great Vibes', cursive;
    color: var(--pink-deep);
    line-height: 0.9;
    text-shadow: 0 14px 32px rgba(143, 58, 91, 0.11);
}

.cover-names span {
    display: block;
    font-size: clamp(4.2rem, 10vw, 7.2rem);
}

.cover-names em {
    display: block;
    margin: 0.55rem 0 0.35rem;
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-style: italic;
    color: var(--pink-main);
    line-height: 1;
}

.cover-date {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.55rem;
    padding: 0.75rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.74);
    border: 1px solid rgba(247, 199, 214, 0.75);
    color: var(--muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.cover-guest {
    position: relative;
    z-index: 2;
    max-width: 420px;
    margin: 1.5rem auto 0;
    padding: 1rem 1.25rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(247, 199, 214, 0.75);
}

.cover-guest small {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.cover-guest strong {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    color: var(--pink-deep);
    font-size: clamp(1.45rem, 4vw, 2rem);
    font-weight: 600;
    line-height: 1.2;
}

.cover-note {
    position: relative;
    z-index: 2;
    max-width: 360px;
    margin: 1rem auto 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.8;
}

.cover-button {
    position: relative;
    z-index: 2;
    margin-top: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    border: 0;
    border-radius: 999px;
    padding: 0.95rem 1.7rem;
    background: linear-gradient(135deg, #b66f82, #c65d83, #8f3a5b);
    color: #fff;
    box-shadow: 0 18px 42px rgba(143, 58, 91, 0.24);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.cover-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 52px rgba(143, 58, 91, 0.30);
    filter: brightness(1.03);
}

.cover-button:focus-visible {
    outline: 3px solid rgba(247, 199, 214, 0.85);
    outline-offset: 5px;
}

/* ==========================================================
   Image-based corner ornament
   gambar dipanggil dari Blade, bukan dari CSS
   ========================================================== */

.cover-corner {
    position: absolute;
    width: min(34vw, 320px);
    max-width: 360px;
    height: auto;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    filter:
        drop-shadow(0 18px 38px rgba(143, 58, 91, 0.16))
        drop-shadow(0 0 18px rgba(198, 93, 131, 0.16));
}

.cover-corner-tl {
    top: -40px;
    left: -24px;
    transform: rotate(180deg);
    transform-origin: center;
    animation: pinkSwayTopLeft 7s ease-in-out infinite;
}

.cover-corner-br {
    right: -24px;
    bottom: -28px;
    transform: rotate(0deg);
    transform-origin: center;
    animation: pinkSwayBottomRight 8s ease-in-out infinite;
}

.bg-1 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: auto;
    background-color: var(--rose-bg);
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 250, 247, 0.30),
            rgba(255, 240, 245, 0.22)
        ),
        var(--bg-1-image, url('/storage/assets/pink-blossom/bg-1.png'));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
}

.bg-2 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: auto;
    background-color: var(--rose-bg);
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 250, 247, 0.30),
            rgba(255, 240, 245, 0.22)
        ),
        var(--bg-2-image, url('/storage/assets/pink-blossom/bg-2.png'));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
}

.bg-1, .bg-2 > * {
    position: relative;
    z-index: 1;
}

.corner-art {
    position: fixed !important;
    width: min(30vw, 250px);
    height: auto;
    z-index: 80;
    pointer-events: none;
    user-select: none;
    display: block;
    filter:
        drop-shadow(0 18px 34px rgba(143, 58, 91, 0.12))
        drop-shadow(0 0 14px rgba(198, 93, 131, 0.14));
}

.corner-art-tl {
    top: -20px;
    left: -20px;
    transform: rotate(180deg);
    transform-origin: center;
    animation: pinkSwayTopLeft 7s ease-in-out infinite;
}

.corner-art-br {
    right: -20px;
    bottom: -20px;
    transform: rotate(0deg);
    transform-origin: center;
    animation: pinkSwayBottomRight 8s ease-in-out infinite;
}

/* Alias kalau masih ada class lama di Blade */
.rose-corner-tl {
    position: fixed !important;
    width: min(30vw, 250px);
    height: auto;
    z-index: 80;
    pointer-events: none;
    user-select: none;
    display: block;
    top: -20px;
    left: -20px;
    transform: rotate(180deg);
    transform-origin: center;
    animation: pinkSwayTopLeft 7s ease-in-out infinite;
    filter:
        drop-shadow(0 18px 34px rgba(143, 58, 91, 0.12))
        drop-shadow(0 0 14px rgba(198, 93, 131, 0.14));
}

.rose-corner-br {
    position: fixed !important;
    width: min(30vw, 250px);
    height: auto;
    z-index: 80;
    pointer-events: none;
    user-select: none;
    display: block;
    right: -20px;
    bottom: -20px;
    transform: rotate(0deg);
    transform-origin: center;
    animation: pinkSwayBottomRight 8s ease-in-out infinite;
    filter:
        drop-shadow(0 18px 34px rgba(143, 58, 91, 0.12))
        drop-shadow(0 0 14px rgba(198, 93, 131, 0.14));
}

@keyframes pinkSwayTopLeft {
    0%, 100% {
        transform: rotate(180deg) scale(1);
    }

    50% {
        transform: rotate(185deg) scale(1.03);
    }
}

@keyframes pinkSwayBottomRight {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(-5deg) scale(1.03);
    }
}



/* ==========================================================
   General theme components
   ========================================================== */

.section-label {
    font-size: 10px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(143, 58, 91, 0.58);
}

.section-title-pink {
    font-family: 'Great Vibes', cursive;
    color: var(--pink-deep);
    text-shadow: 0 12px 28px rgba(143, 58, 91, 0.10);
}

.animated-dash-border {
    position: relative;
    border-radius: 2rem;
    background:
        linear-gradient(90deg, var(--pink-main) 50%, transparent 50%),
        linear-gradient(90deg, var(--pink-main) 50%, transparent 50%),
        linear-gradient(0deg, var(--pink-main) 50%, transparent 50%),
        linear-gradient(0deg, var(--pink-main) 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 18px 2px, 18px 2px, 2px 18px, 2px 18px;
    background-position: left top, right bottom, left bottom, right top;
    animation: borderDance 1s linear infinite;
}

.animated-dash-border-soft {
    position: relative;
    border-radius: 999px 999px 1.5rem 1.5rem;
    background:
        linear-gradient(90deg, #f0a3bb 50%, transparent 50%),
        linear-gradient(90deg, #f0a3bb 50%, transparent 50%),
        linear-gradient(0deg, #f0a3bb 50%, transparent 50%),
        linear-gradient(0deg, #f0a3bb 50%, transparent 50%);
    background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
    background-size: 18px 2px, 18px 2px, 2px 18px, 2px 18px;
    background-position: left top, right bottom, left bottom, right top;
    animation: borderDance 1.2s linear infinite;
}

.glass-card-pink {
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 183, 205, 0.55);
    box-shadow: 0 24px 70px rgba(143, 58, 91, 0.13);
}

.soft-card-pink {
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(247, 199, 214, 0.7);
    box-shadow: 0 20px 60px rgba(143, 58, 91, 0.10);
}

.pink-button {
    background: linear-gradient(135deg, #b66f82, #c65d83, #8f3a5b);
    color: white;
    box-shadow: 0 18px 42px rgba(143, 58, 91, 0.24);
    transition: 0.28s ease;
}

.pink-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 52px rgba(143, 58, 91, 0.30);
}

.event-card-pink {
    position: relative;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow: 0 24px 70px rgba(90, 39, 59, 0.22);
    overflow: hidden;
}

.event-card-pink::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1.5px dashed rgba(255, 255, 255, 0.45);
    border-radius: 1.5rem;
    pointer-events: none;
    animation: softBorderGlow 3s ease-in-out infinite;
}

.story-card-pink {
    background: linear-gradient(135deg, #ffffff, #fff4f8);
    border: 1px solid rgba(247, 199, 214, 0.9);
    box-shadow: 0 14px 40px rgba(143, 58, 91, 0.08);
}

.gallery-polaroid {
    background: white;
    border: 1px solid rgba(247, 199, 214, 0.7);
    box-shadow: 0 20px 55px rgba(143, 58, 91, 0.14);
}

.gift-card-bank {
    box-shadow: 0 22px 55px rgba(60, 49, 53, 0.16);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #f3c6d5;
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #eaa7bf;
}

/* ==========================================================
   Animations
   ========================================================== */

@keyframes borderDance {
    0% {
        background-position: left top, right bottom, left bottom, right top;
    }

    100% {
        background-position: left 18px top, right 18px bottom, left bottom 18px, right top 18px;
    }
}

@keyframes softBorderGlow {
    0%, 100% {
        opacity: 0.65;
    }

    50% {
        opacity: 1;
    }
}

@keyframes floatUpDownCenter {
    0%, 100% {
        transform: translateX(-50%) translateY(0);
    }

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

@keyframes softPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.88;
    }

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

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 1024px) {
    .cover-corner {
        width: 220px;
    }

    .cover-corner-tl {
        top: -68px;
        left: -18px;
    }

    .cover-corner-br {
        right: -18px;
        bottom: -22px;
    }

    .corner-art,
    .rose-corner-tl,
    .rose-corner-br {
        width: 210px;
    }

    .corner-art-tl,
    .rose-corner-tl {
        top: -68px;
        left: -18px;
    }

    .corner-art-br,
    .rose-corner-br {
        right: -18px;
        bottom: -20px;
    }
}

@media (max-width: 768px) {
    #invitation-cover {
        padding: 1.1rem;
    }

    .cover-card {
        border-radius: 2rem;
        padding: 2rem 1.4rem;
    }

    .cover-card::before {
        inset: 12px;
        border-radius: 1.5rem;
    }

    .cover-kicker {
        margin-bottom: 1.25rem;
        font-size: 9px;
        letter-spacing: 0.2em;
    }

    .cover-names span {
        font-size: 4.5rem;
    }

    .cover-names em {
        font-size: 2rem;
    }

    .cover-date {
        font-size: 9px;
        line-height: 1.6;
        letter-spacing: 0.12em;
    }

    .cover-corner {
        width: 180px;
    }

    .cover-corner-tl {
        top: -60px;
        left: -16px;
    }

    .cover-corner-br {
        right: -16px;
        bottom: -20px;
    }

    .corner-art,
    .rose-corner-tl,
    .rose-corner-br {
        width: 170px;
        z-index: 70;
    }

    .corner-art-tl,
    .rose-corner-tl {
        top: -10px;
        left: -10px;
    }

    .corner-art-br,
    .rose-corner-br {
        right: -12px;
        bottom: 0px;
    }

    .rose-border-top {
        width: min(94vw, 460px);
    }

    .rose-separator {
        width: min(82vw, 330px);
    }
}

@media (max-width: 480px) {
    .cover-corner {
        width: 200px;
    }

    .cover-corner-tl {
        top: -48px;
        left: -16px;
    }

    .cover-corner-br {
        right: -16px;
        bottom: -18px;
    }

    .corner-art,
    .rose-corner-tl,
    .rose-corner-br {
        width: 145px;
        z-index: 70;
    }

    .corner-art-tl,
    .rose-corner-tl {
        top: -48px;
        left: -16px;
    }

    .corner-art-br,
    .rose-corner-br {
        right: -16px;
        bottom: -18px;
    }

    .cover-card {
        padding-left: 1.35rem;
        padding-right: 1.35rem;
    }

    .cover-button {
        min-width: 190px;
        padding: 0.85rem 1.45rem;
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cover-card,
    .cover-corner,
    .corner-art,
    .rose-corner-tl,
    .rose-corner-br,
    .rose-border-top,
    .rose-separator,
    .animated-dash-border,
    .animated-dash-border-soft,
    .event-card-pink::before {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }

    #invitation-cover,
    .invitation-content {
        transition: none !important;
    }
}
/* ==========================================================
   Scroll Reveal & Elegant Floral Animation Extension
   Generated for soft pink floral wedding invitation
   ========================================================== */

:root {
    --reveal-distance: 28px;
    --reveal-duration: 950ms;
    --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Soft animated background feel */
.bg-floral-soft {
    position: relative;
    overflow: hidden;
}

.bg-floral-soft::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.36), transparent 22%),
        radial-gradient(circle at 78% 82%, rgba(247, 199, 214, 0.28), transparent 26%);
    opacity: 0.55;
    animation: pinkAuraFloat 9s ease-in-out infinite alternate;
}

.pink-gradient-bg {
    position: relative;
    overflow: hidden;
}

.pink-gradient-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 24% 24%, rgba(255, 255, 255, 0.22), transparent 24%),
        radial-gradient(circle at 76% 72%, rgba(255, 240, 245, 0.16), transparent 28%);
    opacity: 0.72;
    animation: pinkAuraFloat 8s ease-in-out infinite alternate;
}

@keyframes pinkAuraFloat {
    from {
        opacity: 0.42;
        transform: scale(1);
    }

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

/* Cover refinements */
.opener-bg {
    animation: pinkOpenerZoom 18s ease-in-out infinite alternate;
    will-change: transform;
}

.opener-bg-overlay {
    animation: pinkOverlayBreathe 8s ease-in-out infinite;
}

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

.cover-card::before {
    animation: cardInnerGlow 5.5s ease-in-out infinite;
}

.cover-card::after {
    animation: flowerWatermarkFloat 8s ease-in-out infinite;
}

.cover-kicker,
.cover-date,
.cover-guest {
    transition:
        transform 320ms ease,
        box-shadow 320ms ease,
        border-color 320ms ease,
        background-color 320ms ease;
}

.cover-kicker:hover,
.cover-date:hover,
.cover-guest:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(143, 58, 91, 0.10);
    border-color: rgba(198, 93, 131, 0.28);
}

.cover-names {
    animation: softTextGlowPink 6s ease-in-out infinite;
}

.cover-names em {
    animation: tinyFloat 4.8s ease-in-out infinite;
}

@keyframes pinkOpenerZoom {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.045);
    }
}

@keyframes pinkOverlayBreathe {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.86;
    }
}

@keyframes cardInnerGlow {
    0%, 100% {
        border-color: rgba(198, 93, 131, 0.14);
        box-shadow: inset 0 0 0 rgba(247, 199, 214, 0);
    }

    50% {
        border-color: rgba(198, 93, 131, 0.24);
        box-shadow: inset 0 0 28px rgba(247, 199, 214, 0.13);
    }
}

@keyframes flowerWatermarkFloat {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }

    50% {
        transform: translate(-8px, -8px) rotate(-5deg);
        opacity: 0.72;
    }
}

@keyframes softTextGlowPink {
    0%, 100% {
        text-shadow: 0 14px 32px rgba(143, 58, 91, 0.11);
    }

    50% {
        text-shadow:
            0 14px 36px rgba(143, 58, 91, 0.16),
            0 0 32px rgba(247, 199, 214, 0.28);
    }
}

/* Button shine */
.cover-button,
.pink-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition:
        transform 300ms ease,
        box-shadow 300ms ease,
        filter 300ms ease,
        background-color 300ms ease;
}

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

.cover-button:hover,
.pink-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 56px rgba(143, 58, 91, 0.30);
    filter: brightness(1.035);
}

.cover-button:hover::before,
.pink-button:hover::before {
    transform: translateX(120%);
}

.cover-button:active,
.pink-button:active {
    transform: translateY(-1px) scale(0.985);
}

/* Ornament refinement */
.cover-corner-tl,
.corner-art-tl,
.rose-corner-tl {
    animation-duration: 8.5s;
}

.cover-corner-br,
.corner-art-br,
.rose-corner-br {
    animation-duration: 9.5s;
}


/* Card and image hover */
.glass-card-pink,
.soft-card-pink,
.event-card-pink,
.story-card-pink,
.gallery-polaroid,
.gift-card-bank,
.cover-guest {
    transition:
        transform 340ms ease,
        box-shadow 340ms ease,
        border-color 340ms ease,
        background-color 340ms ease,
        filter 340ms ease;
}

.glass-card-pink:hover,
.soft-card-pink:hover,
.event-card-pink:hover,
.story-card-pink:hover,
.gallery-polaroid:hover,
.gift-card-bank:hover {
    transform: translateY(-5px);
    border-color: rgba(198, 93, 131, 0.30);
    box-shadow: 0 28px 76px rgba(143, 58, 91, 0.15);
}

.gallery-polaroid img,
.profile-photo img,
.event-card-pink img,
.story-card-pink img {
    transition:
        transform 950ms var(--reveal-ease),
        filter 700ms ease;
}

.gallery-polaroid:hover img,
.profile-photo:hover img,
.event-card-pink:hover img,
.story-card-pink:hover img {
    transform: scale(1.045);
    filter: saturate(1.04) brightness(1.02);
}

.event-card-pink::after,
.gift-card-bank::after,
.glass-card-pink::after,
.soft-card-pink::after {
    transition:
        transform 650ms ease,
        opacity 650ms ease;
}

.event-card-pink:hover::after,
.gift-card-bank:hover::after,
.glass-card-pink:hover::after,
.soft-card-pink:hover::after {
    transform: scale(1.12);
    opacity: 0.9;
}

/* Section titles */
.section-title-pink {
    animation: sectionTitleRoseGlow 6.2s ease-in-out infinite;
}

.section-label {
    animation: labelSoftFade 5.2s ease-in-out infinite;
}

@keyframes sectionTitleRoseGlow {
    0%, 100% {
        text-shadow: 0 12px 28px rgba(143, 58, 91, 0.10);
    }

    50% {
        text-shadow:
            0 12px 34px rgba(143, 58, 91, 0.17),
            0 0 28px rgba(247, 199, 214, 0.24);
    }
}

@keyframes labelSoftFade {
    0%, 100% {
        opacity: 0.78;
    }

    50% {
        opacity: 1;
    }
}

/* ==========================================================
   Scroll Reveal Animation
   Compatible classes:
   .reveal, .reveal-on-scroll, .reveal-up, .reveal-left,
   .reveal-right, .reveal-scale, .reveal-blur, .stagger
   ========================================================== */

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

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

.reveal-up {
    transform: translateY(var(--reveal-distance));
}

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

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

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

.reveal-scale {
    transform: translateY(22px) scale(0.94);
}

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

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

/* Manual reveal delays */
.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 */
.stagger,
.reveal-stagger {
    --stagger-step: 95ms;
}

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

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

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

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

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

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

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

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

/* Blur-safe card states */
.glass-card-pink.reveal:not(.is-visible),
.soft-card-pink.reveal:not(.is-visible),
.event-card-pink.reveal:not(.is-visible),
.story-card-pink.reveal:not(.is-visible),
.gallery-polaroid.reveal:not(.is-visible),
.gift-card-bank.reveal:not(.is-visible),
.cover-guest.reveal:not(.is-visible),
.glass-card-pink.reveal-on-scroll:not(.is-visible),
.soft-card-pink.reveal-on-scroll:not(.is-visible),
.event-card-pink.reveal-on-scroll:not(.is-visible),
.story-card-pink.reveal-on-scroll:not(.is-visible),
.gallery-polaroid.reveal-on-scroll:not(.is-visible),
.gift-card-bank.reveal-on-scroll:not(.is-visible),
.cover-guest.reveal-on-scroll:not(.is-visible) {
    filter: blur(9px);
}

.glass-card-pink.reveal.is-visible,
.soft-card-pink.reveal.is-visible,
.event-card-pink.reveal.is-visible,
.story-card-pink.reveal.is-visible,
.gallery-polaroid.reveal.is-visible,
.gift-card-bank.reveal.is-visible,
.cover-guest.reveal.is-visible,
.glass-card-pink.reveal-on-scroll.is-visible,
.soft-card-pink.reveal-on-scroll.is-visible,
.event-card-pink.reveal-on-scroll.is-visible,
.story-card-pink.reveal-on-scroll.is-visible,
.gallery-polaroid.reveal-on-scroll.is-visible,
.gift-card-bank.reveal-on-scroll.is-visible,
.cover-guest.reveal-on-scroll.is-visible {
    filter: blur(0);
}

/* Hover only after visible, supaya tidak bentrok dengan transform reveal */
.glass-card-pink.reveal.is-visible:hover,
.soft-card-pink.reveal.is-visible:hover,
.event-card-pink.reveal.is-visible:hover,
.story-card-pink.reveal.is-visible:hover,
.gallery-polaroid.reveal.is-visible:hover,
.gift-card-bank.reveal.is-visible:hover,
.glass-card-pink.reveal-on-scroll.is-visible:hover,
.soft-card-pink.reveal-on-scroll.is-visible:hover,
.event-card-pink.reveal-on-scroll.is-visible:hover,
.story-card-pink.reveal-on-scroll.is-visible:hover,
.gallery-polaroid.reveal-on-scroll.is-visible:hover,
.gift-card-bank.reveal-on-scroll.is-visible:hover {
    transform: translateY(-5px);
    filter: blur(0);
}

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

/* Floating utility classes */
.float-ornament {
    animation: pinkSoftFloat 6.5s ease-in-out infinite;
}

.float-ornament-slow {
    animation: pinkSoftFloat 9s ease-in-out infinite;
}

.float-ornament-reverse {
    animation: pinkSoftFloatReverse 7.5s ease-in-out infinite;
}

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

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

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

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

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

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

/* Mobile optimization */
@media (max-width: 768px) {
    :root {
        --reveal-distance: 20px;
        --reveal-duration: 760ms;
    }

    .opener-bg {
        animation-duration: 22s;
    }

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

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

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

    .glass-card-pink:hover,
    .soft-card-pink:hover,
    .event-card-pink:hover,
    .story-card-pink:hover,
    .gallery-polaroid:hover,
    .gift-card-bank:hover,
    .glass-card-pink.reveal.is-visible:hover,
    .soft-card-pink.reveal.is-visible:hover,
    .event-card-pink.reveal.is-visible:hover,
    .story-card-pink.reveal.is-visible:hover,
    .gallery-polaroid.reveal.is-visible:hover,
    .gift-card-bank.reveal.is-visible:hover,
    .pink-button:hover,
    .cover-button:hover {
        transform: none;
    }
}

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

    .opener-bg,
    .opener-bg-overlay,
    .cover-card,
    .cover-card::before,
    .cover-card::after,
    .cover-corner,
    .corner-art,
    .rose-corner-tl,
    .rose-corner-br,
    .rose-border-top,
    .rose-separator,
    .animated-dash-border,
    .animated-dash-border-soft,
    .event-card-pink::before,
    .cover-names,
    .cover-names em,
    .section-title-pink,
    .section-label,
    .float-ornament,
    .float-ornament-slow,
    .float-ornament-reverse {
        animation: none !important;
    }

    #invitation-cover,
    .invitation-content,
    .reveal,
    .reveal-on-scroll,
    .stagger > *,
    .reveal-stagger > *,
    .glass-card-pink,
    .soft-card-pink,
    .event-card-pink,
    .story-card-pink,
    .gallery-polaroid,
    .gift-card-bank,
    .cover-button,
    .pink-button {
        opacity: 1 !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }
}


/* ==========================================================
   Blade-specific layout polish
   Sesuai pink-blossom.blade.php
   ========================================================== */

body {
    min-height: 100dvh;
    text-rendering: optimizeLegibility;
}

.invitation-content {
    background:
        linear-gradient(180deg, rgba(253, 242, 246, 0.96), rgba(255, 250, 247, 0.96));
}

.hero-section {
    min-height: 100svh;
}

.hero-section::after,
.couple-section::after,
.venue-section::after,
.gallery-section::after,
.rsvp-section::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: clamp(52px, 8vw, 92px);
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.72));
}

.hero-panel {
    width: min(100%, 920px);
    padding-inline: clamp(0.25rem, 2vw, 1rem);
}

.date-card {
    box-shadow:
        0 24px 70px rgba(143, 58, 91, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.couple-section {
    background-blend-mode: soft-light, normal;
}

.section-heading {
    padding-inline: 0.5rem;
}

.section-heading::after {
    content: "";
    display: block;
    width: 72px;
    height: 1px;
    margin: 1.35rem auto 0;
    background: linear-gradient(90deg, transparent, rgba(198, 93, 131, 0.45), transparent);
}

.section-glow {
    z-index: 0;
}

.couple-grid {
    align-items: stretch;
}

.couple-person {
    min-width: 0;
}

.couple-photo-frame {
    box-shadow:
        0 30px 70px rgba(143, 58, 91, 0.18),
        0 12px 26px rgba(198, 93, 131, 0.12);
}

.couple-photo-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.20), transparent 32%),
        linear-gradient(0deg, rgba(143, 58, 91, 0.16), transparent 38%);
}

.couple-info-card {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.event-section {
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.18), transparent 26%),
        radial-gradient(circle at 88% 80%, rgba(255, 240, 245, 0.14), transparent 28%),
        linear-gradient(135deg, #b66f82 0%, #a75d73 48%, #88475e 100%);
}

.event-grid {
    align-items: stretch;
}

.event-card-pink {
    min-height: 100%;
}

.venue-section iframe {
    display: block;
}

.story-section .story-card-pink {
    backdrop-filter: blur(10px);
}

.gallery-section {
    scroll-padding-inline: 1.5rem;
}

.gallery-polaroid {
    will-change: transform;
}

.gift-section {
    background:
        radial-gradient(circle at 0% 10%, rgba(247, 199, 214, 0.48), transparent 28%),
        radial-gradient(circle at 100% 90%, rgba(255, 214, 226, 0.42), transparent 26%),
        linear-gradient(180deg, #fffaf7, #fff0f5);
}

.rsvp-section {
    background:
        radial-gradient(circle at 10% 8%, rgba(247, 199, 214, 0.24), transparent 26%),
        linear-gradient(180deg, #ffffff, #fff8fb);
}

.footer-section {
    background:
        linear-gradient(180deg, #fff8fb 0%, #fdf2f2 100%);
}

/* Corner art tanpa opacity agar warna ornament tampil utuh */
.corner-art,
.rose-corner-tl,
.rose-corner-br {
    max-width: 260px;
}

/* Safe area untuk mobile dengan navigation bawah */
@supports (padding: max(0px)) {
    footer.footer-section {
        padding-bottom: max(8rem, calc(6.5rem + env(safe-area-inset-bottom)));
    }
}

@media (max-width: 768px) {
    .hero-panel {
        padding-top: 0.5rem;
    }

    .date-card {
        border-radius: 1.75rem;
        gap: 0.75rem;
    }

    .date-card > div {
        min-width: 72px;
    }

    .date-card .text-6xl,
    .date-card .md\:text-7xl {
        font-size: clamp(3.25rem, 16vw, 4.35rem);
    }

    .couple-grid {
        gap: 0rem;
    }

    .couple-photo-frame {
        width: min(74vw, 17rem);
        height: min(96vw, 23rem);
        border-width: 8px;
    }

    .couple-info-card {
        width: min(100%, 21rem);
        min-height: auto;
    }

    .event-card-pink .min-h-\[430px\] {
        min-height: 360px;
    }

    #lokasi .h-96 {
        height: 20rem;
    }

    .gallery-polaroid {
        transform: none !important;
    }

    .corner-art,
    .rose-corner-tl,
    .rose-corner-br {
        width: 150px;
        z-index: 70;
    }

    .corner-art-tl,
    .rose-corner-tl {
        top: -46px;
        left: -22px;
    }

    .corner-art-br,
    .rose-corner-br {
        right: -22px;
        bottom: 66px;
    }
}

@media (max-width: 480px) {
    .section-label {
        letter-spacing: 0.22em;
    }

    .hero-section {
        padding-top: 7.5rem;
    }

    .date-card {
        padding-inline: 0.75rem;
    }

    .date-card > div {
        min-width: 62px;
        padding-block: 0.65rem;
    }

    .date-card p {
        letter-spacing: 0.12em;
    }

    .cover-card {
        width: min(100%, 25rem);
    }

    .cover-names span {
        font-size: clamp(3.75rem, 17vw, 4.8rem);
    }

    .cover-date {
        width: min(100%, 18rem);
    }

    .event-card-pink .relative.z-10 {
        padding: 1.6rem;
    }

    #lokasi .h-96 {
        height: 17.5rem;
    }

    .corner-art,
    .rose-corner-tl,
    .rose-corner-br {
        width: 130px;
    }
}

#mempelai {
    min-height: auto !important;
    padding-top: 1.25rem !important;
    padding-bottom: 4rem !important;
}

#mempelai.bg-1 {
    min-height: auto !important;
}

#mempelai .max-w-3xl {
    margin-bottom: 2.75rem !important;
}

#mempelai .section-label {
    margin-bottom: 0.65rem !important;
}

#mempelai .section-title-pink {
    margin-bottom: 1rem !important;
}

@media (max-width: 768px) {
    #mempelai {
        padding-top: 2rem !important;
        padding-bottom: 3.25rem !important;
    }

    #mempelai .max-w-3xl {
        margin-bottom: 2rem !important;
    }

    #mempelai .section-title-pink {
        font-size: 3.25rem !important;
        line-height: 1;
    }
}

/* ==========================================================
   Fix section mempelai agar tidak terlalu tinggi
   ========================================================== */

#mempelai,
#mempelai.bg-1,
.couple-section {
    min-height: auto !important;
    height: auto !important;
}

#mempelai {
    padding-top: 1.5rem !important;
    padding-bottom: 3.5rem !important;
}

#mempelai.bg-1 {
    background-color: var(--rose-bg);
    background-image:
        linear-gradient(
            180deg,
            rgba(255, 250, 247, 0.16),
            rgba(255, 240, 245, 0.12)
        ),
        var(--bg-1-image, url('/storage/assets/pink-blossom/bg-1.png')) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: top center !important;
}

#mempelai .max-w-3xl {
    margin-bottom: 2rem !important;
}

#mempelai .section-label {
    margin-bottom: 0.4rem !important;
}

#mempelai .section-title-pink {
    margin-bottom: 0.75rem !important;
    line-height: 0.95 !important;
}

#mempelai .section-title-pink + p {
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.7;
}

/* Kalau masih ada decorative blur yang bikin area terasa penuh */
#mempelai > .absolute {
    display: none !important;
}

/* Compact layout foto mempelai */
#mempelai .animated-dash-border-soft {
    margin-bottom: 1.25rem !important;
}

#mempelai .soft-card-pink {
    padding: 1.5rem 1.35rem !important;
}

/* Mobile */
@media (max-width: 768px) {
    #mempelai {
        padding-top: 1rem !important;
        padding-bottom: 3rem !important;
    }

    #mempelai .max-w-3xl {
        margin-bottom: 1.5rem !important;
        margin-top: 1.5rem !important;
    }

    #mempelai .section-label {
        font-size: 9px !important;
        margin-bottom: 0.35rem !important;
    }

    #mempelai .section-title-pink {
        font-size: 3.15rem !important;
        margin-bottom: 0.5rem !important;
    }

    #mempelai .section-title-pink + p {
        font-size: 13px !important;
        line-height: 1.65 !important;
    }
}

@media (max-width: 480px) {
    #mempelai {
        padding-top: 0.75rem !important;
        padding-bottom: 2.5rem !important;
    }

    #mempelai .section-title-pink {
        font-size: 2.95rem !important;
    }
}

/* ==========================================================
   Final corner art lock
   - memakai corner-1.png dari Blade
   - tanpa opacity
   - menempel tepat di sudut viewport / cover
   ========================================================== */
.cover-corner,
.corner-art {
    display: block !important;
    height: auto !important;
    pointer-events: none !important;
    user-select: none !important;
    animation: none !important;
    will-change: auto !important;
}

.cover-corner {
    position: absolute !important;
    width: clamp(180px, 28vw, 340px) !important;
    z-index: 2 !important;
}

.corner-art {
    position: fixed !important;
    width: clamp(130px, 22vw, 260px) !important;
    z-index: 80 !important;
}

.cover-corner-tl,
.corner-art-tl {
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    bottom: auto !important;
    transform: rotate(180deg) !important;
    transform-origin: center center !important;
}

.cover-corner-br,
.corner-art-br {
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    left: auto !important;
    transform: rotate(0deg) !important;
    transform-origin: center center !important;
}

@media (max-width: 768px) {
    .cover-corner {
        width: clamp(160px, 46vw, 230px) !important;
    }

    .corner-art {
        width: clamp(120px, 34vw, 170px) !important;
    }
}

@media (max-width: 480px) {
    .cover-corner {
        width: clamp(150px, 52vw, 210px) !important;
    }

    .corner-art {
        width: clamp(110px, 38vw, 150px) !important;
    }
}