.zcz-atl {
    --zcz-atl-line-x: 50%;
    --zcz-atl-mobile-line-x: 18%;
    --zcz-atl-mobile-safe-gap: 10px;
    --zcz-atl-mobile-global-date-x: 0px;
    --zcz-atl-mobile-global-date-y: 0px;
    --zcz-atl-mobile-global-content-x: 0px;
    --zcz-atl-mobile-global-content-y: 0px;
    --zcz-atl-mobile-global-marker-x: 0px;
    --zcz-atl-mobile-global-marker-y: 0px;
    --zcz-atl-line-width: 2px;
    --zcz-atl-base-line-width: var(--zcz-atl-line-width);
    --zcz-atl-progress-line-width: var(--zcz-atl-line-width);
    --zcz-atl-line-radius: 50px;
    --zcz-atl-line-color: #7c7c7c;
    --zcz-atl-progress-color: #16a34a;
    --zcz-atl-progress-glow: rgba(22, 163, 74, .28);
    --zcz-atl-fade-top: 7%;
    --zcz-atl-fade-bottom: 7%;
    --zcz-atl-marker-size: 42px;
    --zcz-atl-marker-bg: #16a34a;
    --zcz-atl-marker-active-bg: #0f8a3a;
    --zcz-atl-marker-text: #fff;
    --zcz-atl-marker-border-color: rgba(0, 0, 0, .08);
    --zcz-atl-marker-border-width: 0px;
    --zcz-atl-effect-strength: 12px;
    --zcz-atl-item-spacing: 70px;
    --zcz-atl-row-min-height: 76px;
    --zcz-atl-date-width: 28%;
    --zcz-atl-content-width: 32%;
    --zcz-atl-side-gap: 26px;
    --zcz-atl-date-lift: 12px;
    --zcz-atl-motion-distance: 28px;
    --zcz-atl-motion-blur: 8px;
    --zcz-atl-motion-ease: cubic-bezier(.16, 1, .3, 1);
    --zcz-atl-progress-effect-speed: 2.4s;
    --zcz-atl-base-line-effect-speed: 3.2s;
    --zcz-atl-progress-head-size: 10px;
    --zcz-atl-marker-glow-color: rgba(22, 163, 74, .72);
    --zcz-atl-marker-glow-size: 20px;
    --zcz-atl-marker-glow-speed: 2.2s;
    --zcz-atl-marker-depth: 7px;
    --zcz-atl-marker-depth-color: rgba(0,0,0,.38);
    --zcz-atl-marker-highlight-color: rgba(255,255,255,.48);
    --zcz-atl-marker-inner-depth: 6px;
    --zcz-atl-marker-core-size: 72%;
    --zcz-atl-marker-inner-shadow: rgba(0,0,0,.42);
    --zcz-atl-date-hover-color: #16a34a;
    --zcz-atl-typing-hover-color: #16a34a;
    --zcz-atl-title-hover-color: #16a34a;
    --zcz-atl-description-hover-color: #16a34a;
    --zcz-atl-text-hover-duration: 280ms;
    --zcz-atl-marker-animation-strength: 5px;
    --zcz-atl-marker-animation-strength-negative: -5px;
    --zcz-atl-date-animation-strength: 5px;
    --zcz-atl-date-animation-strength-negative: -5px;
    --zcz-atl-typing-animation-strength: 5px;
    --zcz-atl-typing-animation-strength-negative: -5px;
    --zcz-atl-title-animation-strength: 5px;
    --zcz-atl-title-animation-strength-negative: -5px;
    --zcz-atl-description-animation-strength: 5px;
    --zcz-atl-description-animation-strength-negative: -5px;
    --zcz-atl-marker-animation-speed: 2.4s;
    --zcz-atl-date-animation-speed: 2.4s;
    --zcz-atl-typing-animation-speed: 2.4s;
    --zcz-atl-title-animation-speed: 2.4s;
    --zcz-atl-description-animation-speed: 2.4s;
    --zcz-atl-play-strength: 5px;
    --zcz-atl-play-strength-negative: -5px;
    --zcz-atl-play-speed: 2.4s;
    --zcz-atl-play-name: zczAtlPlayFloat;
    position: relative;
    width: 100%;
    margin-inline: auto;
    overflow: visible;
    direction: rtl;
    isolation: isolate;
}

.zcz-atl,
.zcz-atl * {
    box-sizing: border-box;
}

/* The line and every marker use the exact same horizontal variable. */
.zcz-atl-line-wrap {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--zcz-atl-line-x);
    width: max(var(--zcz-atl-line-width), var(--zcz-atl-base-line-width), var(--zcz-atl-progress-line-width), 8px);
    min-height: 100%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
}

.zcz-atl-line {
    position: absolute;
    inset-block: 0;
    left: 50%;
    display: block;
    width: var(--zcz-atl-line-width);
    border-radius: var(--zcz-atl-line-radius);
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--zcz-atl-fade-top),
        #000 calc(100% - var(--zcz-atl-fade-bottom)),
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent 0,
        #000 var(--zcz-atl-fade-top),
        #000 calc(100% - var(--zcz-atl-fade-bottom)),
        transparent 100%
    );
}

.zcz-atl-line--base {
    background: var(--zcz-atl-line-color);
    opacity: .9;
}

.zcz-atl-separate-line-widths .zcz-atl-line--base {
    width: var(--zcz-atl-base-line-width);
}

.zcz-atl-separate-line-widths .zcz-atl-line--progress {
    width: var(--zcz-atl-progress-line-width);
}

.zcz-atl-line--progress {
    background: var(--zcz-atl-progress-color);
    box-shadow: 0 0 16px var(--zcz-atl-progress-glow);
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    will-change: transform;
    backface-visibility: hidden;
}

.zcz-atl-items {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--zcz-atl-item-spacing);
    padding-block: 30px;
    overflow: visible;
}

/*
 * Desktop physical order is fixed and does not depend on RTL auto-placement:
 * date = left of line, marker = exactly on line, title/description = right of line.
 */
.zcz-atl-item {
    --zcz-atl-item-x: 0px;
    --zcz-atl-item-y: 0px;
    --zcz-atl-date-x: 0px;
    --zcz-atl-date-y: 0px;
    /* Device-aware per-item content position. Elementor responsive selectors
       override --zcz-atl-content-responsive-x/y per repeater item. */
    --zcz-atl-content-responsive-x: var(--zcz-atl-content-desktop-x, 0px);
    --zcz-atl-content-responsive-y: var(--zcz-atl-content-desktop-y, 0px);
    --zcz-atl-tablet-content-extra-x: 0px;
    --zcz-atl-tablet-content-extra-y: 0px;
    --zcz-atl-content-x: var(--zcz-atl-content-responsive-x);
    --zcz-atl-content-y: var(--zcz-atl-content-responsive-y);
    --zcz-atl-marker-x: 0px;
    --zcz-atl-marker-y: 0px;
    position: relative;
    display: block;
    width: 100%;
    min-height: max(var(--zcz-atl-marker-size), var(--zcz-atl-row-min-height));
    direction: ltr;
    transform: translate(var(--zcz-atl-item-x), var(--zcz-atl-item-y));
    opacity: 1;
    filter: blur(0);
    transition: opacity .45s var(--zcz-atl-motion-ease), transform .65s var(--zcz-atl-motion-ease), filter .55s var(--zcz-atl-motion-ease), clip-path .7s var(--zcz-atl-motion-ease);
    overflow: visible;
}

.zcz-atl.zcz-atl-js .zcz-atl-item {
    opacity: 0;
}

