/* ═══════════════════════════════════════════════════════════════
   ZERONIQ Cinema — image-sequence immerse hero.
   Tall wrap + sticky inner = pin. JS drives canvas frame + the
   card-scale / title-split choreography from scroll progress.
   ═══════════════════════════════════════════════════════════════ */

.zcin-wrap {
    position: relative;
    width: 100vw;
    max-width: 100vw;
    /* Full-bleed: break out of any Elementor container padding/width so the
       cinematic hero always runs edge-to-edge, regardless of the boxed
       container it sits in. Centred via the classic 50%/50vw margin trick;
       overflow-x is clipped on the section so this never adds a scrollbar. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: clip;
    /* height (scroll length vh) set via Elementor selectors */
}

.zcin-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: #0A0B0F;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}

/* Accent + vignette layers sit behind the content. */
.zcin-accent {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #14171E;
    opacity: 0;                 /* faded in by entry (JS) */
    transition: opacity 1.2s ease;
}
.zcin-sticky.is-entered .zcin-accent { opacity: 1; }

.zcin-vignette {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0) 55%),
        radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.5) 100%);
}

.zcin-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1.5vh, 20px);
}

/* Split titles. */
.zcin-title {
    margin: 0;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.85;
    letter-spacing: -0.04em;
    font-size: clamp(3.5rem, 12vw, 11rem);
    color: #0A0B0F;
    will-change: transform, opacity;
    white-space: nowrap;
    pointer-events: none;
}

/* Frame card — scales from start size to fullscreen immerse. */
.zcin-card {
    position: relative;
    /* Natural size = full viewport width, height from aspect. Start size is
       applied via transform: scale(startScale). Immerse animates back to
       scale(1.0) = true fullscreen coverage. */
    width: 100vw;
    max-width: 100vw;
    max-height: none;
    aspect-ratio: var(--zcin-aspect, 1.7778);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 80px rgba(0,0,0,0.55);
    outline: 1px solid rgba(255,255,255,0.1);
    will-change: transform, border-radius;
    transform-origin: 50% 50%;
    z-index: 2;
    transition: border-radius 0.5s ease, box-shadow 0.5s ease, outline-color 0.5s ease;
}
.zcin-card::after {
    /* inner shadow for depth (fades out at immerse) */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    box-shadow: inset 0 0 120px rgba(0,0,0,0.45);
    transition: opacity 0.5s ease;
}
/* Fullscreen immerse: card becomes edge-to-edge, no visual frame. */
.zcin-sticky.is-immersed .zcin-card {
    border-radius: 0;
    box-shadow: none;
    outline-color: transparent;
}
.zcin-sticky.is-immersed .zcin-card::after { opacity: 0; }

.zcin-canvas,
.zcin-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.zcin-poster { z-index: 0; }
.zcin-canvas { z-index: 1; opacity: 0; transition: opacity 0.4s ease; }
.zcin-canvas.is-ready { opacity: 1; }

/* End transition. */
.zcin-endfade {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    background: #0A0B0F;
    opacity: 0;
    /* opacity driven directly by JS in fade-bg end mode */
}

/* Mobile + reduced motion: static poster, no scrub, collapse scroll. */
.zcin-static .zcin-canvas { display: none; }
.zcin-static .zcin-card   { transform: none !important; }
.zcin-static .zcin-title  { transform: none !important; opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
    .zcin-canvas { display: none; }
}

/* Editor placeholder. */
.zcin-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: rgba(255,255,255,0.85);
    background:
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--lime,#B4ED5F) 6%, transparent), transparent 60%),
        linear-gradient(180deg, #14171E 0%, #0A0B0F 100%);
    box-sizing: border-box;
    min-height: 300px;
}
.zcin-placeholder__title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #ffffff 0%, var(--lime,#B4ED5F) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.zcin-placeholder__hint { font-size: 14px; max-width: 440px; line-height: 1.5; opacity: 0.75; }

@media (max-width: 600px) {
    .zcin-title { font-size: clamp(2.5rem, 15vw, 5rem); }
}

/* ═══════════════════════ Shared text elements ═══════════════════════ */

.zcin-kicker {
    font-size: clamp(0.8rem, 1.1vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    will-change: transform, opacity;
}

/* CTA buttons. */
.zcin-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    font-weight: 700;
    padding: 0.85em 1.7em;
    border-radius: 999px;
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
    will-change: transform, opacity;
    z-index: 3;
    align-self: flex-start;
}
.zcin-cta:hover { transform: translateY(-2px); }
.zcin-arrow { transition: transform 0.2s ease; }
.zcin-cta:hover .zcin-arrow { transform: translateX(4px); }

