/* =========================================================
   ISTOREA THRILLING WEEKENDS — v1.5.2
   Three-video visible composition, compact height, autoplay-safe.
   Created and Designed by Kshitiz Jain
   ========================================================= */

.itwk-section,
.itwk-section *,
.itwk-section *::before,
.itwk-section *::after {
    box-sizing:border-box;
}

.itwk-section {
    --itwk-bg:#030303;
    --itwk-gold:#DDB54B;
    --itwk-white:#F4EFE7;
    --itwk-muted:#CBC7C1;
    --itwk-duration:680ms;

    position:relative;
    width:100% !important;
    max-width:100% !important;

    min-height:650px;

    margin:0 !important;
    padding:28px 0 24px !important;

    overflow:hidden !important;
    background:var(--itwk-bg);
    color:var(--itwk-white);
    isolation:isolate;
}

/* Background */
.itwk-bg,
.itwk-bg picture,
.itwk-bg img,
.itwk-bg-overlay {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.itwk-bg {
    z-index:0;
}

.itwk-bg picture,
.itwk-bg img {
    display:block;
}

.itwk-bg img {
    object-fit:cover;
    object-position:center;

    filter:
        saturate(.56)
        brightness(.44);

    transform:scale(1.025);

    transition:
        transform 1.05s cubic-bezier(.2,.75,.2,1);
}

.itwk-section.is-visible .itwk-bg img {
    transform:scale(1);
}

.itwk-bg-overlay {
    background:
        radial-gradient(
            circle at 50% 22%,
            rgba(221,181,75,.045),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            rgba(0,0,0,.90) 0%,
            rgba(0,0,0,.74) 29%,
            rgba(0,0,0,.72) 60%,
            rgba(0,0,0,.94) 100%
        );
}

/* Header */
.itwk-head {
    position:relative;
    z-index:4;

    width:min(980px, calc(100% - 28px));
    margin:0 auto;
    text-align:center;

    opacity:0;
    transform:translate3d(0,16px,0);

    transition:
        opacity .56s ease,
        transform .64s cubic-bezier(.2,.75,.2,1);
}

.itwk-section.is-visible .itwk-head {
    opacity:1;
    transform:none;
}

.itwk-eyebrow {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:11px;
    margin-bottom:9px;
}

.itwk-eyebrow span {
    width:38px;
    height:1px;
    background:rgba(221,181,75,.44);
}

.itwk-eyebrow p {
    margin:0;
    color:var(--itwk-gold);

    font-family:Arial,Helvetica,sans-serif;
    font-size:9px;
    font-weight:700;
    line-height:1;
    letter-spacing:.31em;
    text-transform:uppercase;
}

.itwk-head h2 {
    margin:0;

    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(42px,4.1vw,62px);
    font-weight:700;
    line-height:.94;
    letter-spacing:-.045em;
    text-transform:uppercase;
}

.itwk-head h2 span,
.itwk-head h2 em {
    display:inline;
    font-style:normal;
}

.itwk-head h2 span {
    color:var(--itwk-white);
}

.itwk-head h2 em {
    margin-left:.15em;
    color:var(--itwk-gold);
}

.itwk-subtitle {
    margin:8px 0 0;
    color:rgba(244,239,231,.72);

    font-family:Georgia,"Times New Roman",serif;
    font-size:15px;
    line-height:1.3;
}

.itwk-head-rule {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    margin-top:9px;
}

.itwk-head-rule span {
    width:62px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(221,181,75,.48));
}

.itwk-head-rule span:last-child {
    background:linear-gradient(90deg,rgba(221,181,75,.48),transparent);
}

.itwk-head-rule b {
    color:var(--itwk-gold);
    font-size:9px;
    line-height:1;
}

/* Carousel viewport */
.itwk-viewport {
    position:relative;
    z-index:5;

    width:100%;
    height:438px;

    margin-top:18px;

    overflow:hidden;
    outline:none;

    cursor:grab;
    touch-action:pan-y;

    user-select:none;
    -webkit-user-select:none;
}

.itwk-viewport.is-dragging {
    cursor:grabbing;
}

.itwk-stage {
    position:relative;
    width:100%;
    height:100%;
}

