/**
 * Artist Edition — 3D hero, glitch titel, zwevende labels, custom cursor context.
 */

/* ——— Layout: stage + summary (override gallery-kolom) ——— */
.woocommerce div.product.petjes-artist-edition {
    display: block;
}

@media (min-width: 900px) {
    .woocommerce div.product.petjes-artist-edition {
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        gap: var(--space-6, 3rem) var(--space-6, 3rem);
        align-items: start;
    }

    .woocommerce div.product.petjes-artist-edition .petjes-artist-edition__stage-wrap {
        grid-column: 1;
    }

    .woocommerce div.product.petjes-artist-edition .summary.entry-summary {
        grid-column: 2;
    }

    .woocommerce div.product.petjes-artist-edition .woocommerce-tabs,
    .woocommerce div.product.petjes-artist-edition .related.products {
        grid-column: 1 / -1;
    }
}

/* ——— 3D stage ——— */
.petjes-artist-edition__stage-wrap {
    position: relative;
    width: 100%;
    margin-bottom: var(--space-4, 2rem);
}

@media (min-width: 900px) {
    .petjes-artist-edition__stage-wrap {
        margin-bottom: 0;
        position: sticky;
        top: calc(var(--petjes-header-h, 76px) + 1rem);
        align-self: start;
    }
}

