/* OK Season Poster for Elementor — all styles are scoped to this widget. */
.oksp-widget-wrap {
    width: 100%;
    min-width: 0;
    container-type: inline-size;
}

.oksp-card-stack {
    display: flex;
    flex-direction: column;
    gap: var(--oksp-card-gap, 14px);
    width: 100%;
    min-width: 0;
}

.oksp-poster {
    --oksp-ratio: 2.15;
    --oksp-radius: 12px;
    --oksp-border-width: 2px;
    --oksp-animation-duration: 7s;
    --oksp-border-angle: 0deg;
    --oksp-overlay-strength: .82;
    --oksp-glow-intensity: .7;
    --oksp-image-x: 62%;
    --oksp-accent: #a94dff;
    --oksp-red: #ff315b;
    --oksp-blue: #00c9ff;
    --oksp-pink: #ff55d7;
    --oksp-title-color: #ffffff;
    --oksp-season-color: #d7a0ff;
    --oksp-description-color: #e8e5ef;
    position: relative;
    isolation: isolate;
    display: block;
    width: 100%;
    height: auto;
    min-height: 160px;
    aspect-ratio: var(--oksp-ratio) / 1;
    overflow: hidden;
    border-radius: var(--oksp-radius);
    background:
        radial-gradient(ellipse at 70% 45%, rgba(111, 40, 191, .36), transparent 42%),
        linear-gradient(115deg, #08070e 0%, #151020 55%, #07070b 100%);
    color: #fff;
    text-decoration: none !important;
    box-shadow: 0 18px 36px rgba(0, 0, 0, .44), 0 4px 12px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .08);
    transform: translate3d(0, 0, 0);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
    -webkit-tap-highlight-color: transparent;
}

.oksp-poster,
.oksp-poster * {
    box-sizing: border-box;
}

.oksp-poster:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 5px;
}

.oksp-poster__image {
    position: absolute;
    z-index: -3;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--oksp-image-x) center;
    opacity: .98;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .8s ease;
}

.oksp-poster__shade {
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(4, 3, 10, var(--oksp-overlay-strength)) 0%,
            rgba(5, 3, 13, .92) 23%,
            rgba(8, 4, 18, .78) 43%,
            rgba(8, 3, 18, .28) 66%,
            rgba(5, 3, 12, .04) 100%),
        linear-gradient(0deg, rgba(3, 2, 8, .58) 0%, transparent 50%, rgba(7, 3, 15, .16) 100%);
}

.oksp-poster__purple-shimmer {
    /* A stationary purple sheen; no light streak crosses the artwork. */
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: .28;
    background:
        radial-gradient(ellipse at 66% 43%, color-mix(in srgb, var(--oksp-accent), transparent 78%), transparent 43%),
        radial-gradient(ellipse at 86% 78%, rgba(56, 26, 158, .10), transparent 38%);
    mix-blend-mode: screen;
}

.oksp-poster__edge-glow {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(ellipse at 50% 50%, transparent 68%, color-mix(in srgb, var(--oksp-accent), transparent 92%) 86%, transparent 100%);
    opacity: calc(var(--oksp-glow-intensity) * .28);
    mix-blend-mode: screen;
}

/* The animated gradient is masked to the thin border only. */
@property --oksp-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.oksp-poster::before {
    content: "";
    position: absolute;
    z-index: 5;
    inset: 0;
    padding: var(--oksp-border-width);
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(from var(--oksp-border-angle),
        var(--oksp-pink) 0deg,
        var(--oksp-accent) 54deg,
        var(--oksp-blue) 126deg,
        #00dcca 190deg,
        var(--oksp-blue) 246deg,
        var(--oksp-red) 310deg,
        var(--oksp-pink) 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--oksp-accent), transparent 68%));
    opacity: .86;
    animation: oksp-border-flow var(--oksp-animation-duration) linear infinite;
}

.oksp-poster::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .065) 0%,
        rgba(255, 255, 255, .012) 15%,
        transparent 42%,
        rgba(115, 73, 255, .025) 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .15),
        inset 0 0 0 1px rgba(255, 255, 255, .055),
        inset 0 -10px 24px rgba(0, 0, 0, .14);
}

