/*
 * Flou public profile
 * Version 2.2.1
 * Consolidated from the Phase 2.x incremental styles.
 */

:root {
    color-scheme: dark;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--text, #fff);
    background: var(--page-background, #08070b);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Background */
.page-background {
    position: fixed;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center;
    background-size: cover;
}

.background-overlay {
    position: fixed;
    inset: 0;
    z-index: -2;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .18), rgba(0, 0, 0, .62));
}

/* Profile */
.profile-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: max(2rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom));
}

.profile-card {
    position: relative;
    width: min(100%, 34rem);
    padding: 2.2rem 1.25rem;
    text-align: center;
    background: rgba(18, 16, 22, var(--profile-opacity, .78));
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 2rem;
    box-shadow: 0 2rem 6rem rgba(0, 0, 0, .38);
    backdrop-filter: blur(var(--profile-blur, 20px));
    -webkit-backdrop-filter: blur(var(--profile-blur, 20px));
}

.profile-card.profile-seamless {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.profile-avatar {
    width: 9rem;
    height: 9rem;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .25);
    border-radius: 50%;
    box-shadow: 0 0 2rem color-mix(in srgb, var(--effect) 35%, transparent);
}

.profile-avatar-placeholder {
    display: inline-grid;
    place-items: center;
    font-size: 3rem;
    font-weight: 800;
    background: rgba(255, 255, 255, .08);
}

.profile-name {
    margin-top: 1.2rem;
    font-size: clamp(2.5rem, 10vw, 4rem);
    line-height: 1;
    letter-spacing: -.055em;
}

.profile-description {
    margin-top: .85rem;
    font-size: 1.08rem;
    font-weight: 650;
}

.profile-location {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-top: 1.25rem;
    color: color-mix(in srgb, var(--text) 82%, transparent);
    font-weight: 650;
}

/* Name effects */
.profile-name {
    position: relative;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    isolation: isolate;
}

.profile-name-text {
    position: relative;
    z-index: 2;
}

.name-effect-glow .profile-name {
    text-shadow: 0 0 .7rem var(--effect), 0 0 1.8rem color-mix(in srgb, var(--effect) 55%, transparent);
}

.name-effect-typewriter .profile-name-text::after {
    content: "|";
    animation: blink .7s step-end infinite;
}

.name-effect-shuffle .profile-name {
    font-family: ui-monospace, monospace;
    text-shadow: 2px 0 #ff4f9a, -2px 0 #5d8dff;
}


.name-particle-gif {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: none;
    width: clamp(4.5rem, 1.05em, 6.6rem);
    aspect-ratio: 90 / 68;
    pointer-events: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transform: translate(-50%, -50%) scale(1.0);
    opacity: .98;
    mix-blend-mode: screen;
}

.name-effect-particles-white .name-particle-gif {
    display: block;
    background-image: url("/static/effects/name-particles/white.gif");
}
.name-effect-particles-blue .name-particle-gif {
    display: block;
    background-image: url("/static/effects/name-particles/blue.gif");
}
.name-effect-particles-green .name-particle-gif {
    display: block;
    background-image: url("/static/effects/name-particles/green.gif");
}
.name-effect-particles-pink .name-particle-gif {
    display: block;
    background-image: url("/static/effects/name-particles/pink.gif");
}
.name-effect-particles-red .name-particle-gif {
    display: block;
    background-image: url("/static/effects/name-particles/red.gif");
}
.name-effect-particles-yellow .name-particle-gif {
    display: block;
    background-image: url("/static/effects/name-particles/yellow.gif");
}

/* Links */
.profile-links {
    display: grid;
    gap: .9rem;
    margin-top: 2rem;
}

.profile-link {
    display: grid;
    grid-template-columns: 3.25rem 1fr 3.25rem;
    align-items: center;
    min-height: 4.2rem;
    padding: .45rem;
    color: inherit;
    text-decoration: none;
    background: color-mix(in srgb, var(--link-button-color) var(--link-button-opacity), transparent);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08), 0 .8rem 2.5rem rgba(0, 0, 0, .18);
    transition: .16s;
}

