/*
 * Modular Stylesheet for Artsubs Blob Animation Shortcode
 */

.artsubs-blob-wrapper {
    position: fixed;
    inset: 0;
    z-index: 1001; /* Above header (z-index 999/1000) to blend with it */
    pointer-events: none;
    overflow: hidden;
    will-change: transform; /* Moved here from .blob child — prevents Safari implicit isolation */
    -webkit-mix-blend-mode: difference; /* Safari */
    mix-blend-mode: difference; /* Applied here to avoid isolation bugs */
}

.artsubs-blob-wrapper .blob {
    position: absolute;
    width: clamp(220px, 26vw, 360px);
    height: clamp(220px, 26vw, 360px);
    background-color: var(--blob-color, #cc3332);
    /* will-change removed from here — causes implicit isolation in Safari which
       breaks mix-blend-mode:difference. Now on parent .artsubs-blob-wrapper. */
    transition:
        transform 1.0s cubic-bezier(0.16, 1, 0.3, 1),
        clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.artsubs-marquee-wrapper {
    position: fixed;
    inset: 0;
    z-index: 1002; /* Above blob wrapper (z-index 1001) to avoid difference effect */
    pointer-events: none;
    overflow: hidden;
}

.artsubs-marquee-wrapper .marquee-layer {
    position: absolute;
    width: clamp(220px, 26vw, 360px);
    height: clamp(220px, 26vw, 360px);
    overflow: hidden;
    display: grid;
    place-items: center;
    pointer-events: auto;
    cursor: none;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform, clip-path;
    transition:
        transform 1.0s cubic-bezier(0.16, 1, 0.3, 1),
        clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 3;
}

.artsubs-marquee-wrapper .marquee-layer * {
    cursor: none;
    user-select: none;
    -webkit-user-select: none;
}

.artsubs-marquee-wrapper .marquee {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    list-style: none;
    margin: 0;
}

.artsubs-marquee-wrapper .marquee li {
    color: #111;
    font-size: 17pt;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-transform: uppercase;
    text-align: center;
}

.artsubs-blob-wrapper[data-behavior="fixed-bottom"] .blob,
.artsubs-marquee-wrapper[data-behavior="fixed-bottom"] .marquee-layer {
    width: 40dvh;
    height: 40dvh;
}

@media (max-width: 768px) {
    .artsubs-blob-wrapper .blob,
    .artsubs-marquee-wrapper .marquee-layer {
        width: clamp(160px, 55vw, 260px);
        height: clamp(160px, 55vw, 260px);
    }

    .artsubs-marquee-wrapper .marquee li {
        font-size: 10pt;
    }
}

@media (max-width: 480px) {
    .artsubs-blob-wrapper .blob,
    .artsubs-marquee-wrapper .marquee-layer {
        width: clamp(130px, 50vw, 200px);
        height: clamp(130px, 50vw, 200px);
    }

    .artsubs-marquee-wrapper .marquee li {
        font-size: 8pt;
    }
}

/* Custom Cursor & Dragging Styles */
.artsubs-cursor-dot,
.artsubs-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.artsubs-cursor-dot {
    width: 8px;
    height: 8px;
    background-color: var(--blob-color, #cc3332);
}

.artsubs-cursor-ring {
    width: 36px;
    height: 36px;
    border: 2px solid var(--blob-color, #cc3332);
    background-color: rgba(204, 51, 50, 0.05);
}

/* Cursor State Classes (applied to body via JS) */
body.artsubs-cursor-mouse.artsubs-cursor-active .artsubs-cursor-dot,
body.artsubs-cursor-mouse.artsubs-cursor-active .artsubs-cursor-ring {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

body.artsubs-cursor-mouse.artsubs-cursor-dragging .artsubs-cursor-ring {
    transform: translate(-50%, -50%) scale(0.85);
    background-color: rgba(204, 51, 50, 0.25);
    border-color: #111111;
}

body.artsubs-cursor-mouse.artsubs-cursor-dragging .artsubs-cursor-dot {
    transform: translate(-50%, -50%) scale(1.5);
    background-color: #111111;
}

/* Dragging active - bypass transition to make dragging 60fps responsive */
.artsubs-blob-wrapper .blob.dragging,
.artsubs-marquee-wrapper .marquee-layer.dragging {
    transition: none !important;
}

/* Hero only constraints */
.artsubs-blob-wrapper[data-hero-only="true"],
.artsubs-marquee-wrapper[data-hero-only="true"] {
    position: absolute;
    inset: 0;
    z-index: 10; /* Above background, but below navigation and main content overlay */
    pointer-events: none;
    overflow: hidden;
}

.artsubs-blob-wrapper[data-hero-only="true"] .blob,
.artsubs-marquee-wrapper[data-hero-only="true"] .marquee-layer {
    position: absolute;
}