.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible {
    opacity: 1;
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-fade-up {
    transform: translate(var(--zcz-atl-item-x), calc(var(--zcz-atl-item-y) + 24px));
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-fade-left {
    transform: translate(calc(var(--zcz-atl-item-x) - 24px), var(--zcz-atl-item-y));
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-fade-right {
    transform: translate(calc(var(--zcz-atl-item-x) + 24px), var(--zcz-atl-item-y));
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-scale {
    transform: translate(var(--zcz-atl-item-x), var(--zcz-atl-item-y)) scale(.94);
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-blur {
    transform: translate(var(--zcz-atl-item-x), calc(var(--zcz-atl-item-y) + 18px));
    filter: blur(6px);
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-none {
    opacity: 1;
}

.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-fade-up,
.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-fade-left,
.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-fade-right,
.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-scale,
.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-blur,
.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-none {
    transform: translate(var(--zcz-atl-item-x), var(--zcz-atl-item-y)) scale(1);
    filter: blur(0);
}

.zcz-atl-date-side,
.zcz-atl-content-side,
.zcz-atl-marker-side {
    z-index: 3;
    min-width: 0;
    direction: rtl;
}

/* Date is physically left of the vertical line. */
.zcz-atl-date-side {
    position: absolute;
    top: 50%;
    right: calc((100% - var(--zcz-atl-line-x)) + (var(--zcz-atl-marker-size) / 2) + var(--zcz-atl-side-gap));
    width: var(--zcz-atl-date-width);
    max-width: calc(var(--zcz-atl-line-x) - (var(--zcz-atl-marker-size) / 2) - var(--zcz-atl-side-gap));
    transform: translate(var(--zcz-atl-date-x), calc(-50% + var(--zcz-atl-date-y)));
    overflow: visible;
}

/* Title and description are physically right of the vertical line. */
.zcz-atl-content-side {
    position: relative;
    margin-left: calc(var(--zcz-atl-line-x) + (var(--zcz-atl-marker-size) / 2) + var(--zcz-atl-side-gap));
    width: var(--zcz-atl-content-width);
    max-width: calc(100% - var(--zcz-atl-line-x) - (var(--zcz-atl-marker-size) / 2) - var(--zcz-atl-side-gap));
    transform: translate(var(--zcz-atl-content-x), var(--zcz-atl-content-y));
    text-align: right;
    overflow: visible;
}

/* Marker center is locked to the same --zcz-atl-line-x used by the line. */
.zcz-atl-marker-side {
    position: absolute;
    top: 50%;
    left: var(--zcz-atl-line-x);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--zcz-atl-marker-size);
    height: var(--zcz-atl-marker-size);
    transform: translate(calc(-50% + var(--zcz-atl-marker-x)), calc(-50% + var(--zcz-atl-marker-y)));
    pointer-events: none;
}

.zcz-atl-date-wrap {
    position: relative;
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin: -10px -12px;
    cursor: pointer;
    outline: none;
    overflow: visible;
}

.zcz-atl-date-text,
.zcz-atl-date-hover,
.zcz-atl-title,
.zcz-atl-description {
    display: block;
    width: 100%;
    direction: rtl;
    unicode-bidi: plaintext;
    overflow: visible;
}

.zcz-atl-date-text {
    position: relative;
    z-index: 2;
    text-align: right;
    font-weight: 700;
    line-height: 1.2;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), opacity .25s ease;
}

.zcz-atl-date-wrap.is-hovered .zcz-atl-date-text {
    transform: translateY(calc(var(--zcz-atl-date-lift) * -1));
}

.zcz-atl-date-hover {
    min-height: 1.25em;
    margin-top: 6px;
    text-align: right;
    line-height: 1.5;
    white-space: pre-wrap;
}

.zcz-atl-date-hover.is-cursor::after {
    content: "|";
    display: inline-block;
    margin-inline-start: 4px;
    animation: zczAtlBlink 1s step-end infinite;
}

@keyframes zczAtlBlink {
    50% { opacity: 0; }
}

.zcz-atl-title {
    margin: 0 0 6px;
    text-align: right;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
}

.zcz-atl-description {
    text-align: right;
    font-size: 15px;
    line-height: 1.6;
}

/* Per-row alignment overrides. */
.zcz-atl-align-left { text-align: left !important; }
.zcz-atl-align-center { text-align: center !important; }
.zcz-atl-align-right { text-align: right !important; }

.zcz-atl-marker-motion {
    position: relative;
    display: inline-flex;
    width: var(--zcz-atl-marker-size);
    height: var(--zcz-atl-marker-size);
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--zcz-atl-marker-size);
    transform-origin: center;
}

.zcz-atl-marker {
    position: relative;
    z-index: 2;
    display: inline-flex;
    width: var(--zcz-atl-marker-size);
    height: var(--zcz-atl-marker-size);
    flex: 0 0 var(--zcz-atl-marker-size);
    align-items: center;
    justify-content: center;
    background: var(--zcz-atl-marker-bg);
    color: var(--zcz-atl-marker-text);
    border: var(--zcz-atl-marker-border-width) solid var(--zcz-atl-marker-border-color);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    transition: transform .45s var(--zcz-atl-motion-ease), background-color .4s ease, box-shadow .45s ease, filter .45s ease;
    will-change: transform;
}

.zcz-atl-item.is-active .zcz-atl-marker {
    background: var(--zcz-atl-marker-active-bg);
}

.zcz-atl-marker-inner {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.zcz-atl-marker-label,
.zcz-atl-marker-icon {
    color: inherit;
    font-size: calc(var(--zcz-atl-marker-size) * .33);
    line-height: 1;
}

.zcz-atl-marker-icon {
    display: inline-flex;
    width: 1em;
    height: 1em;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-family: inherit;
}

.zcz-atl-marker-icon > i,
.zcz-atl-marker-icon > svg,
.zcz-atl-marker-icon i,
.zcz-atl-marker-icon svg {
    display: block;
    width: 1em;
    height: 1em;
    min-width: 1em;
    color: currentColor;
    fill: currentColor;
    font-size: inherit;
    line-height: 1;
}

.zcz-atl-marker-icon svg path,
.zcz-atl-marker-icon svg use {
    fill: currentColor;
}

.zcz-atl-shape-circle { border-radius: 999px; }
.zcz-atl-shape-square { border-radius: 0; }
.zcz-atl-shape-rounded { border-radius: 12px; }

.zcz-atl-shape-ring {
    border-radius: 999px;
    background: transparent;
    box-shadow: inset 0 0 0 max(2px, var(--zcz-atl-marker-border-width)) var(--zcz-atl-marker-bg);
    color: var(--zcz-atl-marker-bg);
}

.zcz-atl-item.is-active .zcz-atl-shape-ring {
    box-shadow: inset 0 0 0 max(2px, var(--zcz-atl-marker-border-width)) var(--zcz-atl-marker-active-bg);
    color: var(--zcz-atl-marker-active-bg);
}

.zcz-atl-shape-diamond {
    border-radius: 0;
    transform: rotate(45deg);
}

.zcz-atl-shape-diamond .zcz-atl-marker-inner {
    transform: rotate(-45deg);
}

.zcz-atl-shape-hexagon {
    border-radius: 0;
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
}

.zcz-atl-marker::before,
.zcz-atl-marker::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
}

.zcz-atl-marker-effect-pulse::before {
    box-shadow: 0 0 0 0 var(--zcz-atl-progress-glow);
}

.zcz-atl-item.is-active .zcz-atl-marker-effect-pulse::before {
    opacity: 1;
    animation: zczAtlPulse 1.7s ease-out infinite;
}

@keyframes zczAtlPulse {
    0% { box-shadow: 0 0 0 0 var(--zcz-atl-progress-glow); opacity: .9; }
    100% { box-shadow: 0 0 0 var(--zcz-atl-effect-strength) transparent; opacity: 0; }
}

.zcz-atl-item.is-active .zcz-atl-marker-effect-ripple::before,
.zcz-atl-item.is-active .zcz-atl-marker-effect-ripple::after {
    opacity: 1;
    border: 1px solid var(--zcz-atl-progress-color);
    animation: zczAtlRipple 1.8s ease-out infinite;
}

.zcz-atl-item.is-active .zcz-atl-marker-effect-ripple::after {
    animation-delay: .45s;
}

@keyframes zczAtlRipple {
    0% { transform: scale(1); opacity: .6; }
    100% { transform: scale(1.65); opacity: 0; }
}

.zcz-atl-item.is-active .zcz-atl-marker-effect-soft-glow {
    box-shadow: 0 0 18px var(--zcz-atl-progress-glow);
}

.zcz-atl-marker-effect-rotate-border::before {
    inset: -3px;
    padding: 2px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, transparent 0 35%, var(--zcz-atl-progress-color) 60%, transparent 80% 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.zcz-atl-item.is-active .zcz-atl-marker-effect-rotate-border::before {
    opacity: 1;
    animation: zczAtlRotate 2s linear infinite;
}

@keyframes zczAtlRotate {
    to { transform: rotate(360deg); }
}


/* =========================================================
 * Premium motion pack — visual-only additions.
 * Approved layout, alignment, marker coordinates and spacing
 * remain untouched.
 * ======================================================= */

.zcz-atl-ease-smooth { --zcz-atl-motion-ease: cubic-bezier(.25, .1, .25, 1); }
.zcz-atl-ease-cinematic { --zcz-atl-motion-ease: cubic-bezier(.16, 1, .3, 1); }
.zcz-atl-ease-spring { --zcz-atl-motion-ease: cubic-bezier(.34, 1.56, .64, 1); }
.zcz-atl-ease-sharp { --zcz-atl-motion-ease: cubic-bezier(.22, .8, .22, 1); }

/* Premium item reveal effects. */
.zcz-atl.zcz-atl-js .zcz-atl-effect-cinematic {
    transform: translate(var(--zcz-atl-item-x), calc(var(--zcz-atl-item-y) + var(--zcz-atl-motion-distance))) scale(.975);
    filter: blur(var(--zcz-atl-motion-blur));
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-clip-reveal {
    transform: translate(var(--zcz-atl-item-x), var(--zcz-atl-item-y));
    clip-path: inset(0 50% 0 50% round 8px);
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-perspective {
    transform: perspective(900px) translate(var(--zcz-atl-item-x), calc(var(--zcz-atl-item-y) + var(--zcz-atl-motion-distance))) rotateX(10deg) scale(.98);
    transform-origin: 50% 100%;
    filter: blur(var(--zcz-atl-motion-blur));
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-spring {
    transform: translate(var(--zcz-atl-item-x), calc(var(--zcz-atl-item-y) + var(--zcz-atl-motion-distance))) scale(.92);
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-zoom-blur {
    transform: translate(var(--zcz-atl-item-x), var(--zcz-atl-item-y)) scale(1.08);
    filter: blur(var(--zcz-atl-motion-blur));
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-cascade {
    transform: translate(var(--zcz-atl-item-x), var(--zcz-atl-item-y));
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-cascade .zcz-atl-date-side,
.zcz-atl.zcz-atl-js .zcz-atl-effect-cascade .zcz-atl-marker-side,
.zcz-atl.zcz-atl-js .zcz-atl-effect-cascade .zcz-atl-content-side {
    opacity: 0;
    filter: blur(var(--zcz-atl-motion-blur));
    transition: opacity .6s var(--zcz-atl-motion-ease), filter .65s var(--zcz-atl-motion-ease);
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-cascade .zcz-atl-date-side {
    translate: calc(0px - var(--zcz-atl-motion-distance)) 0;
    transition-property: opacity, filter, translate;
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-cascade .zcz-atl-marker-side {
    scale: .55;
    transition-property: opacity, filter, scale;
    transition-delay: 90ms;
}

.zcz-atl.zcz-atl-js .zcz-atl-effect-cascade .zcz-atl-content-side {
    translate: var(--zcz-atl-motion-distance) 0;
    transition-property: opacity, filter, translate;
    transition-delay: 170ms;
}

.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-cinematic,
.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-perspective,
.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-spring,
.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-zoom-blur {
    transform: translate(var(--zcz-atl-item-x), var(--zcz-atl-item-y)) scale(1) rotateX(0deg);
    filter: blur(0);
}

.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-clip-reveal {
    transform: translate(var(--zcz-atl-item-x), var(--zcz-atl-item-y));
    clip-path: inset(0 0 0 0 round 0);
}

.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-cascade .zcz-atl-date-side,
.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-cascade .zcz-atl-marker-side,
.zcz-atl.zcz-atl-js .zcz-atl-item.is-visible.zcz-atl-effect-cascade .zcz-atl-content-side {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
    scale: 1;
}

/* The approved legacy effects now use the new intensity controls. */
.zcz-atl.zcz-atl-js .zcz-atl-effect-fade-up {
    transform: translate(var(--zcz-atl-item-x), calc(var(--zcz-atl-item-y) + var(--zcz-atl-motion-distance)));
}
.zcz-atl.zcz-atl-js .zcz-atl-effect-fade-left {
    transform: translate(calc(var(--zcz-atl-item-x) - var(--zcz-atl-motion-distance)), var(--zcz-atl-item-y));
}
.zcz-atl.zcz-atl-js .zcz-atl-effect-fade-right {
    transform: translate(calc(var(--zcz-atl-item-x) + var(--zcz-atl-motion-distance)), var(--zcz-atl-item-y));
}
.zcz-atl.zcz-atl-js .zcz-atl-effect-blur {
    filter: blur(var(--zcz-atl-motion-blur));
}

/* Active item micro-interactions. */
.zcz-atl-title,
.zcz-atl-description,
.zcz-atl-date-text {
    transition: opacity .45s var(--zcz-atl-motion-ease), filter .45s var(--zcz-atl-motion-ease), text-shadow .45s ease, translate .45s var(--zcz-atl-motion-ease), letter-spacing .45s var(--zcz-atl-motion-ease);
}

.zcz-atl-active-effect-focus .zcz-atl-item:not(.is-active) .zcz-atl-title,
.zcz-atl-active-effect-focus .zcz-atl-item:not(.is-active) .zcz-atl-description,
.zcz-atl-active-effect-focus .zcz-atl-item:not(.is-active) .zcz-atl-date-text {
    opacity: .72;
}

.zcz-atl-active-effect-focus .zcz-atl-item.is-active .zcz-atl-title,
.zcz-atl-active-effect-focus .zcz-atl-item.is-active .zcz-atl-date-text {
    opacity: 1;
    filter: saturate(1.08);
}

.zcz-atl-active-effect-glow .zcz-atl-item.is-active .zcz-atl-title,
.zcz-atl-active-effect-glow .zcz-atl-item.is-active .zcz-atl-date-text {
    text-shadow: 0 0 18px var(--zcz-atl-progress-glow);
}

.zcz-atl-active-effect-lift .zcz-atl-item.is-active .zcz-atl-title,
.zcz-atl-active-effect-lift .zcz-atl-item.is-active .zcz-atl-description {
    translate: 0 -3px;
}

.zcz-atl-active-effect-underline .zcz-atl-title {
    position: relative;
    display: inline-block;
}

.zcz-atl-active-effect-underline .zcz-atl-title::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -.28em;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background: var(--zcz-atl-progress-color);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .55s var(--zcz-atl-motion-ease);
}

.zcz-atl-active-effect-underline .zcz-atl-item.is-active .zcz-atl-title::after {
    transform: scaleX(1);
}

/* Premium marker effects; all stay centered on the existing marker coordinate. */
.zcz-atl-marker-effect-orbit::before {
    inset: calc(0px - var(--zcz-atl-effect-strength));
    border: 1px solid var(--zcz-atl-progress-color);
    border-top-color: transparent;
    border-left-color: transparent;
}

.zcz-atl-item.is-active .zcz-atl-marker-effect-orbit::before {
    opacity: 1;
    animation: zczAtlOrbit var(--zcz-atl-progress-effect-speed) linear infinite;
}

.zcz-atl-marker-effect-orbit::after {
    width: 5px;
    height: 5px;
    inset: auto;
    top: calc(0px - var(--zcz-atl-effect-strength) - 2px);
    left: 50%;
    border-radius: 50%;
    background: var(--zcz-atl-progress-color);
    box-shadow: 0 0 10px var(--zcz-atl-progress-glow);
    transform: translateX(-50%);
}

.zcz-atl-item.is-active .zcz-atl-marker-effect-orbit::after { opacity: 1; }

@keyframes zczAtlOrbit { to { transform: rotate(360deg); } }

.zcz-atl-item.is-active .zcz-atl-marker-effect-double-ring::before,
.zcz-atl-item.is-active .zcz-atl-marker-effect-double-ring::after {
    opacity: 1;
    border: 1px solid var(--zcz-atl-progress-color);
    animation: zczAtlDoubleRing 2.1s cubic-bezier(.2,.7,.2,1) infinite;
}
.zcz-atl-item.is-active .zcz-atl-marker-effect-double-ring::after { animation-delay: .65s; }
@keyframes zczAtlDoubleRing {
    0% { transform: scale(.9); opacity: .72; }
    75%, 100% { transform: scale(1.8); opacity: 0; }
}

.zcz-atl-marker-effect-energy-scan { overflow: hidden; }
.zcz-atl-marker-effect-energy-scan::after {
    inset: -35% -70%;
    background: linear-gradient(115deg, transparent 36%, rgba(255,255,255,.8) 48%, transparent 60%);
    transform: translateX(-65%) rotate(8deg);
}
.zcz-atl-item.is-active .zcz-atl-marker-effect-energy-scan::after {
    opacity: 1;
    animation: zczAtlEnergyScan var(--zcz-atl-progress-effect-speed) ease-in-out infinite;
}
@keyframes zczAtlEnergyScan {
    0%, 18% { transform: translateX(-65%) rotate(8deg); opacity: 0; }
    42% { opacity: .85; }
    72%, 100% { transform: translateX(65%) rotate(8deg); opacity: 0; }
}

.zcz-atl-item.is-active .zcz-atl-marker-effect-breathe {
    animation: zczAtlBreathe var(--zcz-atl-progress-effect-speed) ease-in-out infinite;
}
@keyframes zczAtlBreathe {
    0%, 100% { filter: brightness(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
    50% { filter: brightness(1.15); box-shadow: 0 0 var(--zcz-atl-effect-strength) var(--zcz-atl-progress-glow); }
}

.zcz-atl-marker-effect-glass-shine { overflow: hidden; }
.zcz-atl-marker-effect-glass-shine::before {
    inset: -60% -90%;
    background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.72) 48%, rgba(255,255,255,.12) 55%, transparent 66%);
    transform: translateX(-70%);
}
.zcz-atl-item.is-active .zcz-atl-marker-effect-glass-shine::before {
    opacity: 1;
    animation: zczAtlGlassShine var(--zcz-atl-progress-effect-speed) ease-in-out infinite;
}
@keyframes zczAtlGlassShine {
    0%, 25% { transform: translateX(-70%); opacity: 0; }
    38% { opacity: 1; }
    68%, 100% { transform: translateX(70%); opacity: 0; }
}

/* Smooth progress line visual effects. */
.zcz-atl-line--progress::before,
.zcz-atl-line--progress::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.zcz-atl-progress-effect-clean .zcz-atl-line--progress::before,
.zcz-atl-progress-effect-clean .zcz-atl-line--progress::after { display: none; }

.zcz-atl-progress-effect-silk-glow .zcz-atl-line--progress {
    box-shadow: 0 0 7px var(--zcz-atl-progress-glow), 0 0 18px var(--zcz-atl-progress-glow);
}
.zcz-atl-progress-effect-silk-glow .zcz-atl-line--progress::after {
    background: linear-gradient(to right, transparent, rgba(255,255,255,.48), transparent);
    opacity: .7;
}

.zcz-atl-progress-effect-light-sweep .zcz-atl-line--progress::after {
    top: -22%;
    bottom: auto;
    height: 22%;
    min-height: 44px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.95), transparent);
    filter: blur(1px);
    animation: zczAtlLineSweep var(--zcz-atl-progress-effect-speed) linear infinite;
}
@keyframes zczAtlLineSweep { to { translate: 0 560%; } }

.zcz-atl-progress-effect-energy-flow .zcz-atl-line--progress {
    background: linear-gradient(to bottom, var(--zcz-atl-progress-color) 0%, rgba(255,255,255,.92) 48%, var(--zcz-atl-progress-color) 100%);
    background-size: 100% 220%;
    animation: zczAtlEnergyFlow var(--zcz-atl-progress-effect-speed) linear infinite;
}
@keyframes zczAtlEnergyFlow { to { background-position: 0 220%; } }

.zcz-atl-progress-effect-soft-pulse .zcz-atl-line--progress {
    animation: zczAtlLinePulse var(--zcz-atl-progress-effect-speed) ease-in-out infinite;
}
@keyframes zczAtlLinePulse {
    0%, 100% { box-shadow: 0 0 5px var(--zcz-atl-progress-glow); filter: brightness(1); }
    50% { box-shadow: 0 0 18px var(--zcz-atl-progress-glow); filter: brightness(1.2); }
}

.zcz-atl-progress-head {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 0;
    width: var(--zcz-atl-progress-head-size);
    height: var(--zcz-atl-progress-head-size);
    border-radius: 50%;
    background: var(--zcz-atl-progress-color);
    box-shadow: 0 0 8px var(--zcz-atl-progress-color), 0 0 22px var(--zcz-atl-progress-glow);
    transform: translate(-50%, -50%) scale(.75);
    opacity: 0;
    will-change: top, opacity, transform;
    pointer-events: none;
}

.zcz-atl-progress-head.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}



/* =========================================================
 * Independent marker glow — additive only.
 * It uses its own layer so it never changes marker position,
 * marker effects, reveal motion or approved layout values.
 * ======================================================= */
.zcz-atl-marker-glow-layer {
    position: absolute;
    z-index: 1;
    width: var(--zcz-atl-marker-size);
    height: var(--zcz-atl-marker-size);
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    background: var(--zcz-atl-marker-glow-color);
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 0 transparent);
    transition: opacity .35s ease, filter .45s ease;
    will-change: opacity, filter;
}

.zcz-atl-marker-glow-layer.zcz-atl-shape-ring {
    background: transparent;
    border: 2px solid var(--zcz-atl-marker-glow-color);
    box-shadow: none;
    color: inherit;
}

.zcz-atl-marker-glow-enabled.zcz-atl-marker-glow-mode-always .zcz-atl-marker-glow-layer,
.zcz-atl-marker-glow-enabled.zcz-atl-marker-glow-mode-active .zcz-atl-item.is-active .zcz-atl-marker-glow-layer,
.zcz-atl-marker-glow-enabled.zcz-atl-marker-glow-mode-hover .zcz-atl-item:hover .zcz-atl-marker-glow-layer {
    opacity: .88;
    filter:
        drop-shadow(0 0 6px var(--zcz-atl-marker-glow-color))
        drop-shadow(0 0 var(--zcz-atl-marker-glow-size) var(--zcz-atl-marker-glow-color));
}

.zcz-atl-marker-glow-enabled.zcz-atl-marker-glow-style-breathe.zcz-atl-marker-glow-mode-always .zcz-atl-marker-glow-layer,
.zcz-atl-marker-glow-enabled.zcz-atl-marker-glow-style-breathe.zcz-atl-marker-glow-mode-active .zcz-atl-item.is-active .zcz-atl-marker-glow-layer,
.zcz-atl-marker-glow-enabled.zcz-atl-marker-glow-style-breathe.zcz-atl-marker-glow-mode-hover .zcz-atl-item:hover .zcz-atl-marker-glow-layer {
    animation: zczAtlMarkerGlowBreathe var(--zcz-atl-marker-glow-speed) ease-in-out infinite;
}

@keyframes zczAtlMarkerGlowBreathe {
    0%, 100% {
        opacity: .58;
        filter: drop-shadow(0 0 4px var(--zcz-atl-marker-glow-color));
    }
    50% {
        opacity: .96;
        filter:
            drop-shadow(0 0 8px var(--zcz-atl-marker-glow-color))
            drop-shadow(0 0 var(--zcz-atl-marker-glow-size) var(--zcz-atl-marker-glow-color));
    }
}

/* =========================================================
 * Optional playful micro animation.
 * Disabled by default and applied only to the selected target.
 * Individual transform properties preserve date hover, diamond
 * rotation and every existing timeline position.
 * ======================================================= */
.zcz-atl-play-effect-float { --zcz-atl-play-name: zczAtlPlayFloat; }
.zcz-atl-play-effect-wiggle { --zcz-atl-play-name: zczAtlPlayWiggle; }
.zcz-atl-play-effect-bounce { --zcz-atl-play-name: zczAtlPlayBounce; }
.zcz-atl-play-effect-tilt { --zcz-atl-play-name: zczAtlPlayTilt; }
.zcz-atl-play-effect-heartbeat { --zcz-atl-play-name: zczAtlPlayHeartbeat; }

.zcz-atl-play-enabled.zcz-atl-play-trigger-always.zcz-atl-play-target-marker .zcz-atl-marker-motion,
.zcz-atl-play-enabled.zcz-atl-play-trigger-active.zcz-atl-play-target-marker .zcz-atl-item.is-active .zcz-atl-marker-motion,
.zcz-atl-play-enabled.zcz-atl-play-trigger-hover.zcz-atl-play-target-marker .zcz-atl-item:hover .zcz-atl-marker-motion,
.zcz-atl-play-enabled.zcz-atl-play-trigger-always.zcz-atl-play-target-title .zcz-atl-title,
.zcz-atl-play-enabled.zcz-atl-play-trigger-active.zcz-atl-play-target-title .zcz-atl-item.is-active .zcz-atl-title,
.zcz-atl-play-enabled.zcz-atl-play-trigger-hover.zcz-atl-play-target-title .zcz-atl-item:hover .zcz-atl-title,
.zcz-atl-play-enabled.zcz-atl-play-trigger-always.zcz-atl-play-target-description .zcz-atl-description,
.zcz-atl-play-enabled.zcz-atl-play-trigger-active.zcz-atl-play-target-description .zcz-atl-item.is-active .zcz-atl-description,
.zcz-atl-play-enabled.zcz-atl-play-trigger-hover.zcz-atl-play-target-description .zcz-atl-item:hover .zcz-atl-description,
.zcz-atl-play-enabled.zcz-atl-play-trigger-always.zcz-atl-play-target-date .zcz-atl-date-text,
.zcz-atl-play-enabled.zcz-atl-play-trigger-active.zcz-atl-play-target-date .zcz-atl-item.is-active .zcz-atl-date-text,
.zcz-atl-play-enabled.zcz-atl-play-trigger-hover.zcz-atl-play-target-date .zcz-atl-item:hover .zcz-atl-date-text,
.zcz-atl-play-enabled.zcz-atl-play-trigger-always.zcz-atl-play-target-all-text :is(.zcz-atl-date-text, .zcz-atl-date-hover, .zcz-atl-title, .zcz-atl-description),
.zcz-atl-play-enabled.zcz-atl-play-trigger-active.zcz-atl-play-target-all-text .zcz-atl-item.is-active :is(.zcz-atl-date-text, .zcz-atl-date-hover, .zcz-atl-title, .zcz-atl-description),
.zcz-atl-play-enabled.zcz-atl-play-trigger-hover.zcz-atl-play-target-all-text .zcz-atl-item:hover :is(.zcz-atl-date-text, .zcz-atl-date-hover, .zcz-atl-title, .zcz-atl-description),
.zcz-atl-play-enabled.zcz-atl-play-trigger-always.zcz-atl-play-target-marker-title :is(.zcz-atl-marker-motion, .zcz-atl-title),
.zcz-atl-play-enabled.zcz-atl-play-trigger-active.zcz-atl-play-target-marker-title .zcz-atl-item.is-active :is(.zcz-atl-marker-motion, .zcz-atl-title),
.zcz-atl-play-enabled.zcz-atl-play-trigger-hover.zcz-atl-play-target-marker-title .zcz-atl-item:hover :is(.zcz-atl-marker-motion, .zcz-atl-title) {
    animation-name: var(--zcz-atl-play-name);
    animation-duration: var(--zcz-atl-play-speed);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-delay: var(--zcz-atl-play-delay, 0ms);
    transform-origin: center;
    will-change: translate, rotate, scale;
}

@keyframes zczAtlPlayFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 var(--zcz-atl-play-strength-negative); }
}

@keyframes zczAtlPlayWiggle {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    25% { translate: -2px 0; rotate: -2deg; }
    75% { translate: 2px 0; rotate: 2deg; }
}

@keyframes zczAtlPlayBounce {
    0%, 100% { translate: 0 0; scale: 1; }
    38% { translate: 0 var(--zcz-atl-play-strength-negative); scale: 1.025; }
    55% { translate: 0 2px; scale: .995; }
    72% { translate: 0 -2px; scale: 1.01; }
}

@keyframes zczAtlPlayTilt {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    35% { translate: -2px 0; rotate: -2.4deg; }
    68% { translate: 2px 0; rotate: 2.4deg; }
}

@keyframes zczAtlPlayHeartbeat {
    0%, 60%, 100% { scale: 1; }
    15% { scale: 1.06; }
    30% { scale: 1; }
    42% { scale: 1.035; }
}



/* =========================================================
 * v1.0.5 — independent line thickness and line animations.
 * These rules are opt-in and preserve the existing defaults.
 * ======================================================= */
.zcz-atl-line--base::before,
.zcz-atl-line--base::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.zcz-atl-base-line-animation-enabled.zcz-atl-base-line-effect-soft-breathe .zcz-atl-line--base {
    animation: zczAtlBaseBreathe var(--zcz-atl-base-line-effect-speed) ease-in-out infinite;
}

@keyframes zczAtlBaseBreathe {
    0%, 100% { opacity: .56; filter: brightness(.92); }
    50% { opacity: 1; filter: brightness(1.18); }
}

.zcz-atl-base-line-animation-enabled.zcz-atl-base-line-effect-light-sweep .zcz-atl-line--base::after {
    top: -20%;
    bottom: auto;
    height: 22%;
    min-height: 42px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.82), transparent);
    filter: blur(1px);
    animation: zczAtlBaseSweep var(--zcz-atl-base-line-effect-speed) linear infinite;
}

@keyframes zczAtlBaseSweep { to { translate: 0 560%; } }

.zcz-atl-base-line-animation-enabled.zcz-atl-base-line-effect-energy-flow .zcz-atl-line--base {
    background: linear-gradient(to bottom, var(--zcz-atl-line-color), rgba(255,255,255,.52), var(--zcz-atl-line-color));
    background-size: 100% 220%;
    animation: zczAtlBaseEnergyFlow var(--zcz-atl-base-line-effect-speed) linear infinite;
}

@keyframes zczAtlBaseEnergyFlow { to { background-position: 0 220%; } }

.zcz-atl-base-line-animation-enabled.zcz-atl-base-line-effect-soft-pulse .zcz-atl-line--base {
    animation: zczAtlBasePulse var(--zcz-atl-base-line-effect-speed) ease-in-out infinite;
}

@keyframes zczAtlBasePulse {
    0%, 100% { box-shadow: 0 0 0 transparent; opacity: .72; }
    50% { box-shadow: 0 0 12px var(--zcz-atl-progress-glow); opacity: 1; }
}

.zcz-atl-progress-animation-disabled .zcz-atl-line--progress,
.zcz-atl-progress-animation-disabled .zcz-atl-line--progress::before,
.zcz-atl-progress-animation-disabled .zcz-atl-line--progress::after {
    animation: none !important;
}

.zcz-atl-progress-animation-disabled .zcz-atl-line--progress::before,
.zcz-atl-progress-animation-disabled .zcz-atl-line--progress::after {
    display: none !important;
}

.zcz-atl-progress-animation-disabled .zcz-atl-line--progress {
    background: var(--zcz-atl-progress-color);
    box-shadow: none;
    filter: none;
}

/* =========================================================
 * Optional 3D marker layer. The depth is rendered behind the
 * approved marker coordinate, so center alignment never moves.
 * ======================================================= */
.zcz-atl-marker-depth-layer {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 50%;
    display: block;
    width: var(--zcz-atl-marker-size);
    height: var(--zcz-atl-marker-size);
    translate: -50% calc(-50% + var(--zcz-atl-marker-depth));
    background: var(--zcz-atl-marker-depth-color);
    opacity: .82;
    pointer-events: none;
    filter: blur(.15px) drop-shadow(0 3px 5px rgba(0,0,0,.22));
}

.zcz-atl-marker-depth-layer.zcz-atl-shape-ring {
    background: transparent;
    border: max(2px, var(--zcz-atl-marker-border-width)) solid var(--zcz-atl-marker-depth-color);
    box-shadow: none !important;
    color: transparent !important;
}

.zcz-atl-marker-3d-enabled .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background:
        linear-gradient(145deg, var(--zcz-atl-marker-highlight-color) 0%, transparent 42%),
        var(--zcz-atl-marker-bg);
    box-shadow:
        inset 0 2px 2px rgba(255,255,255,.24),
        inset 0 -3px 5px rgba(0,0,0,.16),
        0 3px 7px rgba(0,0,0,.18);
}

.zcz-atl-marker-3d-enabled .zcz-atl-item.is-active .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background:
        linear-gradient(145deg, var(--zcz-atl-marker-highlight-color) 0%, transparent 42%),
        var(--zcz-atl-marker-active-bg);
}

.zcz-atl-marker-3d-enabled .zcz-atl-marker.zcz-atl-shape-ring {
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.22));
}