.profile-link:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
}

.profile-link-icon {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    place-items: center;
    overflow: hidden;
    padding: .62rem;
    color: var(--icon);
    background: rgba(0, 0, 0, .35);
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 900;
    text-shadow: none;
}

.profile-link-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.profile-link-icon-fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    color: var(--icon);
    font-weight: 850;
}

.platform-custom .profile-link-icon img {
    border-radius: .25rem;
}

.profile-link > span:nth-child(2) {
    font-size: 1.08rem;
    font-weight: 650;
}

.link-arrow {
    opacity: .55;
}

/* Music */
.audio-toggle {
    position: absolute;
    right: 1rem;
    top: 1rem;
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    place-items: center;
    color: #fff;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
}

.audio-toggle.vinyl-toggle {
    width: 2.7rem;
    height: 2.7rem;
    padding: .12rem;
    background: rgba(8, 8, 8, .48);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 .45rem 1.2rem rgba(0, 0, 0, .3);
    overflow: visible;
}

.audio-toggle.vinyl-toggle.playing {
    color: inherit;
    box-shadow: 0 .45rem 1.2rem rgba(0, 0, 0, .3);
}

.vinyl-record-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    transform-origin: 50% 50%;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .38));
    animation: vinyl-image-spin 1.35s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform;
}

[data-youtube-audio] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* Page effects */
.page-effect-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.page-effect-layer-back {
    z-index: 0;
}

.profile-shell {
    position: relative;
    z-index: 1;
}

.page-effect-layer-front {
    z-index: 10;
}

.page-fx-item {
    position: absolute;
    display: block;
    pointer-events: none;
    will-change: transform, opacity;
}

/* Existing floating particles */
.page-effect-particles .page-effect-layer-back .page-fx-item {
    bottom: -1rem;
    width: var(--size, .35rem);
    height: var(--size, .35rem);
    background: var(--effect);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--effect);
    animation: float-up var(--duration, 10s) linear var(--delay, 0s) infinite;
}

/* Snow */
.page-effect-snow .page-effect-layer-front .page-fx-item {
    top: -2rem;
    color: rgba(255,255,255,.92);
    font-size: var(--size, .8rem);
    text-shadow: 0 0 .45rem rgba(255,255,255,.55);
    animation: snow-fall var(--duration, 10s) linear var(--delay, 0s) infinite;
}

/* Rain */
.page-effect-rain .page-effect-layer-front .page-fx-item {
    top: -18vh;
    width: 1px;
    height: var(--length, 3.5rem);
    background: linear-gradient(to bottom, transparent, rgba(185,220,255,.66));
    transform: rotate(10deg);
    animation: rain-fall var(--duration, 1.25s) linear var(--delay, 0s) infinite;
}

/* Stars */
.page-effect-stars .page-effect-layer-back .page-fx-item {
    width: var(--size, 2px);
    height: var(--size, 2px);
    background: rgba(255,255,255,.94);
    border-radius: 50%;
    box-shadow: 0 0 .6rem rgba(255,255,255,.8);
    animation: star-twinkle var(--duration, 2.5s) ease-in-out var(--delay, 0s) infinite;
}

/* Embers */
.page-effect-embers .page-effect-layer-front .page-fx-item {
    bottom: -1rem;
    width: var(--size, 4px);
    height: var(--size, 4px);
    background: #ff8a3d;
    border-radius: 50%;
    box-shadow: 0 0 .65rem #ff5a24;
    animation: ember-rise var(--duration, 6s) ease-out var(--delay, 0s) infinite;
}

/* Bubbles */
.page-effect-bubbles .page-effect-layer-front .page-fx-item {
    bottom: -5rem;
    width: var(--size, 1.5rem);
    height: var(--size, 1.5rem);
    border: 1px solid rgba(220,240,255,.58);
    border-radius: 50%;
    background: rgba(220,240,255,.06);
    box-shadow: inset .22rem .22rem .45rem rgba(255,255,255,.14);
    animation: bubble-rise var(--duration, 11s) ease-in var(--delay, 0s) infinite;
}