.oksp-poster__content {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: clamp(14px, 4.5cqw, 54px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 45%;
    max-height: calc(100% - 36px);
    overflow: hidden;
    transform: translateY(-50%);
    text-align: left;
    pointer-events: none;
}

.oksp-title {
    display: block;
    max-width: 100%;
    margin: 0 0 clamp(4px, .7cqw, 8px);
    color: var(--oksp-title-color);
    font-family: inherit;
    font-size: clamp(19px, 4cqw, 40px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -.035em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 0 24px color-mix(in srgb, var(--oksp-accent), transparent 70%);
    overflow-wrap: anywhere;
}

.oksp-season {
    display: block;
    max-width: 100%;
    margin: 0 0 clamp(5px, .85cqw, 11px);
    color: var(--oksp-season-color);
    font-family: inherit;
    font-size: clamp(16px, 3cqw, 30px);
    font-weight: 800;
    line-height: 1.12;
    text-shadow: 0 0 16px color-mix(in srgb, var(--oksp-accent), transparent 48%);
    overflow-wrap: anywhere;
}

.oksp-description {
    display: -webkit-box;
    max-width: 100%;
    margin: 0 0 clamp(7px, 1.4cqw, 17px);
    overflow: hidden;
    color: var(--oksp-description-color);
    font-family: inherit;
    font-size: clamp(10px, 1.35cqw, 15px);
    font-weight: 400;
    line-height: 1.45;
    text-shadow: 0 2px 8px #000;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.oksp-watch-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: clamp(5px, .9cqw, 11px);
    max-width: 100%;
    min-height: clamp(28px, 3.4cqw, 40px);
    padding: clamp(7px, .9cqw, 10px) clamp(10px, 1.7cqw, 20px);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: linear-gradient(100deg, color-mix(in srgb, var(--oksp-accent), #49208e 22%), rgba(40, 20, 65, .82));
    color: #fff;
    font-family: inherit;
    font-size: clamp(8px, .95cqw, 11px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .11em;
    text-transform: uppercase;
    box-shadow: 0 5px 24px color-mix(in srgb, var(--oksp-accent), transparent 72%), inset 0 1px 0 rgba(255, 255, 255, .12);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.oksp-watch-button svg {
    display: block;
    width: clamp(10px, 1.1cqw, 13px);
    height: clamp(10px, 1.1cqw, 13px);
    flex: 0 0 clamp(10px, 1.1cqw, 13px);
}

.oksp-play-button {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    display: grid;
    width: clamp(42px, 7.2cqw, 82px);
    height: clamp(42px, 7.2cqw, 82px);
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .62);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(166, 74, 255, .86), rgba(25, 11, 53, .76));
    color: #fff;
    box-shadow: 0 0 0 clamp(4px, .6cqw, 7px) rgba(173, 80, 255, .11), 0 0 32px color-mix(in srgb, var(--oksp-accent), transparent 36%), inset 0 1px 0 rgba(255, 255, 255, .52);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    transform: translate(-50%, -50%);
    transition: transform .32s cubic-bezier(.2, .8, .2, 1), box-shadow .32s ease, background .32s ease;
    pointer-events: none;
}

.oksp-play-button::before {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid color-mix(in srgb, var(--oksp-accent), transparent 44%);
    border-radius: 50%;
    animation: oksp-play-pulse 2.8s ease-out infinite;
}

.oksp-play-button svg {
    display: block;
    width: 31%;
    height: 31%;
    margin-left: 4px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .28));
}

.oksp-quality-badge {
    position: absolute;
    z-index: 3;
    right: clamp(10px, 2.2cqw, 28px);
    bottom: clamp(10px, 2.2cqw, 24px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 43%;
    padding: clamp(5px, .65cqw, 7px) clamp(6px, .9cqw, 10px);
    border: 1px solid rgba(255, 224, 139, .88);
    border-radius: 6px;
    background: linear-gradient(135deg,
        rgba(255, 248, 202, .52) 0%,
        rgba(234, 183, 63, .36) 24%,
        rgba(143, 91, 13, .48) 58%,
        rgba(255, 220, 117, .30) 100%);
    color: #fff7d6;
    font-family: inherit;
    font-size: clamp(7px, .95cqw, 10px);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: .055em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(33, 20, 2, .9), 0 0 8px rgba(255, 213, 91, .24);
    -webkit-backdrop-filter: blur(10px) saturate(135%);
    backdrop-filter: blur(10px) saturate(135%);
    box-shadow:
        0 2px 10px rgba(0, 0, 0, .26),
        0 0 10px rgba(245, 190, 61, .16),
        inset 0 1px 0 rgba(255, 255, 235, .72),
        inset 0 -1px 0 rgba(112, 70, 7, .36),
        inset 0 0 8px rgba(255, 226, 141, .12);
    pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
    .oksp-poster:hover {
        transform: translate3d(0, -4px, 0);
        box-shadow: 0 25px 46px rgba(0, 0, 0, .52), 0 7px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .11);
    }

    .oksp-poster:hover .oksp-poster__image {
        transform: scale(1.035);
        filter: saturate(1.08) contrast(1.03);
    }

    .oksp-poster:hover .oksp-play-button {
        transform: translate(-50%, -50%) scale(1.07);
        background: linear-gradient(145deg, rgba(190, 104, 255, .97), rgba(44, 16, 88, .9));
        box-shadow: 0 0 0 8px rgba(173, 80, 255, .15), 0 0 36px color-mix(in srgb, var(--oksp-accent), transparent 15%), inset 0 1px 0 rgba(255, 255, 255, .62);
    }

    .oksp-poster:hover .oksp-watch-button {
        transform: translateY(-2px);
        box-shadow: 0 8px 30px color-mix(in srgb, var(--oksp-accent), transparent 58%), inset 0 1px 0 rgba(255, 255, 255, .18);
    }
}

@keyframes oksp-border-flow {
    from { --oksp-border-angle: 0deg; }
    to { --oksp-border-angle: 360deg; }
}

@keyframes oksp-play-pulse {
    0% { transform: scale(.9); opacity: .65; }
    75%, 100% { transform: scale(1.18); opacity: 0; }
}

/* Small screens preserve the same composition; only size-dependent cqw units shrink. */
@media (max-width: 360px) {
    .oksp-poster__content {
        width: 46%;
    }

    .oksp-description {
        -webkit-line-clamp: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .oksp-poster::before,
    .oksp-play-button::before {
        animation: none !important;
    }

    .oksp-poster__image,
    .oksp-play-button,
    .oksp-watch-button {
        transition: none !important;
    }

    .oksp-poster {
        transform: none !important;
    }
}