.zcz-atl-marker-3d-style-deep .zcz-atl-marker-depth-layer { opacity: .98; }
.zcz-atl-marker-3d-style-deep .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    box-shadow: inset 0 3px 3px rgba(255,255,255,.28), inset 0 -5px 7px rgba(0,0,0,.24), 0 5px 10px rgba(0,0,0,.24);
}

.zcz-atl-marker-3d-style-glass .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background:
        linear-gradient(145deg, rgba(255,255,255,.64), rgba(255,255,255,.08) 42%, rgba(0,0,0,.08)),
        var(--zcz-atl-marker-bg);
    backdrop-filter: blur(5px) saturate(135%);
    -webkit-backdrop-filter: blur(5px) saturate(135%);
}

.zcz-atl-marker-3d-style-glass .zcz-atl-item.is-active .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background:
        linear-gradient(145deg, rgba(255,255,255,.64), rgba(255,255,255,.08) 42%, rgba(0,0,0,.08)),
        var(--zcz-atl-marker-active-bg);
}

.zcz-atl-marker-3d-style-metal .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background:
        linear-gradient(145deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.08) 31%, rgba(0,0,0,.18) 72%, rgba(255,255,255,.18) 100%),
        var(--zcz-atl-marker-bg);
    box-shadow: inset 0 2px 2px rgba(255,255,255,.44), inset 0 -3px 4px rgba(0,0,0,.28), 0 4px 8px rgba(0,0,0,.24);
}