/* Matrix */
.page-effect-matrix .page-effect-layer-back {
    opacity: .48;
}
.page-effect-matrix .page-effect-layer-back .page-fx-item {
    top: -12rem;
    color: #60ff8c;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--size, .8rem);
    line-height: 1.15;
    white-space: pre;
    text-shadow: 0 0 .45rem rgba(96,255,140,.72);
    animation: matrix-fall var(--duration, 7s) linear var(--delay, 0s) infinite;
}

/* Aurora */
.page-effect-aurora .page-effect-layer-back {
    overflow: hidden;
    opacity: .72;
}
.page-effect-aurora .page-effect-layer-back::before,
.page-effect-aurora .page-effect-layer-back::after {
    position: absolute;
    width: 80vw;
    height: 46vh;
    content: "";
    border-radius: 50%;
    filter: blur(5rem);
    opacity: .34;
    animation: aurora-drift 14s ease-in-out infinite alternate;
}
.page-effect-aurora .page-effect-layer-back::before {
    left: -18vw;
    top: 4vh;
    background: linear-gradient(115deg, #47f2c7, #526bff, transparent 70%);
}
.page-effect-aurora .page-effect-layer-back::after {
    right: -22vw;
    top: 20vh;
    background: linear-gradient(235deg, #a85cff, #32e0ff, transparent 72%);
    animation-duration: 18s;
}

/* Glitch */
.page-effect-glitch .page-effect-layer-front::before,
.page-effect-glitch .page-effect-layer-front::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0;
    mix-blend-mode: screen;
    animation: page-glitch 4.8s steps(1,end) infinite;
}
.page-effect-glitch .page-effect-layer-front::before {
    background:
        linear-gradient(transparent 18%, rgba(255,44,115,.13) 18% 20%, transparent 20% 62%, rgba(0,225,255,.12) 62% 64%, transparent 64%);
}
.page-effect-glitch .page-effect-layer-front::after {
    background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.022) 4px 5px);
    animation-delay: .08s;
}

/* Night Time: intentionally subtle, just darkens the existing background. */
.page-effect-night .page-effect-layer-back {
    background:
        linear-gradient(rgba(4,9,24,.30), rgba(0,3,12,.42)),
        radial-gradient(circle at 50% 18%, rgba(18,38,70,.12), transparent 55%);
    mix-blend-mode: multiply;
}

@keyframes blink {
    50% { opacity: 0; }
}

18%, 72% { opacity: .95; }
    52% {
        opacity: .8;
        transform: translate(var(--dx),var(--dy)) rotate(120deg) scale(1.18);
    }
    78% {
        opacity: .45;
        transform: translate(calc(var(--dx) * -.45),calc(var(--dy) * .35)) rotate(230deg) scale(.8);
    }
}

@keyframes float-up {
    0% { transform: translateY(0) scale(.7); opacity: 0; }
    12% { opacity: .85; }
    100% { transform: translateY(-112vh) scale(.25); opacity: 0; }
}

@keyframes snow-fall {
    0% { transform: translate3d(0,-8vh,0) rotate(0deg); opacity: 0; }
    10% { opacity: .9; }
    100% { transform: translate3d(var(--drift),112vh,0) rotate(360deg); opacity: .45; }
}

@keyframes rain-fall {
    from { transform: translate3d(0,-12vh,0) rotate(10deg); opacity: 0; }
    12% { opacity: .72; }
    to { transform: translate3d(-9vw,125vh,0) rotate(10deg); opacity: .18; }
}

@keyframes star-twinkle {
    0%,100% { opacity: .18; transform: scale(.72); }
    50% { opacity: 1; transform: scale(1.35); }
}