/* Cards */
.itwk-card {
    --itwk-x:0px;
    --itwk-y:0px;
    --itwk-scale:1;
    --itwk-opacity:0;
    --itwk-z:1;

    position:absolute;
    left:50%;
    top:0;

    width:340px;
    height:410px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.11);
    border-radius:19px;

    background:#080808;

    box-shadow:0 22px 48px rgba(0,0,0,.34);

    opacity:var(--itwk-opacity);

    transform:
        translate3d(
            calc(-50% + var(--itwk-x)),
            var(--itwk-y),
            0
        )
        scale(var(--itwk-scale));

    transform-origin:center center;

    z-index:var(--itwk-z);

    transition:
        transform var(--itwk-duration) cubic-bezier(.2,.75,.2,1),
        opacity calc(var(--itwk-duration) * .72) ease,
        border-color .3s ease,
        box-shadow .3s ease;

    pointer-events:none;
    backface-visibility:hidden;
}

.itwk-card::before {
    content:"ISTOREA NIGHTS";

    position:absolute;
    left:16px;
    top:15px;

    z-index:8;

    padding:8px 13px 7px 25px;

    border:1px solid rgba(221,181,75,.18);
    border-radius:999px;

    background:rgba(7,7,7,.56);

    color:rgba(239,221,171,.78);

    font-family:Arial,Helvetica,sans-serif;
    font-size:8px;
    font-weight:700;
    line-height:1;
    letter-spacing:.13em;

    white-space:nowrap;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.itwk-card::after {
    content:"";

    position:absolute;
    left:27px;
    top:26px;

    z-index:9;

    width:5px;
    height:5px;

    border-radius:50%;
    background:var(--itwk-gold);

    pointer-events:none;
}

.itwk-card.is-active {
    pointer-events:auto;

    border-color:rgba(221,181,75,.74);

    box-shadow:
        0 26px 60px rgba(0,0,0,.42),
        0 0 26px rgba(221,181,75,.08);
}

/* Media */
.itwk-media,
.itwk-media img,
.itwk-media video,
.itwk-media-shade {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.itwk-media {
    overflow:hidden;
}

.itwk-media img,
.itwk-media video {
    display:block;
    object-fit:cover;
    object-position:center;
    background:#080808;

    transition:
        opacity .24s ease,
        filter .3s ease,
        transform .6s cubic-bezier(.2,.75,.2,1);
}

.itwk-media img {
    transform:scale(1.02);
}

.itwk-media video {
    z-index:2;
    opacity:0;
    visibility:hidden;

    transform:none !important;
}

.itwk-media img:not([data-itwk-loaded="1"]) {
    opacity:0;
}

.itwk-media img[data-itwk-loaded="1"] {
    opacity:1;
}

.itwk-card[data-has-video="1"].is-video-ready .itwk-media video {
    opacity:1;
    visibility:visible;

    filter:
        saturate(.92)
        brightness(.92);
}

.itwk-card[data-has-video="1"].is-video-ready .itwk-media img {
    opacity:0;
}

.itwk-media-shade {
    z-index:3;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.03) 0%,
            rgba(0,0,0,.05) 46%,
            rgba(0,0,0,.28) 68%,
            rgba(0,0,0,.86) 100%
        );

    pointer-events:none;
}

/* Old play button remains disabled for compatibility */
.itwk-play {
    display:none !important;
}

/* Copy */
.itwk-copy {
    position:absolute;
    left:17px;
    right:17px;
    bottom:13px;

    z-index:5;
    text-align:center;
}

.itwk-copy h3 {
    margin:0;

    color:var(--itwk-white);

    font-family:Arial,Helvetica,sans-serif;
    font-size:9px;
    font-weight:700;
    line-height:1.2;
    letter-spacing:.12em;
    text-transform:uppercase;

    text-shadow:0 2px 13px rgba(0,0,0,.68);
}

.itwk-copy > span {
    display:block;
    margin-top:8px;

    color:var(--itwk-gold);

    font-size:9px;
    line-height:1;
}

/* EXACTLY THREE visible cards on desktop */
.itwk-card[data-position="0"] {
    --itwk-x:0px;
    --itwk-y:0px;
    --itwk-scale:1;
    --itwk-opacity:1;
    --itwk-z:10;

    width:366px;
    height:424px;
}

.itwk-card[data-position="-1"] {
    --itwk-x:-390px;
    --itwk-y:10px;
    --itwk-scale:.96;
    --itwk-opacity:.94;
    --itwk-z:8;
}

.itwk-card[data-position="1"] {
    --itwk-x:390px;
    --itwk-y:10px;
    --itwk-scale:.96;
    --itwk-opacity:.94;
    --itwk-z:8;
}