.zcz-atl-marker-3d-style-metal .zcz-atl-item.is-active .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background:
        linear-gradient(145deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.08) 31%, rgba(0,0,0,.18) 72%, rgba(255,255,255,.18) 100%),
        var(--zcz-atl-marker-active-bg);
}

/* Independent text hover colors. */
.zcz-atl-text-hover-enabled.zcz-atl-date-hover-color-enabled .zcz-atl-date-wrap:hover .zcz-atl-date-text,
.zcz-atl-text-hover-enabled.zcz-atl-date-hover-color-enabled .zcz-atl-date-wrap:focus-within .zcz-atl-date-text {
    color: var(--zcz-atl-date-hover-color);
}

.zcz-atl-text-hover-enabled.zcz-atl-typing-hover-color-enabled .zcz-atl-date-wrap:hover .zcz-atl-date-hover,
.zcz-atl-text-hover-enabled.zcz-atl-typing-hover-color-enabled .zcz-atl-date-wrap:focus-within .zcz-atl-date-hover {
    color: var(--zcz-atl-typing-hover-color);
}

.zcz-atl-text-hover-enabled.zcz-atl-title-hover-color-enabled .zcz-atl-title:hover { color: var(--zcz-atl-title-hover-color); }
.zcz-atl-text-hover-enabled.zcz-atl-description-hover-color-enabled .zcz-atl-description:hover { color: var(--zcz-atl-description-hover-color); }