.zcin-cta--filled  { background: #ffffff; color: #0A0B0F; }
.zcin-cta--filled:hover { background: #f5f5f5; }
.zcin-cta--outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.zcin-cta--outline:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

/* ═══════════════════════════════════════════════════════════════

   PRESET BLOCK SYSTEM — flow layouts (no overlap) + geometric effects.
   ═══════════════════════════════════════════════════════════════ */

.zcin-stage {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

/* Flow container: positioned once, children stack in normal flow so text
   never overlaps. This is the fix for stacked-center blocks. */
.zcin-flow {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: none;
}
.zcin-flow--center {
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    text-align: center;
    width: min(90vw, 900px);
}
.zcin-flow--bl {
    bottom: 8%; left: 6%;
    align-items: flex-start;
    text-align: left;
    max-width: 70vw;
}

/* Flow items animate individually but flow in the column (no overlap). */
.zcin-flowitem { display: block; }

/* Standalone positioned blocks (corners, edges). */
.zcin-block { position: absolute; box-sizing: border-box; padding: 20px; }
.zcin-flow .zcin-block { position: relative; padding: 0; }

.zcin-block__inner {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                clip-path 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.zcin-block.is-active .zcin-block__inner { opacity: 1; transform: none !important; }

/* Positions for standalone blocks. */
.zcin-pos-center { top: 50%; left: 50%; transform: translate(-50%, -50%) translate(var(--zcin-ox,0%), var(--zcin-oy,0%)); text-align: center; }
.zcin-pos-top    { top: 7%;  left: 50%; transform: translateX(-50%) translate(var(--zcin-ox,0%), var(--zcin-oy,0%));      text-align: center; }
.zcin-pos-bottom { bottom: 9%; left: 50%; transform: translateX(-50%) translate(var(--zcin-ox,0%), var(--zcin-oy,0%));    text-align: center; }
.zcin-pos-tl     { top: 6%;    left: 6%;  text-align: left;  transform: translate(var(--zcin-ox,0%), var(--zcin-oy,0%)); }
.zcin-pos-tr     { top: 6%;    right: 6%; text-align: right; transform: translate(var(--zcin-ox,0%), var(--zcin-oy,0%)); }
.zcin-pos-bl     { bottom: 8%; left: 6%;  text-align: left;  transform: translate(var(--zcin-ox,0%), var(--zcin-oy,0%)); }
.zcin-pos-br     { bottom: 8%; right: 6%; text-align: right; transform: translate(var(--zcin-ox,0%), var(--zcin-oy,0%)); }
/* mid-left / mid-right / top-center / bottom-center aliases used by anchors */
.zcin-pos-tc     { top: 6%;    left: 50%; transform: translateX(-50%) translate(var(--zcin-ox,0%), var(--zcin-oy,0%)); text-align: center; }
.zcin-pos-bc     { bottom: 8%; left: 50%; transform: translateX(-50%) translate(var(--zcin-ox,0%), var(--zcin-oy,0%)); text-align: center; }
.zcin-pos-ml     { top: 50%;   left: 6%;  transform: translateY(-50%) translate(var(--zcin-ox,0%), var(--zcin-oy,0%)); text-align: left; }
.zcin-pos-mr     { top: 50%;   right: 6%; transform: translateY(-50%) translate(var(--zcin-ox,0%), var(--zcin-oy,0%)); text-align: right; }

/* Enter animations. */
.zcin-block[data-anim="fade"]      .zcin-block__inner { transform: none; }
.zcin-block[data-anim="fade-up"]   .zcin-block__inner { transform: translateY(28px); }
.zcin-block[data-anim="fade-down"] .zcin-block__inner { transform: translateY(-28px); }
.zcin-block[data-anim="scale"]     .zcin-block__inner { transform: scale(0.9); }
.zcin-block[data-anim="punch"]     .zcin-block__inner { transform: translateY(40px) scale(1.12); transition-duration: 0.34s; }
/* Clip reveals — text wipes in from a hidden clip. */
.zcin-block[data-anim="clip-up"]   .zcin-block__inner { clip-path: inset(0 0 100% 0); transform: none; }
.zcin-block[data-anim="clip-up"].is-active .zcin-block__inner { clip-path: inset(0 0 -25% 0); }
.zcin-block[data-anim="clip-r"]    .zcin-block__inner { clip-path: inset(0 100% 0 0); transform: none; }
.zcin-block[data-anim="clip-r"].is-active .zcin-block__inner { clip-path: inset(0 0 0 0); }
/* Rule line draw. */
.zcin-block[data-anim="rule"]      .zcin-block__inner { transform: none; }
.zcin-block[data-anim="rule-l"]    .zcin-block__inner { transform: none; }

/* ─── Text elements ─── */
.zcin-b-kicker { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: 0.28em; color: #fff; opacity: 0.85; }
.zcin-b-kicker--upper { text-transform: uppercase; }

.zcin-head { margin: 0; color: #fff; line-height: 1.04; letter-spacing: -0.02em; text-shadow: 0 2px 40px rgba(0,0,0,0.35); }
.zcin-head--xl { font-size: clamp(40px, 7vw, 92px); font-weight: 700; }
.zcin-head--lg { font-size: clamp(32px, 5vw, 60px); font-weight: 600; }
.zcin-head--bar {
    display: inline-block; background: #fff; color: #0A0B0F;
    padding: 0.08em 0.32em; font-size: clamp(30px, 5vw, 56px);
    font-weight: 700; letter-spacing: -0.03em; text-shadow: none; line-height: 1.1;
}
.zcin-sub { margin: 0; color: rgba(255,255,255,0.82); font-size: clamp(16px, 2vw, 22px); font-weight: 400; letter-spacing: 0.01em; }

.zcin-word { display: inline-block; font-size: clamp(48px, 11vw, 128px); font-weight: 800; letter-spacing: -0.045em; color: #fff; line-height: 1; text-shadow: 0 4px 30px rgba(0,0,0,0.5); }
.zcin-word--accent .zcin-word { color: var(--lime, #B4ED5F); }

.zcin-badge { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: #0A0B0F; background: var(--lime, #B4ED5F); padding: 6px 14px; border-radius: 999px; }

/* Big ghost index number (editorial). */
.zcin-index { font-size: clamp(60px, 12vw, 180px); font-weight: 800; line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,0.4); letter-spacing: -0.04em; }

/* Vertical side label (editorial). */
.zcin-b-vlabel { top: 50%; right: 3%; transform: translateY(-50%); }
.zcin-vlabel { display: inline-block; writing-mode: vertical-rl; font-size: 13px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.6); }

/* ─── Geometric: rule lines ─── */
.zcin-rule { display: block; width: 80px; height: 2px; background: rgba(255,255,255,0.8); transform-origin: center; }
.zcin-flow--center .zcin-rule { margin: 0 auto; }
.zcin-rule--short { width: 48px; transform-origin: left; }
.zcin-block[data-anim="rule"] .zcin-rule { transform: scaleX(0); transition: transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.zcin-block[data-anim="rule"].is-active .zcin-rule { transform: scaleX(1); }
.zcin-block[data-anim="rule-l"] .zcin-rule { transform: scaleX(0); transform-origin: left; transition: transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.zcin-block[data-anim="rule-l"].is-active .zcin-rule { transform: scaleX(1); }

/* ─── Geometric: corner frame (cinematic) ─── */
.zcin-frame { position: absolute; inset: 5%; z-index: 2; opacity: 0; transition: opacity 0.8s ease; }
.zcin-frame.is-active { opacity: 1; }
.zcin-frame__c { position: absolute; width: 40px; height: 40px; border: 2px solid rgba(255,255,255,0.5); }
.zcin-frame__c--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.zcin-frame__c--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.zcin-frame__c--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.zcin-frame__c--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ─── Geometric: grid overlay (kinetic) ─── */
.zcin-grid {
    position: absolute; inset: 0; z-index: 1; opacity: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 60px 60px;
    transition: opacity 0.8s ease;
}
.zcin-grid.is-active { opacity: 1; }

/* ─── Geometric: rotating accent square (kinetic) ─── */
.zcin-shape { position: absolute; z-index: 1; opacity: 0; transition: opacity 0.6s ease; }
.zcin-shape.is-active { opacity: 1; }
.zcin-shape--square {
    top: 18%; right: 12%; width: 120px; height: 120px;
    border: 2px solid var(--lime, #B4ED5F);
    animation: zcin-spin 14s linear infinite;
}
@keyframes zcin-spin { to { transform: rotate(360deg); } }

/* ─── Buttons ─── */
.zcin-btn { display: inline-flex; align-items: center; gap: 0.5em; font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; padding: 0.85em 1.7em; border-radius: 999px; text-decoration: none; cursor: pointer; pointer-events: auto; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.zcin-btn:hover { transform: translateY(-2px); }
.zcin-arrow { transition: transform 0.2s ease; }
.zcin-btn:hover .zcin-arrow { transform: translateX(4px); }
.zcin-btn--filled.zcin-btn--lime { background: var(--lime, #B4ED5F); color: #0A0B0F; }
.zcin-btn--filled.zcin-btn--lime:hover { background: #C6F57A; }
.zcin-btn--outline.zcin-btn--light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.6); }
.zcin-btn--outline.zcin-btn--light:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.zcin-btn--ghost.zcin-btn--light { background: transparent; color: #fff; border: none; padding: 0.3em 0; border-radius: 0; border-bottom: 2px solid rgba(255,255,255,0.5); }
.zcin-btn--ghost.zcin-btn--light:hover { border-bottom-color: #fff; transform: none; }

/* Preset easing overrides. */
.zcin-stage--cinematic .zcin-block__inner { transition-duration: 0.9s; }

/* ═══════════ End sequences ═══════════ */
.zcin-endwipe { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.zcin-endwipe--fade { background: #0A0B0F; opacity: 0; transition: opacity 1.1s ease; }
.zcin-endwipe--fade.is-active { opacity: 1; }
.zcin-endwipe--lime-up { background: var(--lime, #B4ED5F); transform: translateY(100%); transition: transform 0.9s cubic-bezier(0.7,0,0.3,1); }
.zcin-endwipe--lime-up.is-active { transform: translateY(0); }

.zcin-endcards { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; height: 45%; display: flex; gap: 2%; padding: 0 4%; pointer-events: none; }
.zcin-endcard { flex: 1; background: linear-gradient(180deg, #1a1a1a, #0A0B0F); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px 12px 0 0; transform: translateY(100%); transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.zcin-endcards.is-active .zcin-endcard--1 { transform: translateY(20%); transition-delay: 0s; }
.zcin-endcards.is-active .zcin-endcard--2 { transform: translateY(8%);  transition-delay: 0.08s; }
.zcin-endcards.is-active .zcin-endcard--3 { transform: translateY(20%); transition-delay: 0.16s; }

@media (max-width: 600px) {
    .zcin-block { padding: 14px; }
    .zcin-flow--center { width: 94vw; }
    .zcin-flow--bl { max-width: 90vw; }
    .zcin-endcards { height: 30%; }
    .zcin-shape--square { width: 70px; height: 70px; }
    .zcin-index { font-size: 80px; }
}

/* ─────── Preset looks ─────── */

/* Cinematic: airy, tight-tracked, generous line-height, subtle text shadow
   for legibility over bright footage. */
.zcin-preset--cinematic .zcin-overlay__inner {
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
    transition: opacity 0.9s ease, transform 0.9s ease;  /* slower, film-like */
}

/* Editorial: uppercase kickers, wide tracking on small text, tight big text. */
.zcin-preset--editorial .zcin-overlay--top-left .zcin-overlay__inner,
.zcin-preset--editorial .zcin-overlay--top-right .zcin-overlay__inner,
.zcin-preset--editorial .zcin-overlay--bottom-right .zcin-overlay__inner {
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.zcin-preset--editorial .zcin-overlay--bottom-left .zcin-overlay__inner {
    letter-spacing: -0.03em;
    line-height: 0.95;
}

/* Kinetic: heavy, ultra-tight tracking, snappy fast transitions. */
.zcin-preset--kinetic .zcin-overlay__inner {
    letter-spacing: -0.04em;
    line-height: 1;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
    transition: opacity 0.28s cubic-bezier(0.2, 0.9, 0.3, 1),
                transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);  /* punchy */
}
/* Bigger enter-offset for kinetic's fade-up so words "pop" up more. */
.zcin-preset--kinetic .zcin-overlay[data-anim="fade-up"] .zcin-overlay__inner {
    transform: translateY(48px);
}

/* Empty-state placeholder for the Elementor editor when no video is set. */
.zcin-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: rgba(255, 255, 255, 0.85);
    background:
        radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--lime,#B4ED5F) 6%, transparent), transparent 60%),
        linear-gradient(180deg, #14171E 0%, #0A0B0F 100%);
    text-align: center;
    box-sizing: border-box;
    /* Sizing when the parent (sticky) doesn't have a height forced by video —
       fill whatever's there, minimum ~300px so it doesn't collapse in editor. */
    min-height: 300px;
}
.zcin-placeholder__title {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #ffffff 0%, var(--lime,#B4ED5F) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.zcin-placeholder__hint {
    font-size: 14px;
    max-width: 420px;
    line-height: 1.5;
    opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════
   CUSTOM ELEMENT EDITOR — positions + element-type styling.
   Elements are absolute-positioned .zcin-block instances that
   plug into the same timed-block infrastructure as overlay presets.
   ═══════════════════════════════════════════════════════════════ */

.zcin-stage--custom { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* Position anchors — 9-grid + custom. Existing ones (tl/tr/bl/br/center)
   are already defined; here we add the missing edge-centers. */
.zcin-pos-tc { position: absolute; top: 6%;    left: 50%; transform: translateX(-50%); text-align: center; }
.zcin-pos-ml { position: absolute; top: 50%;   left: 6%;  transform: translateY(-50%); text-align: left; }
.zcin-pos-mr { position: absolute; top: 50%;   right: 6%; transform: translateY(-50%); text-align: right; }
.zcin-pos-bc { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); text-align: center; }

/* Custom position via CSS vars — user drives x/y with sliders. */
.zcin-pos-custom {
    position: absolute;
    left: var(--zcin-x, 50%);
    top:  var(--zcin-y, 50%);
    transform: translate(-50%, -50%) translate(var(--zcin-ox,0%), var(--zcin-oy,0%));
    text-align: center;
}

/* Element type wrappers — most styling comes from inline style attrs
   set by PHP (color, font-size, weight, etc). These add layout defaults. */
/* Element base + type variants. Line-height and padding here avoid the
   descender-clipping issue on tight typographic layouts (g, y, p, j were
   getting cut off). Users can override line-height per element via the
   repeater's "Line height" control. */
.zcin-el { display: inline-block; margin: 0; padding: 0 0 0.15em; box-sizing: content-box; overflow: visible; }
.zcin-el--headline { line-height: 1.08; letter-spacing: -0.02em; }
.zcin-el--text     { line-height: 1.35; }

/* Clip-reveal animations set overflow:hidden on the inner. Make sure the
   inner has room for descenders — a small bottom padding prevents crop. */
.zcin-block[data-anim="clip-up"] .zcin-block__inner,
.zcin-block[data-anim="clip-r"]  .zcin-block__inner { padding-bottom: 0.15em; }
.zcin-el--button   { pointer-events: auto; }
.zcin-el--shape    { display: inline-block; }
.zcin-el--image    { max-width: 90vw; }

/* Buttons inherit the existing .zcin-btn styling (from ported scrub CSS)
   but text/style colors come from inline style. */
.zcin-btn { display: inline-flex; align-items: center; gap: 0.5em; font-weight: 700; padding: 0.85em 1.7em; border-radius: 999px; text-decoration: none; cursor: pointer; transition: transform 0.2s ease; -webkit-tap-highlight-color: transparent; }
.zcin-btn:hover { transform: translateY(-2px); }
.zcin-btn--outline { background: transparent; border: 1.5px solid; }
.zcin-btn--ghost   { background: transparent; border: none; padding: 0.3em 0; border-radius: 0; border-bottom: 2px solid; }
.zcin-btn--ghost:hover { transform: none; }


/* ═══════════════════════════════════════════════════════════════
   CARD-MODE — how the card behaves during scroll.
   Modes: immerse (default, scale to fullscreen), fullscreen (backdrop),
   sidekick (stays on the left, small).
   ═══════════════════════════════════════════════════════════════ */

.zcin-inner--unified { position: absolute; inset: 0; z-index: 1; display: block; }

/* Fullscreen mode: card fills the sticky as a static backdrop. */
.zcin-cardmode--fullscreen .zcin-ov-card {
    position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.zcin-cardmode--fullscreen .zcin-card {
    width: 100vw; height: 100vh;
    max-width: none; max-height: none;
    aspect-ratio: auto;
    border-radius: 0; box-shadow: none; outline: none;
    transform: none !important;
}
.zcin-cardmode--fullscreen .zcin-card::after { display: none; }

/* Immerse mode: card is placed by CSS at 100vw, JS animates transform:scale. */
.zcin-cardmode--immerse .zcin-ov-card {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 0;
}

/* Sidekick mode: card sits on the left, smaller. */
.zcin-cardmode--sidekick .zcin-sk-card {
    position: absolute; top: 50%; left: 27vw; transform: translate(-50%, -50%);
    display: block; will-change: transform; z-index: 0;
}
.zcin-cardmode--sidekick .zcin-card {
    width: 42vw; max-width: 42vw; max-height: none;
    aspect-ratio: var(--zcin-aspect, 1.7778);
}
@media (max-width: 800px) {
    .zcin-cardmode--sidekick .zcin-sk-card { left: 50vw; top: 35%; }
    .zcin-cardmode--sidekick .zcin-card    { width: 88vw; max-width: 88vw; }
}

/* Elements stage sits above card, holds all timed content. */
.zcin-stage--elements { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   STRUCTURE EFFECTS — universal toggles, additively applied
   independent of preset choice.
   ═══════════════════════════════════════════════════════════════ */

/* Frame brackets (corners). */
.zcin-frame { position: absolute; inset: 5%; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; }
.zcin-frame.is-active { opacity: 1; }
.zcin-frame__c { position: absolute; width: 40px; height: 40px; border: 2px solid rgba(255,255,255,0.5); }
.zcin-frame__c--tl { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.zcin-frame__c--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.zcin-frame__c--bl { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.zcin-frame__c--br { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Grid overlay (subtle graph paper). */
.zcin-grid {
    position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
    background-size: 60px 60px;
    transition: opacity 0.8s ease;
}
.zcin-grid.is-active { opacity: 1; }

/* Rotating accent shape (top-right). */
.zcin-shape { position: absolute; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; }
.zcin-shape.is-active { opacity: 1; }
.zcin-shape--square {
    top: 18%; right: 12%; width: 120px; height: 120px;
    border: 2px solid var(--zcin-accent-struct, var(--lime,#B4ED5F));
    animation: zcin-spin 14s linear infinite;
}
@keyframes zcin-spin { to { transform: rotate(360deg); } }

/* Diagonal split panel (over card). */
.zcin-diag { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
    /* Style variables — overridden by widget controls. */
    --zcin-diag-pos: 45%;            /* where the diagonal crosses */
    --zcin-diag-angle: 20;           /* tilt in deg (unitless for calc) */
    --zcin-diag-c1: rgba(10,11,15,0.85);
    --zcin-diag-c2: rgba(20,23,30,0.75);
    --zcin-diag-grad-angle: 135deg;
    --zcin-diag-edge-color: var(--lime,#B4ED5F);
    --zcin-diag-edge-w: 3px;
}
.zcin-diag.is-active { opacity: 1; }
.zcin-diag__panel {
    position: absolute; inset: 0;
    background: linear-gradient(var(--zcin-diag-grad-angle), var(--zcin-diag-c1) 0%, var(--zcin-diag-c2) 100%);
    /* Diagonal cut: top edge at --zcin-diag-pos, bottom edge offset by the
       angle so the cut slants. Left-side panel by default. */
    clip-path: polygon(
        0 0,
        var(--zcin-diag-pos) 0,
        calc(var(--zcin-diag-pos) - var(--zcin-diag-angle) * 1%) 100%,
        0 100%);
    transition: transform 0.6s cubic-bezier(0.7,0,0.3,1);
}
.zcin-diag.is-active .zcin-diag__panel { transform: translateY(0); }
.zcin-diag__edge {
    position: absolute;
    top: -20vh; left: -20vw; right: -20vw; bottom: -20vh;
    /* Contour line along the same diagonal. Width from --zcin-diag-edge-w
       expressed as a thin band around the 50% gradient stop. */
    background: linear-gradient(calc(90deg + var(--zcin-diag-angle) * 1deg),
        transparent calc(50% - var(--zcin-diag-edge-w) / 2),
        var(--zcin-diag-edge-color) calc(50% - var(--zcin-diag-edge-w) / 2),
        var(--zcin-diag-edge-color) calc(50% + var(--zcin-diag-edge-w) / 2),
        transparent calc(50% + var(--zcin-diag-edge-w) / 2));
    opacity: 0.85;
}
/* Right-side variant: mirror the clip + edge horizontally. */
.zcin-diag--right .zcin-diag__panel {
    clip-path: polygon(
        100% 0,
        calc(100% - var(--zcin-diag-pos)) 0,
        calc(100% - var(--zcin-diag-pos) + var(--zcin-diag-angle) * 1%) 100%,
        100% 100%);
}
.zcin-diag--right .zcin-diag__edge { transform: scaleX(-1); }

/* 3×3 Grid Tiles (card sits in center cell). */
.zcin-tiles { position: absolute; inset: 0; z-index: 3; pointer-events: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; }
.zcin-tiles__cell { background: linear-gradient(180deg, #14171E, #0A0B0F); border: 1px solid rgba(255,255,255,0.06); will-change: transform, opacity; }
.zcin-tiles__cell--tl { grid-column: 1; grid-row: 1; }
.zcin-tiles__cell--tc { grid-column: 2; grid-row: 1; }
.zcin-tiles__cell--tr { grid-column: 3; grid-row: 1; }
.zcin-tiles__cell--ml { grid-column: 1; grid-row: 2; }
.zcin-tiles__cell--mr { grid-column: 3; grid-row: 2; }
.zcin-tiles__cell--bl { grid-column: 1; grid-row: 3; }
.zcin-tiles__cell--bc { grid-column: 2; grid-row: 3; }
.zcin-tiles__cell--br { grid-column: 3; grid-row: 3; }

/* Grid-Tiles mode overrides card sizing to fill middle cell. */
.zcin-wrap:has(.zcin-tiles) .zcin-ov-card {
    top: 33.33%; left: 33.33%; width: 33.33%; height: 33.33%;
    transform: none;
}
.zcin-wrap:has(.zcin-tiles) .zcin-card {
    width: 100%; height: 100%; aspect-ratio: unset;
    max-width: 100%; max-height: 100%; border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════
   END TRANSITIONS — timed via .is-active class.
   ═══════════════════════════════════════════════════════════════ */

.zcin-endtrans { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.zcin-endtrans--fade-bg      { background: #0A0B0F; opacity: 0; transition: opacity 1.1s ease; }
.zcin-endtrans--fade-bg.is-active { opacity: 1; }

.zcin-endtrans--lime-wipe-up { background: var(--zcin-accent-struct, var(--lime,#B4ED5F)); transform: translateY(100%); transition: transform 0.9s cubic-bezier(0.7,0,0.3,1); }
.zcin-endtrans--lime-wipe-up.is-active { transform: translateY(0); }

.zcin-endtrans--sliding-cards { top: auto; left: 0; right: 0; bottom: 0; height: 45%; display: flex; gap: 2%; padding: 0 4%; }
.zcin-endtrans--sliding-cards .zcin-endcard { flex: 1; background: linear-gradient(180deg, #1a1a1a, #0A0B0F); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px 12px 0 0; transform: translateY(100%); transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.zcin-endtrans--sliding-cards.is-active .zcin-endcard--1 { transform: translateY(20%); }
.zcin-endtrans--sliding-cards.is-active .zcin-endcard--2 { transform: translateY(8%);  transition-delay: 0.08s; }
.zcin-endtrans--sliding-cards.is-active .zcin-endcard--3 { transform: translateY(20%); transition-delay: 0.16s; }


/* ═══════════════════════════════════════════════════════════════
   TEXT/HEADLINE DESCENDER FIX
   Line-height 0.98 was cropping descenders (p, g, j). Raise to 1.15
   and add a small padding-bottom to accommodate descenders that
   dip below the line-box.
   ═══════════════════════════════════════════════════════════════ */
.zcin-el--headline,
.zcin-el--text {
    line-height: 1.15 !important;
    padding-bottom: 0.12em;
    overflow: visible;
}
.zcin-block,
.zcin-block__inner {
    overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════
   SIDEKICK — side (left/right) + expand option.
   ═══════════════════════════════════════════════════════════════ */
.zcin-sk-side--right .zcin-sk-card { left: 73vw; }
@media (max-width: 800px) {
    .zcin-sk-side--right .zcin-sk-card { left: 50vw; }
}
/* When sidekick_expand is on, card gets promoted to fullscreen at the
   end via JS class .is-sk-expanded on the sticky. */
.zcin-sk-card { transition: left 0.6s cubic-bezier(0.7,0,0.3,1); }
.zcin-sticky.is-sk-expanded .zcin-sk-card {
    left: 50vw !important;
    width: 100vw;
}
.zcin-sticky.is-sk-expanded .zcin-card {
    width: 100vw !important; max-width: 100vw !important;
    aspect-ratio: var(--zcin-aspect, 1.7778);
    border-radius: 0; box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════
   END TRANSITIONS — extended palette, all use --zcin-end-color.
   ═══════════════════════════════════════════════════════════════ */
.zcin-endtrans { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }

/* Fade */
.zcin-endtrans--fade-bg { background: var(--zcin-end-color, #0A0B0F); opacity: 0; transition: opacity 1.1s ease; }
.zcin-endtrans--fade-bg.is-active { opacity: 1; }

/* Wipes — 4 directions, all use --zcin-end-color. */
.zcin-endtrans--wipe-up,
.zcin-endtrans--wipe-down,
.zcin-endtrans--wipe-left,
.zcin-endtrans--wipe-right {
    background: var(--zcin-end-color, var(--lime,#B4ED5F));
    transition: transform 0.9s cubic-bezier(0.7,0,0.3,1);
}
.zcin-endtrans--wipe-up    { transform: translateY(100%); }
.zcin-endtrans--wipe-down  { transform: translateY(-100%); }
.zcin-endtrans--wipe-left  { transform: translateX(100%); }
.zcin-endtrans--wipe-right { transform: translateX(-100%); }
.zcin-endtrans--wipe-up.is-active,
.zcin-endtrans--wipe-down.is-active,
.zcin-endtrans--wipe-left.is-active,
.zcin-endtrans--wipe-right.is-active { transform: translate(0, 0); }

/* Iris — radial expanding circle (color panel underneath). */
.zcin-endtrans--iris-out {
    background: var(--zcin-end-color, #0A0B0F);
    clip-path: circle(0% at 50% 50%);
    transition: clip-path 1s cubic-bezier(0.7,0,0.3,1);
}
.zcin-endtrans--iris-out.is-active { clip-path: circle(150% at 50% 50%); }

/* Zoom out — the whole widget shrinks/fades to reveal underlying page. */
.zcin-endtrans--zoom-out {
    background: var(--zcin-end-color, #0A0B0F);
    opacity: 0;
    transition: opacity 0.9s ease;
}
.zcin-endtrans--zoom-out.is-active { opacity: 1; }
.zcin-endtrans--zoom-out.is-active ~ * { transform: scale(0.92); transition: transform 0.9s ease; }

/* ═══════════════════════════════════════════════════════════════
   SLIDING CARDS — with image + title + text content.
   ═══════════════════════════════════════════════════════════════ */
.zcin-endtrans--sliding-cards {
    top: auto; left: 0; right: 0; bottom: 0;
    height: 50%; display: flex; gap: 2%; padding: 0 4%; overflow: visible;
}
.zcin-endcard {
    flex: 1; position: relative;
    background: linear-gradient(180deg, #1a1a1a, #0A0B0F);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px 14px 0 0;
    overflow: hidden;
    transform: translateY(105%);
    transition: transform 0.85s cubic-bezier(0.22,1,0.36,1);
    color: #fff;
    text-decoration: none;
    display: block;
}
.zcin-endtrans--sliding-cards.is-active .zcin-endcard--1 { transform: translateY(15%); }
.zcin-endtrans--sliding-cards.is-active .zcin-endcard--2 { transform: translateY(5%);  transition-delay: 0.08s; }
.zcin-endtrans--sliding-cards.is-active .zcin-endcard--3 { transform: translateY(15%); transition-delay: 0.16s; }
.zcin-endcard__bg {
    position: absolute; inset: 0; z-index: 0; opacity: 0.55;
    transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
a.zcin-endcard:hover .zcin-endcard__bg { opacity: 0.9; transform: scale(1.04); }
.zcin-endcard__content {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 24px 22px;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85));
    pointer-events: none;
}
.zcin-endcard__title { margin: 0 0 6px; font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; letter-spacing: -0.01em; color: #fff; line-height: 1.15; }
.zcin-endcard__text  { margin: 0; font-size: clamp(13px, 1vw, 15px); color: rgba(255,255,255,0.75); line-height: 1.4; }
a.zcin-endcard { pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════
   GRID FRAGMENT — cell-fill anchor positions.
   Elements with grid-tl/tc/tr/ml/mr/bl/bc/br anchors fill their
   full 1/3 × 1/3 cell (Image with object-fit:cover; Text centered).
   ═══════════════════════════════════════════════════════════════ */
.zcin-pos-grid-tl, .zcin-pos-grid-tc, .zcin-pos-grid-tr,
.zcin-pos-grid-ml, .zcin-pos-grid-mr,
.zcin-pos-grid-bl, .zcin-pos-grid-bc, .zcin-pos-grid-br {
    position: absolute;
    width: 33.333vw; height: 33.333vh;
    display: flex; align-items: center; justify-content: center;
    padding: 0; overflow: hidden;
}
.zcin-pos-grid-tl { top: 0;      left: 0; }
.zcin-pos-grid-tc { top: 0;      left: 33.333vw; }
.zcin-pos-grid-tr { top: 0;      right: 0; }
.zcin-pos-grid-ml { top: 33.333vh; left: 0; }
.zcin-pos-grid-mr { top: 33.333vh; right: 0; }
.zcin-pos-grid-bl { bottom: 0;   left: 0; }
.zcin-pos-grid-bc { bottom: 0;   left: 33.333vw; }
.zcin-pos-grid-br { bottom: 0;   right: 0; }

/* Grid-cell elements: image fills the cell with cover; text is large + centered. */
.zcin-pos-grid-tl .zcin-el--image, .zcin-pos-grid-tc .zcin-el--image, .zcin-pos-grid-tr .zcin-el--image,
.zcin-pos-grid-ml .zcin-el--image, .zcin-pos-grid-mr .zcin-el--image,
.zcin-pos-grid-bl .zcin-el--image, .zcin-pos-grid-bc .zcin-el--image, .zcin-pos-grid-br .zcin-el--image {
    width: 100% !important; height: 100% !important; object-fit: cover; display: block;
}
[class*="zcin-pos-grid-"] .zcin-block__inner { display: block; width: 100%; height: 100%; }


/* ═══════════════════════════════════════════════════════════════
   SLIDE PROGRESS INDICATOR — style variants.
   Container: .zcin-progress (position + orientation classes).
   Bar-family: .__fill child grows via width/height.
   Unit-family: .__unit children fill sequentially via .is-active.
   Percentage: .__pct child updated by JS text content.
   All tunable: --zcin-prog-fill/track/thick/offset/radius/glow.
   ═══════════════════════════════════════════════════════════════ */

.zcin-progress {
    position: absolute; z-index: 6; pointer-events: none;
    display: flex; align-items: center; justify-content: flex-start;
}
.zcin-progress__fill {
    background: var(--zcin-prog-fill, var(--lime,#B4ED5F));
    transition: width 0.08s linear, height 0.08s linear;
    box-shadow: 0 0 var(--zcin-prog-glow, 0) var(--zcin-prog-fill, var(--lime,#B4ED5F));
}

/* ── Position + orientation ── */
.zcin-progress--top,
.zcin-progress--bottom {
    left: var(--zcin-prog-offset, 0px);
    right: var(--zcin-prog-offset, 0px);
    height: var(--zcin-prog-thick, 3px);
    flex-direction: row;
}
.zcin-progress--top    { top: var(--zcin-prog-offset, 0px); }
.zcin-progress--bottom { bottom: var(--zcin-prog-offset, 0px); }
.zcin-progress--left,
.zcin-progress--right {
    top: var(--zcin-prog-offset, 0px);
    bottom: var(--zcin-prog-offset, 0px);
    width: var(--zcin-prog-thick, 3px);
    flex-direction: column;
}
.zcin-progress--left   { left: var(--zcin-prog-offset, 0px); }
.zcin-progress--right  { right: var(--zcin-prog-offset, 0px); }

/* Fill sizing for bar-style variants — orientation-aware. */
.zcin-progress--top    .zcin-progress__fill,
.zcin-progress--bottom .zcin-progress__fill { height: 100%; width: 0; }
.zcin-progress--left   .zcin-progress__fill,
.zcin-progress--right  .zcin-progress__fill { width: 100%; height: 0; }

/* ── Style: bar (default) ── */
.zcin-progress--style-bar { background: var(--zcin-prog-track, rgba(255,255,255,0.15)); border-radius: var(--zcin-prog-radius, 0); }
.zcin-progress--style-bar .zcin-progress__fill { border-radius: inherit; }

/* ── Style: pill ── */
.zcin-progress--style-pill { background: var(--zcin-prog-track, rgba(255,255,255,0.15)); border-radius: 999px; }
.zcin-progress--style-pill.zcin-progress--top,
.zcin-progress--style-pill.zcin-progress--bottom { left: max(var(--zcin-prog-offset, 0px), 16px); right: max(var(--zcin-prog-offset, 0px), 16px); }
.zcin-progress--style-pill.zcin-progress--left,
.zcin-progress--style-pill.zcin-progress--right  { top: max(var(--zcin-prog-offset, 0px), 16px); bottom: max(var(--zcin-prog-offset, 0px), 16px); }
.zcin-progress--style-pill .zcin-progress__fill { border-radius: 999px; }

/* ── Style: line (1px minimal, no track) ── */
.zcin-progress--style-line { background: transparent; }
.zcin-progress--style-line.zcin-progress--top,
.zcin-progress--style-line.zcin-progress--bottom { height: 1px !important; }
.zcin-progress--style-line.zcin-progress--left,
.zcin-progress--style-line.zcin-progress--right  { width: 1px !important; }
.zcin-progress--style-line .zcin-progress__fill { background: var(--zcin-prog-fill, var(--lime,#B4ED5F)); }

/* ── Style: dots / segments / stepped (unit-based) ── */
.zcin-progress--style-dots,
.zcin-progress--style-segments,
.zcin-progress--style-stepped {
    background: transparent;
    gap: 6px;
    align-items: stretch; justify-content: stretch;
}
.zcin-progress--style-dots.zcin-progress--top,
.zcin-progress--style-dots.zcin-progress--bottom,
.zcin-progress--style-segments.zcin-progress--top,
.zcin-progress--style-segments.zcin-progress--bottom,
.zcin-progress--style-stepped.zcin-progress--top,
.zcin-progress--style-stepped.zcin-progress--bottom {
    height: max(var(--zcin-prog-thick, 3px), 8px);
    left: max(var(--zcin-prog-offset, 0px), 16px);
    right: max(var(--zcin-prog-offset, 0px), 16px);
    padding: 0;
}
.zcin-progress--style-dots.zcin-progress--left,
.zcin-progress--style-dots.zcin-progress--right,
.zcin-progress--style-segments.zcin-progress--left,
.zcin-progress--style-segments.zcin-progress--right,
.zcin-progress--style-stepped.zcin-progress--left,
.zcin-progress--style-stepped.zcin-progress--right {
    width: max(var(--zcin-prog-thick, 3px), 8px);
    top: max(var(--zcin-prog-offset, 0px), 16px);
    bottom: max(var(--zcin-prog-offset, 0px), 16px);
}
.zcin-progress__unit {
    flex: 1;
    background: var(--zcin-prog-track, rgba(255,255,255,0.15));
    position: relative; overflow: hidden;
    transition: background-color 0.15s ease;
}
.zcin-progress__unit::after {
    content: '';
    position: absolute; inset: 0;
    background: var(--zcin-prog-fill, var(--lime,#B4ED5F));
    transform-origin: 0 0;
    transform: scaleX(var(--zcin-prog-u, 0));
    transition: transform 0.08s linear;
    box-shadow: 0 0 var(--zcin-prog-glow, 0) var(--zcin-prog-fill, var(--lime,#B4ED5F));
}
.zcin-progress--left .zcin-progress__unit::after,
.zcin-progress--right .zcin-progress__unit::after {
    transform-origin: 0 100%;
    transform: scaleY(var(--zcin-prog-u, 0));
}
/* Dots: force pill-shaped units. */
.zcin-progress--style-dots .zcin-progress__unit { border-radius: 999px; }
.zcin-progress--style-dots.zcin-progress--top .zcin-progress__unit,
.zcin-progress--style-dots.zcin-progress--bottom .zcin-progress__unit { flex: 0 0 max(var(--zcin-prog-thick, 3px), 10px); }
.zcin-progress--style-dots.zcin-progress--left .zcin-progress__unit,
.zcin-progress--style-dots.zcin-progress--right .zcin-progress__unit { flex: 0 0 max(var(--zcin-prog-thick, 3px), 10px); }
/* Segments: rectangular, with radius. */
.zcin-progress--style-segments .zcin-progress__unit { border-radius: var(--zcin-prog-radius, 2px); }
/* Stepped: bigger blocks, wider gap. */
.zcin-progress--style-stepped { gap: 12px; }
.zcin-progress--style-stepped .zcin-progress__unit { border-radius: var(--zcin-prog-radius, 4px); }

/* ── Percentage text ── */
.zcin-progress__pct {
    position: absolute; padding: 4px 10px;
    background: rgba(0,0,0,0.6); color: var(--zcin-prog-fill, var(--lime,#B4ED5F));
    font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
    border-radius: 4px; font-family: var(--f-mono,'JetBrains Mono', ui-monospace, monospace);
    white-space: nowrap;
}
.zcin-progress--top    .zcin-progress__pct { top: 12px;    right: 12px; }
.zcin-progress--bottom .zcin-progress__pct { bottom: 12px; right: 12px; }
.zcin-progress--left   .zcin-progress__pct { top: 12px;    left: 16px; }
.zcin-progress--right  .zcin-progress__pct { top: 12px;    right: 16px; }
.zcin-progress__pct-value { font-weight: 700; }

@media (max-width: 900px) {
    .zcin-progress__pct { font-size: 10px; padding: 3px 7px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — full layout re-flow.
   On small screens, absolute-positioned elements would overlap or
   drift off-viewport. We convert the entire elements stage into a
   centered flex-column: only *active* elements are laid out (via
   display:none for inactive ones), so timing still drives what the
   user sees but positions no longer collide. Text sizes scale down
   with clamp() to fit tiny viewports.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Text elements — hard cap sizes so nothing overflows viewport. */
    .zcin-el--headline { font-size: clamp(28px, 8vw, 60px) !important; letter-spacing: -0.02em !important; padding-bottom: 0.15em !important; line-height: 1.15 !important; }
    .zcin-el--text     { font-size: clamp(11px, 3vw, 15px) !important; line-height: 1.4 !important; }
    .zcin-el--button   { font-size: clamp(13px, 3.2vw, 15px) !important; padding: 0.7em 1.3em !important; }
    .zcin-el--shape    { max-width: 40vw; max-height: 40vw; }
    .zcin-el--image    { max-width: 90vw; height: auto !important; }

    /* Structure toggles — shrink corners + tighter grid + smaller shape. */
    .zcin-frame       { inset: 3%; }
    .zcin-frame__c    { width: 22px; height: 22px; }
    .zcin-grid        { background-size: 32px 32px; }
    .zcin-shape--square { width: 60px; height: 60px; top: 12%; right: 6%; }

    /* Stage becomes a centered vertical stack for all elements. */
    .zcin-stage--elements {
        display: flex; flex-direction: column;
        justify-content: center; align-items: center;
        padding: 8vh 5vw; gap: 1.5vh;
        pointer-events: none;
    }
    /* Every anchor except grid-cells becomes static + centered.
       Grid-cell anchors stay absolute because they define a specific
       viewport region (33.333vw × 33.333vh cells). */
    .zcin-block.zcin-pos-tl, .zcin-block.zcin-pos-tc, .zcin-block.zcin-pos-tr,
    .zcin-block.zcin-pos-ml, .zcin-block.zcin-pos-center, .zcin-block.zcin-pos-mr,
    .zcin-block.zcin-pos-bl, .zcin-block.zcin-pos-bc, .zcin-block.zcin-pos-br,
    .zcin-block.zcin-pos-custom {
        position: static !important;
        left: auto !important; right: auto !important;
        top: auto !important; bottom: auto !important;
        transform: none !important;
        text-align: center !important;
        max-width: 92vw;
        width: auto;
    }
    /* Grid-cell positions on mobile — 50vw × 33vh so 6 cells fit
       (3 rows × 2 cols). Cleaner than 3-across-cramped on mobile. */
    .zcin-pos-grid-tl { top: 0;      left: 0;      width: 50vw; height: 33.333vh; }
    .zcin-pos-grid-tc { top: 0;      right: 0;     width: 50vw; height: 33.333vh; left: auto; }
    .zcin-pos-grid-tr { top: 33.333vh; left: 0;    width: 50vw; height: 33.333vh; right: auto; }
    .zcin-pos-grid-ml { top: 33.333vh; right: 0;   width: 50vw; height: 33.333vh; left: auto; }
    .zcin-pos-grid-mr { bottom: 33.333vh; left: 0; width: 50vw; height: 33.333vh; right: auto; top: auto; }
    .zcin-pos-grid-bl { bottom: 33.333vh; right: 0; width: 50vw; height: 33.333vh; left: auto; top: auto; }
    .zcin-pos-grid-bc { bottom: 0;   left: 0;      width: 50vw; height: 33.333vh; top: auto; }
    .zcin-pos-grid-br { bottom: 0;   right: 0;     width: 50vw; height: 33.333vh; top: auto; left: auto; }

    /* Hide inactive blocks entirely on mobile — otherwise their empty
       flex-item takes space and the layout has gaps. Timings still
       drive which are shown. */
    .zcin-block:not(.is-active) { display: none !important; }
    .zcin-block.is-active .zcin-block__inner {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    /* Sidekick collapses to stacked layout — card top, text below. */
    .zcin-cardmode--sidekick .zcin-sk-card {
        top: 28% !important; left: 50vw !important; width: 88vw !important;
    }
    .zcin-cardmode--sidekick .zcin-card { width: 88vw !important; max-width: 88vw !important; }
    .zcin-sk-side--right .zcin-sk-card { left: 50vw !important; }

    /* End cards resize. */
    .zcin-endtrans--sliding-cards { height: 60%; padding: 0 3%; gap: 1.5%; }
    .zcin-endcard__title { font-size: 15px !important; }
    .zcin-endcard__text  { font-size: 12px !important; }

    /* Progress bar thinner on mobile. */
    .zcin-progress--top,
    .zcin-progress--bottom { height: 2px; }
    .zcin-progress--left,
    .zcin-progress--right  { width: 2px; }

    .zcin-tiles__cell { border-width: 0.5px; }
}

@media (max-width: 500px) {
    .zcin-el--headline { font-size: clamp(24px, 9vw, 42px) !important; }
    .zcin-el--text     { font-size: clamp(11px, 3.4vw, 14px) !important; }
    .zcin-frame       { inset: 2%; }
    .zcin-frame__c    { width: 16px; height: 16px; }
    .zcin-stage--elements { padding: 6vh 4vw; gap: 1vh; }
}


/* ── Cinema solid-wipe layer: theme-aware background ──────────────
   The wipe-up-solid end transition injects a .zcin-solid-layer behind
   following sections so the pinned hero is covered. Its colour must follow
   the active theme, otherwise it stays Ink-black in Light Mode and paints a
   dark band behind light-mode content (e.g. pricing/steps sections). */
:root { --zcin-solid-bg: #0A0B0F; }
html[data-theme="light"] { --zcin-solid-bg: #F7F5F0; }