/* =========================================================
   GLOBAL INVITATION ORNAMENTS
   Reusable untuk semua tema:
   - .cover-corner untuk halaman pembuka
   - .corner-art untuk ornament fixed/sticky utama
   - alias lama: .main-ornament, .ornament-main, .botanical-ornament
   ========================================================= */

/*
   Cara pakai:
   1. Load file ini sebelum CSS tema.
   2. Di CSS tema, cukup override variable --ornament-*.
   3. Gambar tetap dipanggil dari Blade/HTML lewat tag <img>.
*/

:root {
    /* Cover corner default */
    --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: 8s;

    --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: 9s;

    --ornament-cover-tl-top: -32px;
    --ornament-cover-tl-left: -32px;
    --ornament-cover-tl-transform: rotate(-4deg) translate(0, 0);
    --ornament-cover-tl-transform-mid: rotate(1deg) translate(8px, 8px);
    --ornament-cover-tl-duration: 8s;

    --ornament-cover-br-bottom: -32px;
    --ornament-cover-br-right: -32px;
    --ornament-cover-br-transform: rotate(180deg) translate(0, 0);
    --ornament-cover-br-transform-mid: rotate(184deg) translate(8px, 8px);
    --ornament-cover-br-duration: 9s;

    /* Main/fixed ornament default */
    --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: 8s;

    --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: 9s;

    --ornament-main-tl-top: -35px;
    --ornament-main-tl-left: -50px;
    --ornament-main-tl-transform: rotate(-4deg) translate(0, 0);
    --ornament-main-tl-transform-mid: rotate(1deg) translate(8px, 8px);
    --ornament-main-tl-duration: 8s;

    --ornament-main-br-bottom: -40px;
    --ornament-main-br-right: -55px;
    --ornament-main-br-transform: rotate(180deg) translate(0, 0);
    --ornament-main-br-transform-mid: rotate(184deg) translate(8px, 8px);
    --ornament-main-br-duration: 9s;
}

/* =========================
   COVER CORNER
   Parent harus relative/fixed
   ========================= */

.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;
}

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

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

/* =========================
   MAIN CORNER ART
   Letakkan di luar <main>
   ========================= */

.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;
}

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

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

/* =========================
   Animation global
   Bisa mengikuti transform tiap tema melalui variable.
   ========================= */

@keyframes ornamentFloat {
    0%, 100% {
        transform: var(--ornament-transform-start);
    }

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

/* =========================
   Responsive default global
   Tema tetap bisa override lagi di CSS masing-masing.
   ========================= */

@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-cover-tl-top: -32px;
        --ornament-cover-tl-left: -46px;
        --ornament-cover-br-bottom: -36px;
        --ornament-cover-br-right: -50px;

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

@media (max-width: 768px) {
    :root {
        --ornament-cover-width: min(58vw, 230px);
        --ornament-main-width: min(58vw, 230px);
        --ornament-main-z: 70;

        --ornament-cover-tr-top: -26px;
        --ornament-cover-tr-right: -32px;
        --ornament-cover-bl-bottom: -32px;
        --ornament-cover-bl-left: -44px;
        --ornament-cover-tl-top: -26px;
        --ornament-cover-tl-left: -32px;
        --ornament-cover-br-bottom: -32px;
        --ornament-cover-br-right: -44px;

        --ornament-main-tr-top: -26px;
        --ornament-main-tr-right: -32px;
        --ornament-main-bl-bottom: -32px;
        --ornament-main-bl-left: -44px;
        --ornament-main-tl-top: -26px;
        --ornament-main-tl-left: -32px;
        --ornament-main-br-bottom: -32px;
        --ornament-main-br-right: -44px;
    }
}

@media (max-width: 640px) {
    :root {
        --ornament-cover-width: 210px;

        --ornament-cover-tr-top: -44px;
        --ornament-cover-tr-right: -58px;
        --ornament-cover-bl-bottom: -44px;
        --ornament-cover-bl-left: -58px;
        --ornament-cover-tl-top: -44px;
        --ornament-cover-tl-left: -58px;
        --ornament-cover-br-bottom: -44px;
        --ornament-cover-br-right: -58px;
    }
}

@media (max-width: 480px) {
    :root {
        --ornament-cover-width: min(66vw, 190px);
        --ornament-main-width: min(66vw, 190px);

        --ornament-cover-tr-top: -18px;
        --ornament-cover-tr-right: -34px;
        --ornament-cover-bl-bottom: -24px;
        --ornament-cover-bl-left: -36px;
        --ornament-cover-tl-top: -18px;
        --ornament-cover-tl-left: -34px;
        --ornament-cover-br-bottom: -24px;
        --ornament-cover-br-right: -36px;

        --ornament-main-tr-top: -18px;
        --ornament-main-tr-right: -34px;
        --ornament-main-bl-bottom: -24px;
        --ornament-main-bl-left: -36px;
        --ornament-main-tl-top: -18px;
        --ornament-main-tl-left: -34px;
        --ornament-main-br-bottom: -24px;
        --ornament-main-br-right: -36px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cover-corner,
    .corner-art,
    .main-ornament,
    .ornament-main,
    .botanical-ornament {
        animation: none !important;
        transition: none !important;
    }
}