.zcz-atl-text-hover-enabled :is(.zcz-atl-date-text, .zcz-atl-date-hover, .zcz-atl-title, .zcz-atl-description) {
    transition-property: color, opacity, filter, text-shadow, translate, letter-spacing, transform;
    transition-duration: var(--zcz-atl-text-hover-duration);
}

/* =========================================================
 * Per-element animation system. Each target has its own
 * enable switch, effect, trigger, strength and speed.
 * ======================================================= */
.zcz-atl-independent-marker-effect-float { --zcz-atl-marker-animation-name: zczAtlIndependentFloat; }
.zcz-atl-independent-marker-effect-wiggle { --zcz-atl-marker-animation-name: zczAtlIndependentWiggle; }
.zcz-atl-independent-marker-effect-bounce { --zcz-atl-marker-animation-name: zczAtlIndependentBounce; }
.zcz-atl-independent-marker-effect-tilt { --zcz-atl-marker-animation-name: zczAtlIndependentTilt; }
.zcz-atl-independent-marker-effect-heartbeat { --zcz-atl-marker-animation-name: zczAtlIndependentHeartbeat; }
.zcz-atl-independent-marker-effect-swing { --zcz-atl-marker-animation-name: zczAtlIndependentSwing; }
.zcz-atl-independent-marker-effect-jelly { --zcz-atl-marker-animation-name: zczAtlIndependentJelly; }
.zcz-atl-independent-marker-effect-glow-pulse { --zcz-atl-marker-animation-name: zczAtlIndependentGlowPulse; }