.itwk-card[data-position="-2"],
.itwk-card[data-position="2"],
.itwk-card[data-position="-3"],
.itwk-card[data-position="3"],
.itwk-card[data-position="hidden"] {
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:0 !important;
}

/* Navigation */
.itwk-nav {
    position:relative;
    z-index:5;

    width:min(1180px, calc(100% - 32px));

    margin:5px auto 0;

    display:grid;
    grid-template-columns:46px minmax(0,1fr) 46px;
    align-items:center;
    gap:14px;
}

.itwk-arrow {
    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid rgba(221,181,75,.30);
    border-radius:50%;

    background:rgba(7,7,7,.62);

    color:var(--itwk-gold);

    font-family:Arial,Helvetica,sans-serif;
    font-size:26px;
    line-height:1;

    cursor:pointer;

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease;

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

.itwk-progress {
    min-width:0;

    display:grid;
    grid-template-columns:minmax(70px,1fr) auto minmax(70px,1fr);

    align-items:center;
    gap:14px;
}

.itwk-progress-line {
    position:relative;

    height:1px;

    overflow:hidden;

    background:rgba(221,181,75,.19);
}

.itwk-progress-line span {
    display:block;

    width:0;
    height:100%;

    background:var(--itwk-gold);

    transition:width .55s cubic-bezier(.2,.75,.2,1);
}

.itwk-counter {
    display:flex;
    align-items:baseline;
    justify-content:center;
    gap:7px;

    white-space:nowrap;
}

.itwk-counter strong {
    color:var(--itwk-gold);

    font-family:Georgia,"Times New Roman",serif;
    font-size:34px;
    font-weight:700;
    line-height:1;
}

.itwk-counter span,
.itwk-counter em {
    color:rgba(244,239,231,.76);

    font-family:Georgia,"Times New Roman",serif;
    font-size:14px;
    font-style:normal;
}

.itwk-progress > p {
    grid-column:1/-1;

    margin:-1px 0 0;

    text-align:center;

    color:rgba(244,239,231,.46);

    font-family:Arial,Helvetica,sans-serif;
    font-size:6.5px;
    font-weight:700;
    line-height:1;
    letter-spacing:.22em;
    text-transform:uppercase;
}

.itwk-progress > p span {
    margin-left:4px;
    color:var(--itwk-gold);
    font-size:12px;
}

/* Desktop interaction */
@media (hover:hover) and (pointer:fine) {
    .itwk-card.is-active:hover {
        transform:
            translate3d(-50%,-5px,0)
            scale(1.008);
    }

    .itwk-card.is-active:hover .itwk-media img {
        transform:scale(1.055);
    }

    .itwk-arrow:hover {
        transform:scale(1.07);

        border-color:rgba(221,181,75,.68);
        background:rgba(221,181,75,.07);
    }
}

/* Laptop / tablet */
@media (max-width:1180px) and (min-width:768px) {
    .itwk-section {
        min-height:620px;
        padding-top:26px !important;
    }

    .itwk-head h2 {
        font-size:clamp(38px,5vw,54px);
    }

    .itwk-viewport {
        height:404px;
        margin-top:16px;
    }

    .itwk-card {
        width:292px;
        height:380px;
    }

    .itwk-card[data-position="0"] {
        width:314px;
        height:392px;
    }

    .itwk-card[data-position="-1"] {
        --itwk-x:-326px;
    }

    .itwk-card[data-position="1"] {
        --itwk-x:326px;
    }

    .itwk-nav {
        margin-top:2px;
    }
}

/* Mobile */
@media (max-width:767px) {
    .itwk-section {
        min-height:0;

        padding:
            24px
            0
            22px
            !important;
    }

    .itwk-bg img {
        filter:
            saturate(.50)
            brightness(.42);
    }

    .itwk-bg-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0,0,0,.90) 0%,
                rgba(0,0,0,.78) 34%,
                rgba(0,0,0,.84) 72%,
                rgba(0,0,0,.97) 100%
            );
    }

    .itwk-head {
        width:calc(100% - 22px);
    }

    .itwk-eyebrow {
        margin-bottom:8px;
        gap:8px;
    }

    .itwk-eyebrow span {
        width:24px;
    }

    .itwk-eyebrow p {
        font-size:7px;
        letter-spacing:.25em;
    }

    .itwk-head h2 {
        font-size:clamp(30px,9.2vw,38px);
        line-height:.95;
    }

    .itwk-head h2 span,
    .itwk-head h2 em {
        display:block;
    }

    .itwk-head h2 em {
        margin:1px 0 0;
    }

    .itwk-subtitle {
        margin-top:7px;
        font-size:12px;
    }

    .itwk-head-rule {
        margin-top:8px;
    }

    .itwk-head-rule span {
        width:42px;
    }

    .itwk-viewport {
        height:368px;
        margin-top:16px;
    }

    .itwk-card {
        width:min(70vw,270px) !important;
        height:342px !important;

        border-radius:17px;
    }

    .itwk-card[data-position="0"] {
        --itwk-x:0px;
        --itwk-y:0px;
        --itwk-scale:1;
        --itwk-opacity:1;

        width:min(74vw,286px) !important;
        height:354px !important;
    }

    /*
     * Side cards only peek on mobile, but they are still the only
     * other two video cards allowed to autoplay.
     */
    .itwk-card[data-position="-1"] {
        --itwk-x:-69vw;
        --itwk-y:10px;
        --itwk-scale:.91;
        --itwk-opacity:.62;
    }

    .itwk-card[data-position="1"] {
        --itwk-x:69vw;
        --itwk-y:10px;
        --itwk-scale:.91;
        --itwk-opacity:.62;
    }

    .itwk-card::before {
        left:12px;
        top:12px;

        padding:7px 10px 6px 21px;

        font-size:6.5px;
    }

    .itwk-card::after {
        left:21px;
        top:21px;

        width:4px;
        height:4px;
    }

    .itwk-copy {
        left:14px;
        right:14px;
        bottom:11px;
    }

    .itwk-copy h3 {
        font-size:8px;
    }

    .itwk-nav {
        width:calc(100% - 22px);

        grid-template-columns:39px minmax(0,1fr) 39px;

        gap:8px;

        margin-top:2px;
    }

    .itwk-arrow {
        width:38px;
        height:38px;

        font-size:22px;
    }

    .itwk-progress {
        gap:7px;
    }

    .itwk-counter {
        gap:5px;
    }

    .itwk-counter strong {
        font-size:25px;
    }

    .itwk-counter span,
    .itwk-counter em {
        font-size:11px;
    }

    .itwk-progress > p {
        font-size:5.5px;
    }

    .itwk-progress > p span {
        font-size:10px;
    }

    .itwk-media img {
        transform:none !important;
    }

    .itwk-card[data-has-video="1"].is-video-ready .itwk-media video {
        filter:
            saturate(.86)
            brightness(.87);
    }
}