@keyframes ember-rise {
    0% { transform: translate3d(0,0,0) scale(.55); opacity: 0; }
    14% { opacity: .92; }
    55% { transform: translate3d(var(--drift),-48vh,0) scale(1); opacity: .78; }
    100% { transform: translate3d(calc(var(--drift) * -.35),-108vh,0) scale(.25); opacity: 0; }
}

@keyframes bubble-rise {
    0% { transform: translate3d(0,0,0) scale(.75); opacity: 0; }
    12% { opacity: .5; }
    55% { transform: translate3d(var(--drift),-55vh,0) scale(1); }
    100% { transform: translate3d(calc(var(--drift) * -.45),-112vh,0) scale(1.15); opacity: 0; }
}

@keyframes matrix-fall {
    from { transform: translateY(-20vh); opacity: 0; }
    12% { opacity: .75; }
    to { transform: translateY(125vh); opacity: 0; }
}

@keyframes aurora-drift {
    from { transform: translate3d(-4vw,-2vh,0) rotate(-7deg) scale(1); }
    to { transform: translate3d(18vw,10vh,0) rotate(8deg) scale(1.18); }
}

@keyframes fog-drift {
    from { transform: translateX(-8vw) scale(1.03); }
    to { transform: translateX(13vw) scale(1.12); }
}

@keyframes page-glitch {
    0%, 91%, 100% { opacity: 0; transform: translateX(0); clip-path: inset(0 0 0 0); }
    92% { opacity: .75; transform: translateX(-6px); clip-path: inset(10% 0 68% 0); }
    93% { opacity: .38; transform: translateX(7px); clip-path: inset(44% 0 38% 0); }
    94% { opacity: .62; transform: translateX(-3px); clip-path: inset(72% 0 11% 0); }
    95% { opacity: 0; }
}

@keyframes vignette-pulse {
    0%,100% { opacity: .54; }
    50% { opacity: .86; }
}

@keyframes vinyl-image-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .page-fx-item,
    .page-effect-layer::before,
    .page-effect-layer::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 520px) {
    .profile-shell {
        align-items: start;
        padding-inline: .75rem;
    }

    .profile-card {
        margin-top: 1.5rem;
        padding-inline: .8rem;
    }

    .profile-avatar {
        width: 8rem;
        height: 8rem;
    }
}


/* =========================================================
   Flou 2.2.5 — Rain and Embers public-effect polish
   ========================================================= */

/* Rain: finer, denser, more natural streaks. */
.page-effect-rain .page-effect-layer-front .page-fx-item {
    top: -12vh;
    width: .75px;
    height: var(--length, 34px);
    border-radius: 999px;
    background: linear-gradient(
        to bottom,
        rgba(220,235,248,0),
        rgba(205,225,242,.52) 25%,
        rgba(225,238,250,.72)
    );
    box-shadow: 0 0 2px rgba(205,225,245,.12);
    transform: rotate(11deg);
    animation: rain-fall-polished var(--duration, .82s) linear var(--delay, 0s) infinite;
}