.zcz-atl-independent-date-effect-float { --zcz-atl-date-animation-name: zczAtlIndependentFloat; }
.zcz-atl-independent-date-effect-wiggle { --zcz-atl-date-animation-name: zczAtlIndependentWiggle; }
.zcz-atl-independent-date-effect-bounce { --zcz-atl-date-animation-name: zczAtlIndependentBounce; }
.zcz-atl-independent-date-effect-tilt { --zcz-atl-date-animation-name: zczAtlIndependentTilt; }
.zcz-atl-independent-date-effect-heartbeat { --zcz-atl-date-animation-name: zczAtlIndependentHeartbeat; }
.zcz-atl-independent-date-effect-swing { --zcz-atl-date-animation-name: zczAtlIndependentSwing; }
.zcz-atl-independent-date-effect-jelly { --zcz-atl-date-animation-name: zczAtlIndependentJelly; }
.zcz-atl-independent-date-effect-glow-pulse { --zcz-atl-date-animation-name: zczAtlIndependentGlowPulse; }

.zcz-atl-independent-typing-effect-float { --zcz-atl-typing-animation-name: zczAtlIndependentFloat; }
.zcz-atl-independent-typing-effect-wiggle { --zcz-atl-typing-animation-name: zczAtlIndependentWiggle; }
.zcz-atl-independent-typing-effect-bounce { --zcz-atl-typing-animation-name: zczAtlIndependentBounce; }
.zcz-atl-independent-typing-effect-tilt { --zcz-atl-typing-animation-name: zczAtlIndependentTilt; }
.zcz-atl-independent-typing-effect-heartbeat { --zcz-atl-typing-animation-name: zczAtlIndependentHeartbeat; }
.zcz-atl-independent-typing-effect-swing { --zcz-atl-typing-animation-name: zczAtlIndependentSwing; }
.zcz-atl-independent-typing-effect-jelly { --zcz-atl-typing-animation-name: zczAtlIndependentJelly; }
.zcz-atl-independent-typing-effect-glow-pulse { --zcz-atl-typing-animation-name: zczAtlIndependentGlowPulse; }

.zcz-atl-independent-title-effect-float { --zcz-atl-title-animation-name: zczAtlIndependentFloat; }
.zcz-atl-independent-title-effect-wiggle { --zcz-atl-title-animation-name: zczAtlIndependentWiggle; }
.zcz-atl-independent-title-effect-bounce { --zcz-atl-title-animation-name: zczAtlIndependentBounce; }
.zcz-atl-independent-title-effect-tilt { --zcz-atl-title-animation-name: zczAtlIndependentTilt; }
.zcz-atl-independent-title-effect-heartbeat { --zcz-atl-title-animation-name: zczAtlIndependentHeartbeat; }
.zcz-atl-independent-title-effect-swing { --zcz-atl-title-animation-name: zczAtlIndependentSwing; }
.zcz-atl-independent-title-effect-jelly { --zcz-atl-title-animation-name: zczAtlIndependentJelly; }
.zcz-atl-independent-title-effect-glow-pulse { --zcz-atl-title-animation-name: zczAtlIndependentGlowPulse; }

.zcz-atl-independent-description-effect-float { --zcz-atl-description-animation-name: zczAtlIndependentFloat; }
.zcz-atl-independent-description-effect-wiggle { --zcz-atl-description-animation-name: zczAtlIndependentWiggle; }
.zcz-atl-independent-description-effect-bounce { --zcz-atl-description-animation-name: zczAtlIndependentBounce; }
.zcz-atl-independent-description-effect-tilt { --zcz-atl-description-animation-name: zczAtlIndependentTilt; }
.zcz-atl-independent-description-effect-heartbeat { --zcz-atl-description-animation-name: zczAtlIndependentHeartbeat; }
.zcz-atl-independent-description-effect-swing { --zcz-atl-description-animation-name: zczAtlIndependentSwing; }
.zcz-atl-independent-description-effect-jelly { --zcz-atl-description-animation-name: zczAtlIndependentJelly; }
.zcz-atl-independent-description-effect-glow-pulse { --zcz-atl-description-animation-name: zczAtlIndependentGlowPulse; }

.zcz-atl-independent-marker-animation.zcz-atl-independent-marker-trigger-always .zcz-atl-marker-motion,
.zcz-atl-independent-marker-animation.zcz-atl-independent-marker-trigger-active .zcz-atl-item.is-active .zcz-atl-marker-motion,
.zcz-atl-independent-marker-animation.zcz-atl-independent-marker-trigger-hover .zcz-atl-item:hover .zcz-atl-marker-motion { animation-name: var(--zcz-atl-marker-animation-name); animation-duration: var(--zcz-atl-marker-animation-speed); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: var(--zcz-atl-play-delay, 0ms); --zcz-atl-local-animation-strength: var(--zcz-atl-marker-animation-strength); --zcz-atl-local-animation-strength-negative: var(--zcz-atl-marker-animation-strength-negative); transform-origin: center; will-change: translate, rotate, scale, filter; }

.zcz-atl-independent-date-animation.zcz-atl-independent-date-trigger-always .zcz-atl-date-text,
.zcz-atl-independent-date-animation.zcz-atl-independent-date-trigger-active .zcz-atl-item.is-active .zcz-atl-date-text,
.zcz-atl-independent-date-animation.zcz-atl-independent-date-trigger-hover .zcz-atl-date-wrap:hover .zcz-atl-date-text { animation-name: var(--zcz-atl-date-animation-name); animation-duration: var(--zcz-atl-date-animation-speed); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: var(--zcz-atl-play-delay, 0ms); --zcz-atl-local-animation-strength: var(--zcz-atl-date-animation-strength); --zcz-atl-local-animation-strength-negative: var(--zcz-atl-date-animation-strength-negative); transform-origin: center; will-change: translate, rotate, scale, filter; }

.zcz-atl-independent-typing-animation.zcz-atl-independent-typing-trigger-always .zcz-atl-date-hover,
.zcz-atl-independent-typing-animation.zcz-atl-independent-typing-trigger-active .zcz-atl-item.is-active .zcz-atl-date-hover,
.zcz-atl-independent-typing-animation.zcz-atl-independent-typing-trigger-hover .zcz-atl-date-wrap:hover .zcz-atl-date-hover { animation-name: var(--zcz-atl-typing-animation-name); animation-duration: var(--zcz-atl-typing-animation-speed); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: var(--zcz-atl-play-delay, 0ms); --zcz-atl-local-animation-strength: var(--zcz-atl-typing-animation-strength); --zcz-atl-local-animation-strength-negative: var(--zcz-atl-typing-animation-strength-negative); transform-origin: center; will-change: translate, rotate, scale, filter; }

.zcz-atl-independent-title-animation.zcz-atl-independent-title-trigger-always .zcz-atl-title,
.zcz-atl-independent-title-animation.zcz-atl-independent-title-trigger-active .zcz-atl-item.is-active .zcz-atl-title,
.zcz-atl-independent-title-animation.zcz-atl-independent-title-trigger-hover .zcz-atl-item:hover .zcz-atl-title { animation-name: var(--zcz-atl-title-animation-name); animation-duration: var(--zcz-atl-title-animation-speed); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: var(--zcz-atl-play-delay, 0ms); --zcz-atl-local-animation-strength: var(--zcz-atl-title-animation-strength); --zcz-atl-local-animation-strength-negative: var(--zcz-atl-title-animation-strength-negative); transform-origin: center; will-change: translate, rotate, scale, filter; }

.zcz-atl-independent-description-animation.zcz-atl-independent-description-trigger-always .zcz-atl-description,
.zcz-atl-independent-description-animation.zcz-atl-independent-description-trigger-active .zcz-atl-item.is-active .zcz-atl-description,
.zcz-atl-independent-description-animation.zcz-atl-independent-description-trigger-hover .zcz-atl-item:hover .zcz-atl-description { animation-name: var(--zcz-atl-description-animation-name); animation-duration: var(--zcz-atl-description-animation-speed); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: var(--zcz-atl-play-delay, 0ms); --zcz-atl-local-animation-strength: var(--zcz-atl-description-animation-strength); --zcz-atl-local-animation-strength-negative: var(--zcz-atl-description-animation-strength-negative); transform-origin: center; will-change: translate, rotate, scale, filter; }


