@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

        /* ── LOADER ── */
        #loader {
    position: fixed;
    inset: 0;

    background-image: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)),
                      url('/assets/images/img bg2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* ── ADD THIS ── */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 28px;
    z-index: 9999;
    transition: opacity 0.9s ease, visibility 0.9s ease;
}
        #loader.hide {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        .ring-wrapper {
            position: relative;
            width: 300px;
            height: 300px;
        }
        .ring {
            position: absolute;
            inset: 0;
            border-radius: 50%;
            border: 3px solid transparent;
        }
        .ring-outer {
            border-top-color: #000000;
            border-right-color: #c0392b;
            filter: drop-shadow(0 0 6px #c0392b);
            animation: spinCW 1.4s linear infinite;
        }
        .ring-inner {
            inset: 14px;
            border-bottom-color: rgba(192,57,43,0.5);
            border-left-color: #620850;
            animation: spinCCW 1s linear infinite;
        }
        .ring-glow {
            position: absolute;
            inset: 8px;
            border-radius: 50%;
        background: radial-gradient(circle, #620850 0%, transparent 70%);
            animation: pulse 2s ease-in-out infinite;
        }
        .loader-logo {
            position: absolute;
            inset: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            object-fit: cover;
            animation: logoBreath 2s ease-in-out infinite;
        }
        .loader-name {
            font-family:'Times New Roman', Times, serif;
            font-size: 1.5rem;
            font-weight: 600;
            letter-spacing: 0.25em;
            color: #fffafa;
            text-transform: uppercase;
            text-shadow: 0 2px 12px #d50aac;
            opacity: 0;
            animation: fadeInName 0.8s ease forwards 0.4s;
        }
        .dots { display: flex; gap: 8px; }
        .dots span {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #73075d;
            animation: dotBounce 1.2s ease-in-out infinite;
        }
        .dots span:nth-child(2) { animation-delay: 0.2s; background: rgb(255, 25, 0); }
        .dots span:nth-child(3) { animation-delay: 0.4s; background: rgb(4, 0, 255); }

        /* ── PAGE BLUR ── */
        #page-content {
            background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/assets/images/img bg2.jpg');
            /* filter: blur(100px); */
            transform: scale(1.02);
            transition: filter 0.9s ease, transform 0.9s ease;
        }
        #page-content.loaded {
            background-image: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/assets/images/img bg2.jpg');
            /* filter: blur(100px); */
            transform: scale(1);
        }

        /* ── KEYFRAMES ── */
        @keyframes spinCW   { to { transform: rotate(360deg); } }
        @keyframes spinCCW  { to { transform: rotate(-360deg); } }
        @keyframes pulse {
            0%,100% { opacity: 0.5; transform: scale(1); }
            50%     { opacity: 1;   transform: scale(1.08); }
        }
        @keyframes logoBreath {
            0%,100% { transform: scale(1); }
            50%     { transform: scale(1.04); }
        }
        @keyframes fadeInName {
            from { opacity: 0; transform: translateY(6px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes dotBounce {
            0%,100% { transform: translateY(0);   opacity: 1; }
            50%     { transform: translateY(-6px); opacity: 0.5; }
        }