/* Embers: glowing fire sparks rather than plain orange dots. */
.page-effect-embers .page-effect-layer-front .page-fx-item {
    bottom: -1.25rem;
    width: var(--size, 4px);
    height: calc(var(--size, 4px) * 1.55);
    border-radius: 60% 40% 60% 40%;
    background:
        radial-gradient(circle at 50% 28%, #fff0a0 0 12%, #ffb32f 20%, #ff6b1f 58%, #cf2b0d 100%);
    box-shadow:
        0 0 .35rem rgba(255,188,62,.8),
        0 0 .8rem rgba(255,73,17,.62);
    animation: ember-rise-polished var(--duration, 6s) ease-out var(--delay, 0s) infinite;
}

@keyframes rain-fall-polished {
    0% {
        transform: translate3d(1vw,-14vh,0) rotate(11deg);
        opacity: 0;
    }
    8% { opacity: var(--rain-opacity, .55); }
    92% { opacity: var(--rain-opacity, .55); }
    100% {
        transform: translate3d(-11vw,122vh,0) rotate(11deg);
        opacity: 0;
    }
}

@keyframes ember-rise-polished {
    0% {
        transform: translate3d(0,0,0) rotate(0deg) scale(.45);
        opacity: 0;
    }
    10% { opacity: .96; }
    40% {
        transform: translate3d(var(--drift),-38vh,0) rotate(35deg) scale(.92);
        opacity: .9;
    }
    72% {
        transform: translate3d(calc(var(--drift) * -.45),-72vh,0) rotate(72deg) scale(.68);
        opacity: .55;
    }
    100% {
        transform: translate3d(calc(var(--drift) * .22),-110vh,0) rotate(110deg) scale(.2);
        opacity: 0;
    }
}


/* Flou 2.2.6 — wind-blown fire embers */
.page-effect-embers .page-effect-layer-front .page-fx-item {
    transform-origin: center;
    animation: ember-wind-blown var(--duration, 6s) cubic-bezier(.2,.55,.35,1) var(--delay, 0s) infinite;
}

@keyframes ember-wind-blown {
    0% {
        transform: translate3d(0, 2vh, 0) rotate(0deg) scale(.38);
        opacity: 0;
    }
    8% {
        opacity: .96;
    }
    28% {
        transform:
            translate3d(
                calc(var(--wind) * .22),
                -27vh,
                0
            )
            rotate(42deg)
            scale(.95);
        opacity: .94;
    }
    52% {
        transform:
            translate3d(
                calc((var(--wind) * .5) + var(--sway)),
                -52vh,
                0
            )
            rotate(95deg)
            scale(.78);
        opacity: .8;
    }
    76% {
        transform:
            translate3d(
                calc((var(--wind) * .78) - (var(--sway) * .6)),
                -80vh,
                0
            )
            rotate(155deg)
            scale(.54);
        opacity: .48;
    }
    100% {
        transform:
            translate3d(
                var(--wind),
                -114vh,
                0
            )
            rotate(230deg)
            scale(.18);
        opacity: 0;
    }
}


/* =========================================================
   Flou 2.2.7 — Floating Particles visibility + Ember streaks
   ========================================================= */

/* Floating Particles now render on the visible front FX layer. */
.page-effect-particles .page-effect-layer-front .page-fx-item {
    bottom: -1rem;
    width: var(--size, 4px);
    height: var(--size, 4px);
    border-radius: 50%;
    background: var(--effect);
    box-shadow: 0 0 7px color-mix(in srgb, var(--effect) 72%, transparent);
    animation: float-up-visible var(--duration, 10s) linear var(--delay, 0s) infinite;
}

@keyframes float-up-visible {
    0% {
        transform: translate3d(0, 3vh, 0) scale(.7);
        opacity: 0;
    }
    12% {
        opacity: var(--particle-opacity, .65);
    }
    78% {
        opacity: var(--particle-opacity, .65);
    }
    100% {
        transform: translate3d(0, -112vh, 0) scale(.25);
        opacity: 0;
    }
}

/* Fire-ember treatment based on the supplied visual reference:
   thin glowing orange/gold streaks, carried upward and sideways by wind. */
.page-effect-embers .page-effect-layer-front .page-fx-item {
    bottom: -2rem;
    width: var(--ember-width, 1.4px);
    height: var(--ember-length, 12px);
    border-radius: 999px;
    background: linear-gradient(
        to top,
        rgba(160,49,5,.15) 0%,
        #ff5a0a 26%,
        #ffa928 62%,
        #ffe08a 100%
    );
    box-shadow:
        0 0 3px rgba(255,174,47,.85),
        0 0 8px rgba(255,92,12,.58);
    filter: saturate(1.25);
    transform-origin: center;
    animation: ember-streak-wind var(--duration, 5.6s) cubic-bezier(.2,.55,.35,1) var(--delay, 0s) infinite;
}

@keyframes ember-streak-wind {
    0% {
        transform: translate3d(0, 4vh, 0) rotate(-7deg) scaleY(.65);
        opacity: 0;
    }
    8% {
        opacity: var(--ember-opacity, .8);
    }
    28% {
        transform:
            translate3d(calc(var(--wind) * .20), -24vh, 0)
            rotate(7deg)
            scaleY(1);
        opacity: var(--ember-opacity, .8);
    }
    52% {
        transform:
            translate3d(calc((var(--wind) * .48) + var(--sway)), -50vh, 0)
            rotate(15deg)
            scaleY(.88);
        opacity: calc(var(--ember-opacity, .8) * .9);
    }
    76% {
        transform:
            translate3d(calc((var(--wind) * .76) - (var(--sway) * .55)), -78vh, 0)
            rotate(22deg)
            scaleY(.7);
        opacity: .46;
    }
    100% {
        transform:
            translate3d(var(--wind), -114vh, 0)
            rotate(27deg)
            scaleY(.38);
        opacity: 0;
    }
}


/* =========================================================
   Flou 2.2.8 — full-bleed link logos + independent Name Glow
   ========================================================= */

/* Uploaded logos now fill the icon space instead of sitting inside a dark padded circle. */
.profile-link-icon {
    padding: 0;
    background: transparent;
}

.profile-link-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.platform-custom .profile-link-icon img {
    border-radius: 50%;
}

/* Fallback letter still gets a neutral circular backing when no image exists. */
.profile-link-icon:has(.profile-link-icon-fallback) {
    padding: .62rem;
    background: rgba(0, 0, 0, .35);
}

/* Optional glow independent from the selected username animation. */
.name-glow .profile-name-text {
    text-shadow:
        0 0 .14em color-mix(in srgb, var(--text) 96%, transparent),
        0 0 .34em color-mix(in srgb, var(--text) 82%, transparent),
        0 0 .72em color-mix(in srgb, var(--text) 58%, transparent),
        0 0 1.15em color-mix(in srgb, var(--text) 36%, transparent);
}

/* Keep Name Glow additive when Soft Glow is also selected. */
.name-glow.name-effect-glow .profile-name {
    text-shadow:
        0 0 .34rem var(--effect),
        0 0 .9rem color-mix(in srgb, var(--effect) 60%, transparent);
}


/* =========================================================
   Flou 2.2.9 — configurable link buttons + reliable cursor
   ========================================================= */

.profile-link {
    border-color: color-mix(in srgb, var(--link-button-color) 26%, transparent);
}

/* Native custom-cursor fallback. Applies to interactive children too. */
@media (pointer: fine) {
    .has-custom-cursor,
    .has-custom-cursor * {
        cursor: var(--custom-cursor-source) !important;
    }

    .custom-cursor-visual {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 2147483647;
        display: none;
        width: 32px;
        height: 32px;
        pointer-events: none;
        transform: translate3d(-100px, -100px, 0);
        will-change: transform;
    }

    .custom-cursor-visual img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }

    /* Once the visual cursor image successfully loads, hide the native pointer
       and use the normalized 32px follower. This also makes oversized PNG/WebP
       cursor uploads work instead of being silently rejected by browsers. */
    .cursor-visual-ready,
    .cursor-visual-ready * {
        cursor: none !important;
    }

    .cursor-visual-ready .custom-cursor-visual {
        display: block;
    }
}


/* =========================================================
   Flou 2.2.10 — mobile cursor containment
   The cursor visual is hidden and removed from document flow on every device
   by default. Fine-pointer desktops opt in inside the media query below.
   ========================================================= */
.custom-cursor-visual {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2147483647;
    display: none;
    width: 32px;
    height: 32px;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(-100px, -100px, 0);
    will-change: transform;
    contain: strict;
}

.custom-cursor-visual img {
    display: block;
    width: 32px;
    height: 32px;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    pointer-events: none;
}

@media (pointer: coarse), (hover: none) {
    .custom-cursor-visual {
        display: none !important;
    }
}