@keyframes zczAtlIndependentFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 var(--zcz-atl-local-animation-strength-negative); }
}
@keyframes zczAtlIndependentWiggle {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    25% { translate: -2px 0; rotate: -2deg; }
    75% { translate: 2px 0; rotate: 2deg; }
}
@keyframes zczAtlIndependentBounce {
    0%, 100% { translate: 0 0; scale: 1; }
    38% { translate: 0 var(--zcz-atl-local-animation-strength-negative); scale: 1.025; }
    58% { translate: 0 2px; scale: .995; }
}
@keyframes zczAtlIndependentTilt {
    0%, 100% { rotate: 0deg; }
    35% { rotate: -3deg; }
    68% { rotate: 3deg; }
}
@keyframes zczAtlIndependentHeartbeat {
    0%, 60%, 100% { scale: 1; }
    15% { scale: 1.07; }
    30% { scale: 1; }
    42% { scale: 1.035; }
}
@keyframes zczAtlIndependentSwing {
    0%, 100% { rotate: 0deg; translate: 0 0; }
    25% { rotate: -4deg; translate: -2px 0; }
    75% { rotate: 4deg; translate: 2px 0; }
}
@keyframes zczAtlIndependentJelly {
    0%, 100% { scale: 1 1; }
    28% { scale: 1.05 .95; }
    48% { scale: .97 1.03; }
    68% { scale: 1.02 .98; }
}
@keyframes zczAtlIndependentGlowPulse {
    0%, 100% { filter: drop-shadow(0 0 0 transparent); }
    50% { filter: drop-shadow(0 0 var(--zcz-atl-local-animation-strength) var(--zcz-atl-progress-glow)); }
}


/* =========================================================
 * 3D Marker Engine v2 — real internal depth without moving
 * the approved marker center or changing timeline layout.
 * ======================================================= */
.zcz-atl-marker-3d-enabled .zcz-atl-marker {
    --zcz-atl-marker-current-bg: var(--zcz-atl-marker-bg);
    isolation: isolate;
    background: var(--zcz-atl-marker-current-bg);
    transform-style: preserve-3d;
    perspective: 700px;
}

.zcz-atl-marker-3d-enabled .zcz-atl-item.is-active .zcz-atl-marker {
    --zcz-atl-marker-current-bg: var(--zcz-atl-marker-active-bg);
}

.zcz-atl-marker-surface-layer,
.zcz-atl-marker-core-layer {
    position: absolute;
    display: block;
    pointer-events: none;
    border-radius: inherit;
}

.zcz-atl-marker-surface-layer {
    z-index: 0;
    inset: max(1px, var(--zcz-atl-marker-border-width));
}

.zcz-atl-marker-core-layer {
    z-index: 1;
    top: 50%;
    left: 50%;
    width: var(--zcz-atl-marker-core-size);
    height: var(--zcz-atl-marker-core-size);
    transform: translate(-50%, -50%);
}

.zcz-atl-marker-3d-enabled .zcz-atl-marker-inner {
    z-index: 4;
    text-shadow: 0 1px 1px rgba(0,0,0,.18);
}

/* Soft layered depth: a subtle inner bowl plus polished rim. */
.zcz-atl-marker-3d-style-soft .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background: var(--zcz-atl-marker-current-bg);
    box-shadow:
        0 var(--zcz-atl-marker-depth) calc(var(--zcz-atl-marker-depth) + 4px) var(--zcz-atl-marker-depth-color),
        inset 0 1px 1px rgba(255,255,255,.32),
        inset 0 -2px 4px rgba(0,0,0,.18);
}

.zcz-atl-marker-3d-style-soft .zcz-atl-marker-surface-layer {
    background:
        linear-gradient(145deg, var(--zcz-atl-marker-highlight-color) 0%, transparent 34%),
        linear-gradient(325deg, rgba(0,0,0,.14), transparent 44%);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.18),
        inset 0 calc(0px - var(--zcz-atl-marker-inner-depth)) var(--zcz-atl-marker-inner-depth) rgba(0,0,0,.16);
}

.zcz-atl-marker-3d-style-soft .zcz-atl-marker-core-layer {
    background: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.12)), var(--zcz-atl-marker-current-bg);
    box-shadow:
        inset 0 0 calc(var(--zcz-atl-marker-inner-depth) + 4px) var(--zcz-atl-marker-inner-shadow),
        0 1px 1px rgba(255,255,255,.14);
    opacity: .72;
}

/* Concave: clearly recessed inner cavity. */
.zcz-atl-marker-3d-style-concave .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background: var(--zcz-atl-marker-current-bg);
    box-shadow:
        0 var(--zcz-atl-marker-depth) calc(var(--zcz-atl-marker-depth) + 5px) var(--zcz-atl-marker-depth-color),
        inset 0 2px 2px rgba(255,255,255,.28),
        inset 0 -2px 3px rgba(0,0,0,.22);
}

.zcz-atl-marker-3d-style-concave .zcz-atl-marker-surface-layer {
    background: linear-gradient(145deg, rgba(255,255,255,.30), rgba(0,0,0,.13));
    box-shadow:
        inset 0 0 0 max(1px, 2px) rgba(255,255,255,.16),
        inset 0 0 var(--zcz-atl-marker-inner-depth) rgba(0,0,0,.18);
}

.zcz-atl-marker-3d-style-concave .zcz-atl-marker-core-layer {
    background:
        radial-gradient(circle at 50% 72%, rgba(255,255,255,.13), transparent 48%),
        linear-gradient(rgba(0,0,0,.30), rgba(0,0,0,.30)), var(--zcz-atl-marker-current-bg);
    box-shadow:
        inset 0 var(--zcz-atl-marker-inner-depth) calc(var(--zcz-atl-marker-inner-depth) + 4px) var(--zcz-atl-marker-inner-shadow),
        inset 0 calc(0px - var(--zcz-atl-marker-inner-depth)) var(--zcz-atl-marker-inner-depth) rgba(255,255,255,.22),
        0 0 0 1px rgba(255,255,255,.10);
}

/* Dome: convex, rounded cap with internal highlight and falloff. */
.zcz-atl-marker-3d-style-dome .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background: var(--zcz-atl-marker-current-bg);
    box-shadow:
        0 var(--zcz-atl-marker-depth) calc(var(--zcz-atl-marker-depth) + 6px) var(--zcz-atl-marker-depth-color),
        inset calc(0px - var(--zcz-atl-marker-inner-depth)) calc(0px - var(--zcz-atl-marker-inner-depth)) var(--zcz-atl-marker-inner-depth) rgba(255,255,255,.30),
        inset var(--zcz-atl-marker-inner-depth) var(--zcz-atl-marker-inner-depth) calc(var(--zcz-atl-marker-inner-depth) + 3px) rgba(0,0,0,.25);
}

.zcz-atl-marker-3d-style-dome .zcz-atl-marker-surface-layer {
    background:
        radial-gradient(circle at 29% 23%, var(--zcz-atl-marker-highlight-color) 0 8%, rgba(255,255,255,.22) 17%, transparent 38%),
        radial-gradient(circle at 62% 72%, rgba(0,0,0,.24), transparent 54%);
}

.zcz-atl-marker-3d-style-dome .zcz-atl-marker-core-layer {
    width: calc(var(--zcz-atl-marker-core-size) - 10%);
    height: calc(var(--zcz-atl-marker-core-size) - 10%);
    background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.20), transparent 48%);
    box-shadow: inset 0 -2px calc(var(--zcz-atl-marker-inner-depth) + 1px) rgba(0,0,0,.18);
    opacity: .78;
}

/* Deep bevel: broad outer bevel and a deep central platform. */
.zcz-atl-marker-3d-style-deep .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background: var(--zcz-atl-marker-current-bg);
    box-shadow:
        0 var(--zcz-atl-marker-depth) calc(var(--zcz-atl-marker-depth) + 7px) var(--zcz-atl-marker-depth-color),
        inset 0 var(--zcz-atl-marker-inner-depth) calc(var(--zcz-atl-marker-inner-depth) + 2px) rgba(255,255,255,.28),
        inset 0 calc(0px - var(--zcz-atl-marker-inner-depth)) calc(var(--zcz-atl-marker-inner-depth) + 2px) rgba(0,0,0,.32);
}

.zcz-atl-marker-3d-style-deep .zcz-atl-marker-surface-layer {
    background: linear-gradient(145deg, rgba(255,255,255,.30), transparent 34%, rgba(0,0,0,.22));
    box-shadow:
        inset 0 0 0 3px rgba(255,255,255,.10),
        inset 0 0 calc(var(--zcz-atl-marker-inner-depth) + 3px) rgba(0,0,0,.28);
}

.zcz-atl-marker-3d-style-deep .zcz-atl-marker-core-layer {
    background: linear-gradient(rgba(0,0,0,.20), rgba(0,0,0,.20)), var(--zcz-atl-marker-current-bg);
    box-shadow:
        inset 0 var(--zcz-atl-marker-inner-depth) calc(var(--zcz-atl-marker-inner-depth) + 5px) var(--zcz-atl-marker-inner-shadow),
        inset 0 calc(0px - var(--zcz-atl-marker-inner-depth)) var(--zcz-atl-marker-inner-depth) rgba(255,255,255,.18),
        0 0 0 1px rgba(255,255,255,.12),
        0 2px 4px rgba(0,0,0,.18);
}

