:root {
    --spl-paper: #f4ead8;
    --spl-ink: #15110f;
    --spl-gold: #b88738;
}

body.spl-lock-scroll {
    overflow: hidden;
}

#shofar-premium-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    padding: 24px;
    background:
        radial-gradient(circle at 50% 44%, rgba(255,255,255,0.72), rgba(255,255,255,0.1) 42%, rgba(76,45,18,0.14) 100%),
        linear-gradient(135deg, var(--spl-paper), #ead5ad);
    opacity: 1;
    visibility: visible;
    transition: opacity 520ms ease, visibility 520ms ease;
    pointer-events: all;
}

#shofar-premium-loader::before,
#shofar-premium-loader::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#shofar-premium-loader::before {
    opacity: 0.22;
    background-image:
        radial-gradient(circle at 18% 22%, rgba(93, 55, 25, 0.18) 0 1px, transparent 1.5px),
        radial-gradient(circle at 72% 62%, rgba(93, 55, 25, 0.13) 0 1px, transparent 1.5px);
    background-size: 38px 38px, 52px 52px;
    mix-blend-mode: multiply;
}

#shofar-premium-loader::after {
    background: radial-gradient(circle at 50% 48%, transparent 0 50%, rgba(35, 20, 6, 0.18) 100%);
}

#shofar-premium-loader.is-hiding {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.spl-loader__stage {
    position: relative;
    z-index: 1;
    width: min(940px, 94vw);
    text-align: center;
    animation: spl-stage-in 720ms cubic-bezier(.2,.8,.2,1) both;
}

.spl-loader__svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.spl-paper {
    opacity: 0.72;
}

.spl-brand-outline,
.spl-brand-fill {
    font-family: "Edwardian Script ITC", "Great Vibes", "Snell Roundhand", "Brush Script MT", cursive;
    font-size: 102px;
    font-weight: 400;
    letter-spacing: 0.01em;
    dominant-baseline: alphabetic;
}

.spl-brand-outline {
    fill: transparent;
    stroke: var(--spl-ink);
    stroke-width: 1.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    animation: spl-write-text 2.65s cubic-bezier(.55,.02,.17,1) 120ms forwards;
}

.spl-brand-fill {
    fill: var(--spl-ink);
    opacity: 0;
    animation: spl-fill-text 950ms ease 2.05s forwards;
}

.spl-flourish {
    stroke: var(--spl-ink);
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 820;
    stroke-dashoffset: 820;
    opacity: 0.92;
    animation: spl-write-flourish 1.65s cubic-bezier(.55,.02,.18,1) 1.2s forwards;
}

.spl-pen {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: spl-pen-write 3s cubic-bezier(.45,.03,.18,1) 80ms forwards, spl-pen-hover 2.2s ease-in-out 3.1s infinite;
}

.spl-nib {
    transform-origin: center;
    animation: spl-nib-glint 2.8s ease-in-out infinite;
}

.spl-ink-drop {
    opacity: 0;
    transform-origin: center;
    animation: spl-ink-drop 1.6s ease 2.35s forwards;
}

.spl-loader__message {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: -18px;
    color: rgba(21, 17, 15, 0.78);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(13px, 1.8vw, 16px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.spl-dots {
    display: inline-flex;
    gap: 6px;
    transform: translateY(1px);
}

.spl-dots i {
    width: 6px;
    height: 6px;
    display: block;
    border-radius: 999px;
    background: var(--spl-ink);
    opacity: 0.28;
    animation: spl-dot-pulse 1.2s ease-in-out infinite;
}

.spl-dots i:nth-child(2) {
    animation-delay: 150ms;
}

.spl-dots i:nth-child(3) {
    animation-delay: 300ms;
}

@keyframes spl-stage-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.982);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes spl-write-text {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes spl-fill-text {
    to {
        opacity: 1;
    }
}

@keyframes spl-write-flourish {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes spl-pen-write {
    0% {
        opacity: 0;
        transform: translate(-390px, -44px) rotate(-9deg);
    }
    12% {
        opacity: 1;
    }
    45% {
        transform: translate(-210px, -23px) rotate(-6deg);
    }
    72% {
        transform: translate(-58px, 2px) rotate(-1deg);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes spl-pen-hover {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(4px, -4px) rotate(1deg);
    }
}

@keyframes spl-nib-glint {
    0%, 100% {
        filter: brightness(1);
    }
    45% {
        filter: brightness(1.18);
    }
}

@keyframes spl-ink-drop {
    0% {
        opacity: 0;
        transform: translateY(-8px) scale(0.5);
    }
    55% {
        opacity: 0.78;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0.2;
        transform: translateY(5px) scale(0.75);
    }
}

@keyframes spl-dot-pulse {
    0%, 80%, 100% {
        opacity: 0.24;
        transform: translateY(0) scale(0.82);
    }
    40% {
        opacity: 0.9;
        transform: translateY(-2px) scale(1);
    }
}

@media (max-width: 700px) {
    #shofar-premium-loader {
        padding: 18px;
    }

    .spl-loader__stage {
        width: min(620px, 98vw);
    }

    .spl-brand-outline,
    .spl-brand-fill {
        font-size: 86px;
    }

    .spl-loader__message {
        margin-top: -6px;
        font-size: 12px;
        letter-spacing: 0.06em;
    }
}

@media (prefers-reduced-motion: reduce) {
    #shofar-premium-loader,
    .spl-loader__stage,
    .spl-brand-outline,
    .spl-brand-fill,
    .spl-flourish,
    .spl-pen,
    .spl-nib,
    .spl-ink-drop,
    .spl-dots i {
        animation: none !important;
        transition: opacity 250ms ease, visibility 250ms ease !important;
    }

    .spl-brand-outline {
        stroke-dashoffset: 0;
    }

    .spl-brand-fill {
        opacity: 1;
    }

    .spl-flourish {
        stroke-dashoffset: 0;
    }
}