@media (max-width:390px) {
    .itwk-section {
        padding-top:22px !important;
    }

    .itwk-head h2 {
        font-size:29px;
    }

    .itwk-viewport {
        height:346px;
    }

    .itwk-card {
        width:69vw !important;
        height:320px !important;
    }

    .itwk-card[data-position="0"] {
        width:74vw !important;
        height:332px !important;
    }

    .itwk-card[data-position="-1"] {
        --itwk-x:-68vw;
    }

    .itwk-card[data-position="1"] {
        --itwk-x:68vw;
    }
}

@media (prefers-reduced-motion:reduce) {
    .itwk-head,
    .itwk-card,
    .itwk-bg img,
    .itwk-media img,
    .itwk-media video,
    .itwk-arrow,
    .itwk-progress-line span {
        transition:none !important;
    }

    .itwk-head {
        opacity:1 !important;
        transform:none !important;
    }
}


/* =========================================================
   v1.5.3 — VIDEO AUTOPLAY RELIABILITY
   ========================================================= */

/*
 * The native video element now receives autoplay/muted/playsinline
 * attributes and a real poster, so a card never appears as an empty
 * black rectangle while media is preparing.
 */
.itwk-card[data-has-video="1"] .itwk-media video {
    display:block !important;
    object-fit:cover !important;
    object-position:center !important;

    width:100% !important;
    height:100% !important;

    background:#080808;
}

/*
 * Keep poster visible until actual video playback begins.
 */
.itwk-card[data-has-video="1"]:not(.is-video-ready) .itwk-media img {
    opacity:1 !important;
}

.itwk-card[data-has-video="1"].is-video-ready .itwk-media video {
    opacity:1 !important;
    visibility:visible !important;
}

.itwk-card[data-has-video="1"].is-video-ready .itwk-media img {
    opacity:0 !important;
}

/* Badge fix: guarantee enough room for the gold dot and full word ISTOREA. */
.itwk-card::before {
    text-indent:0 !important;
    overflow:visible !important;
}