/* Multi-layer: concentric rim, recessed middle and raised center. */
.zcz-atl-marker-3d-style-layered .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background: var(--zcz-atl-marker-current-bg);
    box-shadow:
        0 var(--zcz-atl-marker-depth) calc(var(--zcz-atl-marker-depth) + 4px) var(--zcz-atl-marker-depth-color),
        inset 0 0 0 2px rgba(255,255,255,.18),
        inset 0 0 0 3px rgba(0,0,0,.13),
        inset 0 0 calc(var(--zcz-atl-marker-inner-depth) + 4px) rgba(0,0,0,.28);
}

.zcz-atl-marker-3d-style-layered .zcz-atl-marker-surface-layer {
    inset: 3px;
    background: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)), var(--zcz-atl-marker-current-bg);
    box-shadow:
        0 0 0 1px rgba(255,255,255,.16),
        inset 0 2px 3px rgba(255,255,255,.22),
        inset 0 -3px 5px rgba(0,0,0,.22);
}

.zcz-atl-marker-3d-style-layered .zcz-atl-marker-core-layer {
    width: calc(var(--zcz-atl-marker-core-size) - 18%);
    height: calc(var(--zcz-atl-marker-core-size) - 18%);
    background: linear-gradient(rgba(0,0,0,.22), rgba(0,0,0,.22)), var(--zcz-atl-marker-current-bg);
    box-shadow:
        0 2px 4px rgba(0,0,0,.24),
        inset 0 -2px 4px rgba(0,0,0,.18),
        inset 0 2px 3px rgba(255,255,255,.22);
}

/* Glass capsule: transparent inner lens with real recessed edge. */
.zcz-atl-marker-3d-style-glass .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background: linear-gradient(rgba(255,255,255,.08), rgba(0,0,0,.08)), var(--zcz-atl-marker-current-bg);
    box-shadow:
        0 var(--zcz-atl-marker-depth) calc(var(--zcz-atl-marker-depth) + 6px) var(--zcz-atl-marker-depth-color),
        inset 0 0 0 1px rgba(255,255,255,.42),
        inset 0 -4px 8px rgba(0,0,0,.18);
    backdrop-filter: blur(5px) saturate(135%);
    -webkit-backdrop-filter: blur(5px) saturate(135%);
}

.zcz-atl-marker-3d-style-glass .zcz-atl-marker-surface-layer {
    background:
        linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,255,255,.08) 34%, transparent 52%),
        radial-gradient(circle at 70% 78%, rgba(0,0,0,.17), transparent 48%);
}

.zcz-atl-marker-3d-style-glass .zcz-atl-marker-core-layer {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.24);
    box-shadow:
        inset 0 var(--zcz-atl-marker-inner-depth) calc(var(--zcz-atl-marker-inner-depth) + 3px) rgba(0,0,0,.22),
        inset 0 calc(0px - var(--zcz-atl-marker-inner-depth)) var(--zcz-atl-marker-inner-depth) rgba(255,255,255,.32),
        0 2px 5px rgba(0,0,0,.12);
}

/* Brushed metal: directional highlights and machined inset core. */
.zcz-atl-marker-3d-style-metal .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background:
        linear-gradient(145deg, rgba(255,255,255,.34), transparent 28%, rgba(0,0,0,.18) 72%),
        var(--zcz-atl-marker-current-bg);
    box-shadow:
        0 var(--zcz-atl-marker-depth) calc(var(--zcz-atl-marker-depth) + 6px) var(--zcz-atl-marker-depth-color),
        inset 0 1px 1px rgba(255,255,255,.52),
        inset 0 -3px 5px rgba(0,0,0,.30);
}

.zcz-atl-marker-3d-style-metal .zcz-atl-marker-surface-layer {
    background: repeating-linear-gradient(100deg, rgba(255,255,255,.12) 0 1px, rgba(0,0,0,.035) 1px 2px, transparent 2px 4px);
    opacity: .66;
}

.zcz-atl-marker-3d-style-metal .zcz-atl-marker-core-layer {
    background:
        linear-gradient(145deg, rgba(255,255,255,.24), transparent 34%, rgba(0,0,0,.24)),
        linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)), var(--zcz-atl-marker-current-bg);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.23),
        inset 0 var(--zcz-atl-marker-inner-depth) calc(var(--zcz-atl-marker-inner-depth) + 3px) rgba(0,0,0,.30),
        0 2px 3px rgba(0,0,0,.20);
}

/* Faceted gem: multiple angular planes and a deep central jewel. */
.zcz-atl-marker-3d-style-gem .zcz-atl-marker:not(.zcz-atl-shape-ring) {
    background: var(--zcz-atl-marker-current-bg);
    box-shadow:
        0 var(--zcz-atl-marker-depth) calc(var(--zcz-atl-marker-depth) + 8px) var(--zcz-atl-marker-depth-color),
        inset 0 0 0 1px rgba(255,255,255,.28),
        inset 0 -4px 7px rgba(0,0,0,.25);
}

.zcz-atl-marker-3d-style-gem .zcz-atl-marker-surface-layer {
    background:
        conic-gradient(from 18deg at 50% 50%, rgba(255,255,255,.46), transparent 13%, rgba(0,0,0,.18) 25%, rgba(255,255,255,.16) 39%, rgba(0,0,0,.22) 54%, rgba(255,255,255,.28) 72%, transparent 87%, rgba(255,255,255,.46)),
        radial-gradient(circle at 36% 28%, rgba(255,255,255,.38), transparent 36%);
    box-shadow: inset 0 0 calc(var(--zcz-atl-marker-inner-depth) + 2px) rgba(0,0,0,.18);
}

.zcz-atl-marker-3d-style-gem .zcz-atl-marker-core-layer {
    width: calc(var(--zcz-atl-marker-core-size) - 22%);
    height: calc(var(--zcz-atl-marker-core-size) - 22%);
    background:
        conic-gradient(from 45deg, rgba(255,255,255,.34), rgba(0,0,0,.22), rgba(255,255,255,.12), rgba(0,0,0,.28), rgba(255,255,255,.34)),
        var(--zcz-atl-marker-current-bg);
    box-shadow:
        inset 0 var(--zcz-atl-marker-inner-depth) calc(var(--zcz-atl-marker-inner-depth) + 3px) var(--zcz-atl-marker-inner-shadow),
        0 2px 4px rgba(0,0,0,.24);
}

/* 3D ring support: keeps the ring hollow while adding bevel and depth. */
.zcz-atl-marker-3d-enabled .zcz-atl-marker.zcz-atl-shape-ring {
    --zcz-atl-ring-width: max(3px, var(--zcz-atl-marker-inner-depth));
    background: transparent !important;
    color: var(--zcz-atl-marker-current-bg);
    box-shadow:
        inset 0 0 0 var(--zcz-atl-ring-width) var(--zcz-atl-marker-current-bg),
        inset 0 0 calc(var(--zcz-atl-marker-inner-depth) + 3px) var(--zcz-atl-marker-inner-shadow),
        0 var(--zcz-atl-marker-depth) calc(var(--zcz-atl-marker-depth) + 4px) var(--zcz-atl-marker-depth-color);
}

.zcz-atl-marker-3d-enabled .zcz-atl-marker.zcz-atl-shape-ring .zcz-atl-marker-surface-layer {
    inset: 0;
    background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.42), transparent 38%);
}

.zcz-atl-marker-3d-enabled .zcz-atl-marker.zcz-atl-shape-ring .zcz-atl-marker-core-layer {
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
    opacity: .55;
}

/* Each style also changes the lower physical depth layer. */
.zcz-atl-marker-3d-style-concave .zcz-atl-marker-depth-layer { opacity: .55; filter: blur(.7px) drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.zcz-atl-marker-3d-style-dome .zcz-atl-marker-depth-layer { opacity: .76; filter: blur(.25px) drop-shadow(0 4px 7px rgba(0,0,0,.23)); }
.zcz-atl-marker-3d-style-layered .zcz-atl-marker-depth-layer { opacity: .92; box-shadow: 0 2px 0 rgba(255,255,255,.08), 0 4px 7px rgba(0,0,0,.20); }
.zcz-atl-marker-3d-style-gem .zcz-atl-marker-depth-layer { opacity: .88; filter: drop-shadow(0 5px 8px rgba(0,0,0,.26)); }


/* Tablet-only per-item content fine tuning.
 * This layer is additive to Elementor's native tablet value and never changes
 * desktop/mobile values. */
@media (min-width: 768px) and (max-width: 1024px) {
    .zcz-atl-item {
        --zcz-atl-content-x: calc(var(--zcz-atl-content-responsive-x) + var(--zcz-atl-tablet-content-extra-x, 0px));
        --zcz-atl-content-y: calc(var(--zcz-atl-content-responsive-y) + var(--zcz-atl-tablet-content-extra-y, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .zcz-atl *,
    .zcz-atl *::before,
    .zcz-atl *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* Mobile layout rules are printed per widget at its selected custom breakpoint. */