#preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(197, 154, 79, .12), transparent 30%),
        linear-gradient(145deg, #fffaf7 0%, #fff 48%, #f9eff1 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity .42s ease, visibility .42s ease;
    isolation: isolate;
}

#preloader::before,
#preloader::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(4px);
}

#preloader::before {
    width: min(54vw, 620px);
    height: min(54vw, 620px);
    background: radial-gradient(circle, rgba(107, 28, 55, .07) 0%, rgba(107, 28, 55, 0) 68%);
}

#preloader::after {
    width: min(30vw, 320px);
    height: min(30vw, 320px);
    background: radial-gradient(circle, rgba(197, 154, 79, .10) 0%, rgba(197, 154, 79, 0) 70%);
}

html.rm-preloader-lock,
html.rm-preloader-lock body {
    overflow: hidden;
    background: #fffaf7 !important;
}

#preloader.hide,
#preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#preloader .preloader-inner {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 24px;
}

.rm-necklace-loader {
    width: min(46vw, 360px);
    display: grid;
    place-items: center;
    gap: 14px;
    transform-origin: 50% 8%;
    animation: rm-necklace-swing 2.6s ease-in-out infinite;
    will-change: transform;
}

.rm-necklace-svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 16px 18px rgba(80, 24, 42, .13));
}

.rm-necklace-chain {
    fill: none;
    stroke: #b78836;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 4 8;
    animation: rm-necklace-chain-flow 1.5s linear infinite;
}

.rm-necklace-beads circle {
    fill: #e3bd69;
    stroke: #9d6d25;
    stroke-width: 2;
    transform-box: fill-box;
    transform-origin: center;
    animation: rm-necklace-bead-glow 1.6s ease-in-out infinite;
}

.rm-necklace-beads circle:nth-child(2n) { animation-delay: -.4s; }
.rm-necklace-beads circle:nth-child(3n) { animation-delay: -.8s; }
.rm-necklace-beads circle:nth-child(4n) { animation-delay: -1.2s; }

.rm-necklace-pendant {
    transform-box: fill-box;
    transform-origin: top center;
    animation: rm-necklace-pendant 1.9s ease-in-out infinite;
}

.rm-necklace-link {
    fill: none;
    stroke: #a9792c;
    stroke-width: 5;
    stroke-linecap: round;
}

.rm-necklace-gem {
    fill: #7f203f;
    stroke: #c89c4a;
    stroke-width: 4;
    stroke-linejoin: round;
}

.rm-necklace-gem-line {
    fill: none;
    stroke: rgba(255, 239, 199, .82);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rm-necklace-shine {
    fill: none;
    stroke: rgba(255, 255, 255, .92);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 20 80;
    animation: rm-necklace-shimmer 1.8s ease-in-out infinite;
}

.rm-necklace-loader-text {
    color: #6b1c37;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(15px, 1.7vw, 20px);
    font-weight: 700;
    letter-spacing: .18em;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 4px 18px rgba(107, 28, 55, .08);
}

@keyframes rm-necklace-swing {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50% { transform: rotate(3deg) translateY(-7px); }
}

@keyframes rm-necklace-pendant {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

@keyframes rm-necklace-chain-flow {
    to { stroke-dashoffset: -24; }
}

@keyframes rm-necklace-bead-glow {
    0%, 100% { opacity: .78; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.16); }
}

@keyframes rm-necklace-shimmer {
    0% { stroke-dashoffset: 100; opacity: 0; }
    30% { opacity: 1; }
    100% { stroke-dashoffset: -110; opacity: 0; }
}

@media (max-width: 767px) {
    .rm-necklace-loader { width: min(76vw, 330px); }
    .rm-necklace-loader-text { letter-spacing: .13em; }
}

@media (prefers-reduced-motion: reduce) {
    .rm-necklace-loader,
    .rm-necklace-chain,
    .rm-necklace-beads circle,
    .rm-necklace-pendant,
    .rm-necklace-shine { animation: none !important; }
}