/* PT. Pola Dwipa loader branding.
 * Loaded after the base frontend styles so every existing .pd-loader-core
 * (site loader, article modal, photo lightbox) shares one visual system.
 */

.pd-loader-orbit {
    width: 96px;
    height: 96px;
    filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.12));
}

.pd-loader-core {
    inset: 18px;
    overflow: hidden;
    color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.94);
    border-radius: 18px;
    background:
        url('https://poladwipa.com/assets/images/logo-pola.webp') center / 72% auto no-repeat,
        linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 250, 252, 0.96));
    box-shadow:
        0 10px 26px rgba(15, 23, 42, 0.18),
        0 0 0 1px rgba(245, 158, 11, 0.13),
        inset 0 0 18px rgba(245, 158, 11, 0.06);
    font-size: 0;
    letter-spacing: 0;
    animation: pdLoaderLogoBreathe 1.8s ease-in-out infinite;
}

.pd-loader-core::before {
    position: absolute;
    inset: -30% -70%;
    content: '';
    background: linear-gradient(
        110deg,
        transparent 38%,
        rgba(255, 255, 255, 0.08) 44%,
        rgba(245, 158, 11, 0.28) 50%,
        rgba(255, 255, 255, 0.16) 56%,
        transparent 62%
    );
    transform: translateX(-52%) rotate(8deg);
    animation: pdLoaderLogoSweep 2.4s ease-in-out infinite;
    pointer-events: none;
}

.pd-loader-core::after {
    position: absolute;
    inset: 3px;
    content: '';
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 14px;
    box-shadow: inset 0 0 14px rgba(245, 158, 11, 0.05);
    pointer-events: none;
}

/* Keep the compact photo-loader balanced while retaining the same branding. */
.lightbox-loading .pd-loader-orbit {
    width: 64px;
    height: 64px;
}

.lightbox-loading .pd-loader-core {
    inset: 12px;
    border-radius: 12px;
    background-size: 72% auto, auto;
}

.lightbox-loading .pd-loader-core::after {
    inset: 2px;
    border-radius: 9px;
}

@keyframes pdLoaderLogoBreathe {
    0%, 100% {
        transform: scale(0.96);
        box-shadow:
            0 8px 22px rgba(15, 23, 42, 0.16),
            0 0 0 1px rgba(245, 158, 11, 0.12),
            0 0 0 0 rgba(245, 158, 11, 0.02);
    }
    50% {
        transform: scale(1.035);
        box-shadow:
            0 13px 30px rgba(15, 23, 42, 0.2),
            0 0 0 1px rgba(245, 158, 11, 0.26),
            0 0 0 8px rgba(245, 158, 11, 0.055);
    }
}

@keyframes pdLoaderLogoSweep {
    0%, 22% {
        opacity: 0;
        transform: translateX(-58%) rotate(8deg);
    }
    38% {
        opacity: 1;
    }
    62% {
        opacity: 0.9;
        transform: translateX(58%) rotate(8deg);
    }
    76%, 100% {
        opacity: 0;
        transform: translateX(58%) rotate(8deg);
    }
}

@media (max-width: 640px) {
    .pd-loader-orbit {
        width: 88px;
        height: 88px;
    }

    .pd-loader-core {
        inset: 18px;
        border-radius: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pd-loader-core,
    .pd-loader-core::before {
        animation: none !important;
    }

    .pd-loader-core {
        transform: none;
    }
}