.petjes-artist-edition__stage {
    position: relative;
    border: 1px solid var(--petjes-border, rgba(255, 255, 255, 0.1));
    background: linear-gradient(160deg, rgba(18, 18, 18, 0.98) 0%, #0a0a0a 100%);
    border-radius: 2px;
    overflow: hidden;
    min-height: min(72vh, 640px);
}

/* Geen transform/will-change hier: breekt WebGL in <model-viewer> in Chrome/Edge. */
.petjes-artist-edition__stage-inner {
    position: relative;
    width: 100%;
    min-height: min(72vh, 640px);
}

.petjes-artist-edition__model {
    display: block;
    width: 100%;
    height: min(72vh, 640px);
    background: transparent;
    /* Geen wit/grijs model-viewer poster-slot tijdens laden (los van Customizer “poster”-optie). */
    --poster-color: transparent;
    outline: none;
}

.petjes-artist-edition__stage .onsale {
    position: absolute;
    z-index: 4;
    top: var(--space-3, 1.5rem);
    left: var(--space-3, 1.5rem);
}

/* ——— Zwevende labels (meeschalen met stage-inner) ——— */
.petjes-artist-edition__labels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.petjes-artist-edition__label {
    position: absolute;
    left: var(--petjes-lx, 50%);
    top: var(--petjes-ly, 50%);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 11rem;
}

.petjes-artist-edition__label--left {
    flex-direction: row;
    transform: translate(0, -50%);
}

.petjes-artist-edition__label--right {
    flex-direction: row-reverse;
    transform: translate(-100%, -50%);
}

.petjes-artist-edition__label--center {
    flex-direction: column;
    transform: translate(-50%, -100%);
}

.petjes-artist-edition__label-line {
    display: block;
    flex-shrink: 0;
    width: 2rem;
    height: 1px;
    background: linear-gradient(
        90deg,
        var(--petjes-artist-label-text, var(--petjes-primary, #c9a962)),
        transparent
    );
    opacity: 0.88;
}

.petjes-artist-edition__label--right .petjes-artist-edition__label-line {
    background: linear-gradient(
        270deg,
        var(--petjes-artist-label-text, var(--petjes-primary, #c9a962)),
        transparent
    );
}

.petjes-artist-edition__label--center .petjes-artist-edition__label-line {
    width: 1px;
    height: 1.75rem;
    background: linear-gradient(
        180deg,
        var(--petjes-artist-label-text, var(--petjes-primary, #c9a962)),
        transparent
    );
}

.petjes-artist-edition__label-text {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--petjes-artist-label-text, rgba(242, 242, 242, 0.92));
    line-height: 1.25;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}

@media (max-width: 899px) {
    .petjes-artist-edition__label {
        display: none;
    }
}

/* ——— Glitch titel (product) ——— */
.woocommerce div.product h1.product_title .petjes-glitch-title {
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}

.petjes-glitch-title {
    display: inline-block;
    position: relative;
}

.petjes-glitch-title__inner {
    position: relative;
    display: inline-block;
    isolation: isolate;
}

.petjes-glitch-title:hover .petjes-glitch-title__inner {
    position: relative;
    z-index: 0;
    animation: petjes-glitch-shift 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
}

.petjes-glitch-title:hover .petjes-glitch-title__inner::before,
.petjes-glitch-title:hover .petjes-glitch-title__inner::after {
    content: attr(data-glitch);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}

.petjes-glitch-title:hover .petjes-glitch-title__inner::before {
    z-index: -1;
    color: rgba(255, 75, 130, 0.92);
    transform: translate(-2px, -1px);
    clip-path: polygon(0 0, 100% 0, 100% 48%, 0 48%);
    animation: petjes-glitch-flicker 0.4s steps(2) infinite;
}

.petjes-glitch-title:hover .petjes-glitch-title__inner::after {
    z-index: -2;
    color: rgba(70, 200, 255, 0.88);
    transform: translate(2px, 1px);
    clip-path: polygon(0 52%, 100% 52%, 100% 100%, 0 100%);
    animation: petjes-glitch-flicker 0.32s steps(2) infinite reverse;
}

@keyframes petjes-glitch-shift {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translate(-1px, 1px);
    }
    40% {
        transform: translate(1px, -1px);
    }
    60% {
        transform: translate(-1px, 0);
    }
    100% {
        transform: translate(0);
    }
}

@keyframes petjes-glitch-flicker {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.85;
    }
    100% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .petjes-glitch-title:hover .petjes-glitch-title__inner {
        animation: none;
    }

    .petjes-glitch-title:hover .petjes-glitch-title__inner::before,
    .petjes-glitch-title:hover .petjes-glitch-title__inner::after {
        animation: none;
    }
}

/* ——— Custom cursor (ring) ——— */
/* cursor:none pas als JS de ring echt heeft ingevoegd (petjes-artist-cursor-ready). */
body.petjes-artist-edition-active.petjes-artist-cursor-on.petjes-artist-cursor-ready {
    cursor: none;
}

body.petjes-artist-edition-active.petjes-artist-cursor-on.petjes-artist-cursor-ready a,
body.petjes-artist-edition-active.petjes-artist-cursor-on.petjes-artist-cursor-ready button,
body.petjes-artist-edition-active.petjes-artist-cursor-on.petjes-artist-cursor-ready input,
body.petjes-artist-edition-active.petjes-artist-cursor-on.petjes-artist-cursor-ready textarea,
body.petjes-artist-edition-active.petjes-artist-cursor-on.petjes-artist-cursor-ready select {
    cursor: none;
}

.petjes-artist-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 1px solid rgba(201, 169, 98, 0.75);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transition:
        width 0.2s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        height 0.2s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        margin 0.2s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
        border-color 0.2s;
    mix-blend-mode: difference;
}

.petjes-artist-cursor::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
    background: var(--petjes-primary, #c9a962);
    border-radius: 1px;
    opacity: 0.9;
}

.petjes-artist-cursor.is-over-model {
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border-color: rgba(201, 169, 98, 1);
    box-shadow: 0 0 24px rgba(201, 169, 98, 0.35);
}

@media (max-width: 899px), (prefers-reduced-motion: reduce) {
    body.petjes-artist-edition-active.petjes-artist-cursor-on {
        cursor: auto;
    }

    body.petjes-artist-edition-active.petjes-artist-cursor-on a,
    body.petjes-artist-edition-active.petjes-artist-cursor-on button {
        cursor: pointer;
    }

    .petjes-artist-cursor {
        display: none !important;
    }
}

@media (pointer: coarse) {
    body.petjes-artist-edition-active {
        cursor: auto !important;
    }

    .petjes-artist-cursor {
        display: none !important;
    }
}