:root {
    --dkie-black: #050507;
    --dkie-white: #f7f7f7;
}

.dkie-scene {
    --dkie-p: 0;
    --dkie-accent: #ef3333;
    position: relative;
    height: var(--dkie-height, 430vh);
    min-height: 280vh;
    background: #050507;
    color: var(--dkie-white);
    overflow: visible;
    isolation: isolate;
}

.dkie-scene *,
.dkie-scene *::before,
.dkie-scene *::after {
    box-sizing: border-box;
}

.dkie-sticky {
    position: sticky;
    top: 0;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 55%, rgba(255,255,255,0.11), transparent 26%),
        radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--dkie-accent) 22%, transparent), transparent 22%),
        radial-gradient(circle at 16% 78%, rgba(255,255,255,0.08), transparent 28%),
        linear-gradient(180deg, #0c0c10 0%, #050507 42%, #010102 100%);
    perspective: 1200px;
    transform-style: preserve-3d;
}

.dkie-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: calc(0.32 + (var(--dkie-p) * 0.35));
}

.dkie-bg-grid {
    position: absolute;
    inset: -20%;
    z-index: 2;
    background-image:
        linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 82px 82px;
    transform: rotateX(64deg) translateY(calc(220px - var(--dkie-p) * 520px)) translateZ(-320px);
    opacity: calc(0.11 + var(--dkie-p) * 0.16);
    filter: blur(0.2px);
    transform-origin: center bottom;
}

.dkie-bg-orbit {
    position: absolute;
    z-index: 2;
    width: min(70vw, 920px);
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    pointer-events: none;
    box-shadow:
        inset 0 0 60px rgba(255,255,255,0.06),
        0 0 70px color-mix(in srgb, var(--dkie-accent) 22%, transparent);
}

.dkie-bg-orbit-a {
    transform: translate(-50%, -50%) rotateX(68deg) rotateZ(calc(var(--dkie-p) * 140deg));
    opacity: 0.42;
}

.dkie-bg-orbit-b {
    width: min(52vw, 660px);
    transform: translate(-50%, -50%) rotateX(76deg) rotateY(24deg) rotateZ(calc(var(--dkie-p) * -190deg));
    opacity: 0.28;
}

.dkie-layer {
    position: absolute;
    z-index: 4;
    will-change: transform, opacity, filter;
}

.dkie-copy {
    left: clamp(22px, 6vw, 90px);
    top: 50%;
    width: min(520px, 42vw);
    transform: translate3d(0, calc(-50% + var(--dkie-p) * -120px), calc(120px - var(--dkie-p) * 360px));
    opacity: calc(1 - max(0, (var(--dkie-p) - 0.18)) * 1.65);
    z-index: 8;
}

.dkie-eyebrow {
    font: 700 11px/1.2 Arial, sans-serif;
    letter-spacing: 0.34em;
    color: var(--dkie-accent);
    margin: 0 0 18px;
    text-transform: uppercase;
}

.dkie-title {
    font: 800 clamp(42px, 6.4vw, 112px)/0.9 Arial, sans-serif;
    letter-spacing: -0.07em;
    margin: 0;
    text-transform: uppercase;
    max-width: 10ch;
    text-shadow: 0 0 48px rgba(255,255,255,0.08);
}

.dkie-subtitle {
    max-width: 44ch;
    margin: 22px 0 0;
    color: rgba(255,255,255,0.72);
    font: 400 16px/1.65 Arial, sans-serif;
}

.dkie-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--dkie-accent) 78%, #fff), var(--dkie-accent));
    box-shadow: 0 20px 70px color-mix(in srgb, var(--dkie-accent) 28%, transparent);
    text-decoration: none;
    font: 800 11px/1 Arial, sans-serif;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    transition: transform .25s ease, filter .25s ease;
}

.dkie-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
    color: #fff;
}

.dkie-object-wrap {
    left: 50%;
    top: 50%;
    width: min(44vw, 580px);
    aspect-ratio: 1 / 1;
    z-index: 5;
    transform-style: preserve-3d;
    transform:
        translate3d(-50%, -50%, 0)
        rotateX(calc(58deg - var(--dkie-p) * 45deg))
        rotateY(calc(-28deg + var(--dkie-p) * 210deg))
        rotateZ(calc(var(--dkie-p) * 120deg))
        scale(calc(0.72 + var(--dkie-p) * 0.72));
    filter: drop-shadow(0 60px 100px rgba(0,0,0,0.75));
}

.dkie-holo-ring {
    position: absolute;
    inset: 7%;
    border: 2px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    box-shadow:
        0 0 38px color-mix(in srgb, var(--dkie-accent) 23%, transparent),
        inset 0 0 36px rgba(255,255,255,0.09);
    transform-style: preserve-3d;
}

.dkie-ring-outer {
    transform: rotateX(72deg) rotateY(calc(var(--dkie-p) * 180deg));
}

.dkie-ring-mid {
    inset: 22%;
    border-color: color-mix(in srgb, var(--dkie-accent) 58%, rgba(255,255,255,0.2));
    transform: rotateY(70deg) rotateZ(calc(var(--dkie-p) * -240deg));
}

.dkie-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 46%;
    aspect-ratio: 1 / 1;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(calc(var(--dkie-p) * 360deg));
}

.dkie-core::before,
.dkie-core::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 22%;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.04)),
        radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--dkie-accent) 52%, transparent), transparent 45%);
    border: 1px solid rgba(255,255,255,0.22);
    box-shadow:
        inset 0 0 44px rgba(255,255,255,0.12),
        0 26px 80px rgba(0,0,0,0.5),
        0 0 70px color-mix(in srgb, var(--dkie-accent) 35%, transparent);
    backdrop-filter: blur(18px);
}

.dkie-core::after {
    transform: rotateX(90deg);
    opacity: 0.52;
}

.dkie-core-face {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.88);
    font: 900 clamp(16px, 2vw, 28px)/1 Arial, sans-serif;
    letter-spacing: -0.08em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 26px rgba(255,255,255,0.25);
    backface-visibility: hidden;
}

.dkie-core-back {
    transform: rotateY(180deg);
}

.dkie-card {
    width: min(360px, 30vw);
    min-height: 148px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 28px;
    background: rgba(255,255,255,0.095);
    box-shadow: 0 30px 100px rgba(0,0,0,0.42);
    backdrop-filter: blur(20px) saturate(150%);
    padding: 26px;
    z-index: 7;
    overflow: hidden;
}

.dkie-card::before {
    content: '';
    position: absolute;
    inset: -60% -30% auto;
    height: 130%;
    background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 55%);
    opacity: 0.72;
    transform: translateY(calc(var(--dkie-p) * 120px));
    pointer-events: none;
}

.dkie-card span {
    display: block;
    margin-bottom: 34px;
    color: var(--dkie-accent);
    font: 800 11px/1 Arial, sans-serif;
    letter-spacing: 0.22em;
}

.dkie-card strong {
    position: relative;
    z-index: 2;
    display: block;
    color: rgba(255,255,255,0.9);
    font: 700 clamp(17px, 1.6vw, 24px)/1.14 Arial, sans-serif;
    letter-spacing: -0.04em;
}

.dkie-card-1 {
    left: 57%;
    top: 16%;
    transform:
        translate3d(calc(-340px + var(--dkie-p) * 40px), calc(-90px + var(--dkie-p) * 120px), calc(-520px + var(--dkie-p) * 1020px))
        rotateY(calc(-32deg + var(--dkie-p) * 22deg))
        rotateZ(calc(-8deg + var(--dkie-p) * 12deg));
    opacity: calc(min(1, var(--dkie-p) * 4) - max(0, var(--dkie-p) - .55) * 2.2);
}

.dkie-card-2 {
    right: 7%;
    top: 52%;
    transform:
        translate3d(calc(420px - var(--dkie-p) * 690px), calc(-50% + var(--dkie-p) * -40px), calc(-760px + var(--dkie-p) * 1180px))
        rotateY(calc(38deg - var(--dkie-p) * 44deg))
        rotateZ(calc(8deg - var(--dkie-p) * 10deg));
    opacity: calc(min(1, max(0, var(--dkie-p) - .16) * 4) - max(0, var(--dkie-p) - .78) * 2.7);
}

.dkie-card-3 {
    left: 8%;
    bottom: 12%;
    transform:
        translate3d(calc(-460px + var(--dkie-p) * 720px), calc(110px - var(--dkie-p) * 140px), calc(-860px + var(--dkie-p) * 1280px))
        rotateY(calc(-46deg + var(--dkie-p) * 50deg))
        rotateZ(calc(-10deg + var(--dkie-p) * 8deg));
    opacity: calc(min(1, max(0, var(--dkie-p) - .34) * 4) - max(0, var(--dkie-p) - .93) * 4);
}

.dkie-progress {
    position: absolute;
    z-index: 12;
    right: clamp(18px, 3vw, 44px);
    top: 50%;
    width: 3px;
    height: 140px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    transform: translateY(-50%);
    overflow: hidden;
}

.dkie-progress i {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(var(--dkie-p) * 100%);
    border-radius: inherit;
    background: var(--dkie-accent);
    box-shadow: 0 0 30px var(--dkie-accent);
}

.dkie-theme-light .dkie-sticky {
    color: #08080a;
    background:
        radial-gradient(circle at 50% 55%, rgba(255,255,255,0.8), transparent 28%),
        radial-gradient(circle at 70% 18%, color-mix(in srgb, var(--dkie-accent) 16%, transparent), transparent 22%),
        linear-gradient(180deg, #f4f4f6 0%, #ececef 44%, #f8f8f8 100%);
}

.dkie-theme-light .dkie-title,
.dkie-theme-light .dkie-card strong,
.dkie-theme-light .dkie-core-face {
    color: rgba(0,0,0,0.86);
}

.dkie-theme-light .dkie-subtitle {
    color: rgba(0,0,0,0.66);
}

.dkie-theme-light .dkie-card {
    background: rgba(255,255,255,0.58);
    border-color: rgba(255,255,255,0.72);
    box-shadow: 0 30px 100px rgba(30,30,30,0.16);
}

@media (max-width: 1024px) {
    .dkie-copy {
        width: min(560px, 76vw);
        top: 32%;
    }

    .dkie-object-wrap {
        width: min(68vw, 520px);
        top: 56%;
    }

    .dkie-card {
        width: min(310px, 38vw);
    }
}

@media (max-width: 767px) {
    .dkie-scene {
        min-height: 330vh;
    }

    .dkie-sticky {
        min-height: 100svh;
        height: 100svh;
    }

    .dkie-copy {
        left: 22px;
        right: 22px;
        top: 18%;
        width: auto;
        transform: translate3d(0, calc(-50% + var(--dkie-p) * -80px), 0);
    }

    .dkie-title {
        font-size: clamp(34px, 13vw, 58px);
        max-width: 11ch;
    }

    .dkie-subtitle {
        font-size: 14px;
        max-width: 30ch;
    }

    .dkie-object-wrap {
        width: min(94vw, 430px);
        top: 56%;
        transform:
            translate3d(-50%, -50%, 0)
            rotateX(calc(62deg - var(--dkie-p) * 35deg))
            rotateY(calc(-18deg + var(--dkie-p) * 160deg))
            rotateZ(calc(var(--dkie-p) * 110deg))
            scale(calc(0.78 + var(--dkie-p) * 0.36));
    }

    .dkie-card {
        width: calc(100vw - 44px);
        min-height: 110px;
        padding: 20px;
        border-radius: 22px;
    }

    .dkie-card span {
        margin-bottom: 18px;
    }

    .dkie-card-1,
    .dkie-card-2,
    .dkie-card-3 {
        left: 22px;
        right: auto;
        top: auto;
        bottom: 26px;
        transform: translate3d(0, 0, 0) scale(calc(.92 + var(--dkie-p) * .08));
    }

    .dkie-card-1 { opacity: calc(min(1, var(--dkie-p) * 5) - max(0, var(--dkie-p) - .36) * 7); }
    .dkie-card-2 { opacity: calc(min(1, max(0, var(--dkie-p) - .34) * 7) - max(0, var(--dkie-p) - .68) * 7); }
    .dkie-card-3 { opacity: calc(min(1, max(0, var(--dkie-p) - .66) * 7)); }

    .dkie-progress {
        right: 16px;
        height: 100px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dkie-scene {
        height: auto !important;
        min-height: 100vh;
    }

    .dkie-sticky {
        position: relative;
    }

    .dkie-layer,
    .dkie-bg-grid,
    .dkie-bg-orbit {
        transition: none !important;
        transform: none !important;
    }

    .dkie-copy {
        opacity: 1;
        transform: translateY(-50%) !important;
    }

    .dkie-object-wrap {
        transform: translate(-50%, -50%) scale(.85) !important;
    }
}

/* v0.1.1 - Full bleed + dedicated canvas template support */
.dkie-full-bleed {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

body.dkie-canvas-template {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    background: #050507;
    color: #f7f7f7;
}

body.dkie-canvas-template #wpadminbar {
    z-index: 999999;
}

.dkie-canvas-page,
.dkie-canvas-content {
    display: block;
    width: 100vw;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow-x: clip;
    background: #050507;
}

.dkie-canvas-content > * {
    max-width: none;
}

body.dkie-canvas-template .dkie-scene {
    width: 100vw;
    max-width: 100vw;
    margin-left: 0;
    margin-right: 0;
}

@supports not (overflow: clip) {
    .dkie-canvas-page,
    .dkie-canvas-content {
        overflow-x: hidden;
    }
}

/* v0.1.2 - Canvas hardening: no theme/block offsets, robust full viewport mode */
html.dkie-canvas-html,
html.dkie-canvas-html body {
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
}

body.dkie-canvas-template {
    overflow-y: auto !important;
}

body.dkie-canvas-template .dkie-canvas-page,
body.dkie-canvas-template .dkie-canvas-content {
    position: relative;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

body.dkie-canvas-template .dkie-scene,
body.dkie-canvas-template .dkie-scene.dkie-full-bleed {
    position: relative;
    display: block;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
}

body.dkie-canvas-template .dkie-sticky {
    position: sticky;
    top: 0;
    width: 100vw;
}


/* v0.1.3 - Canvas fixed-stage scroll engine
   In the dedicated Canvas template the scene is treated like an app: the stage is fixed to
   the viewport and the parent section only provides scroll distance. This avoids theme/
   wrapper/overflow quirks that can break position: sticky. */
html.dkie-canvas-html,
body.dkie-canvas-template {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    background: #050507 !important;
}

body.dkie-canvas-template {
    overflow-x: hidden;
}

body.dkie-canvas-template .dkie-canvas-page,
body.dkie-canvas-template .dkie-canvas-content {
    display: block;
    width: 100%;
    max-width: none !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #050507 !important;
}

body.dkie-canvas-template .dkie-scene {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

body.dkie-canvas-template .dkie-sticky {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    z-index: 1;
}

@supports (height: 100svh) {
    body.dkie-canvas-template .dkie-sticky {
        height: 100svh !important;
        min-height: 100svh !important;
    }
}

body.admin-bar.dkie-canvas-template .dkie-sticky {
    top: 32px !important;
    height: calc(100vh - 32px) !important;
    min-height: calc(100vh - 32px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar.dkie-canvas-template .dkie-sticky {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
        min-height: calc(100vh - 46px) !important;
    }
}

@media (max-width: 600px) {
    body.admin-bar.dkie-canvas-template .dkie-sticky {
        top: 0 !important;
        height: 100vh !important;
        min-height: 100vh !important;
    }
}

/* v0.1.4 - Composition Pass: safer cinematic framing, final beat and polished UI rail */
.dkie-sticky::before,
.dkie-sticky::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dkie-sticky::before {
    z-index: 3;
    background:
        radial-gradient(circle at 62% 48%, color-mix(in srgb, var(--dkie-accent) 18%, transparent), transparent 28%),
        linear-gradient(90deg, rgba(0,0,0,0.72) 0%, transparent 28%, transparent 72%, rgba(0,0,0,0.42) 100%);
    opacity: calc(0.48 + var(--dkie-p) * 0.16);
}

.dkie-sticky::after {
    z-index: 11;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.38), transparent 22%, transparent 74%, rgba(0,0,0,0.62)),
        radial-gradient(circle at 50% 50%, transparent 30%, rgba(0,0,0,0.42) 100%);
    mix-blend-mode: multiply;
    opacity: .9;
}

.dkie-copy {
    left: max(34px, calc((100vw - 1540px) / 2 + 96px));
    top: 52%;
    width: min(560px, 36vw);
    transform:
        translate3d(calc(var(--dkie-p) * -34px), calc(-50% + var(--dkie-p) * -98px), 0)
        scale(calc(1 - var(--dkie-p) * .055));
    opacity: calc(1 - max(0, (var(--dkie-p) - 0.24)) * 1.75);
}

.dkie-title {
    font-size: clamp(48px, 5.65vw, 106px);
    max-width: 11.2ch;
    opacity: .92;
}

.dkie-subtitle {
    max-width: 46ch;
    text-shadow: 0 14px 46px rgba(0,0,0,.55);
}

.dkie-object-wrap {
    left: 60%;
    top: 51%;
    width: min(48vw, 690px);
    transform:
        translate3d(-50%, -50%, 0)
        rotateX(calc(58deg - var(--dkie-p) * 40deg))
        rotateY(calc(-28deg + var(--dkie-p) * 205deg))
        rotateZ(calc(var(--dkie-p) * 112deg))
        scale(calc(0.70 + var(--dkie-p) * 0.48));
    filter:
        drop-shadow(0 72px 120px rgba(0,0,0,0.78))
        saturate(calc(1 + var(--dkie-p) * .18));
}

.dkie-bg-orbit-a {
    width: min(62vw, 940px);
    transform: translate(-50%, -50%) rotateX(68deg) rotateZ(calc(var(--dkie-p) * 152deg)) scale(calc(.86 + var(--dkie-p) * .2));
}

.dkie-bg-orbit-b {
    transform: translate(-50%, -50%) rotateX(76deg) rotateY(24deg) rotateZ(calc(var(--dkie-p) * -220deg)) scale(calc(.9 + var(--dkie-p) * .16));
}

.dkie-card {
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.055)),
        color-mix(in srgb, var(--dkie-accent) 7%, transparent);
    box-shadow:
        0 34px 120px rgba(0,0,0,0.48),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.dkie-card-1 {
    left: 50%;
    top: 15%;
    transform:
        translate3d(calc(-240px + var(--dkie-p) * 60px), calc(-130px + var(--dkie-p) * 126px), calc(-560px + var(--dkie-p) * 1010px))
        rotateY(calc(-34deg + var(--dkie-p) * 24deg))
        rotateZ(calc(-9deg + var(--dkie-p) * 11deg));
}

.dkie-card-2 {
    right: max(34px, calc((100vw - 1540px) / 2 + 72px));
    top: 50%;
    transform:
        translate3d(calc(360px - var(--dkie-p) * 650px), calc(-50% + var(--dkie-p) * -16px), calc(-760px + var(--dkie-p) * 1180px))
        rotateY(calc(36deg - var(--dkie-p) * 42deg))
        rotateZ(calc(8deg - var(--dkie-p) * 10deg));
}

.dkie-card-3 {
    left: max(34px, calc((100vw - 1540px) / 2 + 92px));
    bottom: 10%;
    transform:
        translate3d(calc(-420px + var(--dkie-p) * 650px), calc(118px - var(--dkie-p) * 132px), calc(-860px + var(--dkie-p) * 1240px))
        rotateY(calc(-42deg + var(--dkie-p) * 46deg))
        rotateZ(calc(-10deg + var(--dkie-p) * 8deg));
}

.dkie-final {
    right: max(34px, calc((100vw - 1540px) / 2 + 92px));
    bottom: clamp(34px, 8vh, 86px);
    width: min(510px, 34vw);
    z-index: 9;
    padding: 28px 30px 30px;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 32px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.055)),
        rgba(5,5,7,.48);
    box-shadow:
        0 34px 130px rgba(0,0,0,.55),
        0 0 90px color-mix(in srgb, var(--dkie-accent) 18%, transparent),
        inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(22px) saturate(150%);
    transform: translate3d(0, calc(42px - var(--dkie-p) * 62px), 0) scale(calc(.94 + var(--dkie-p) * .06));
    opacity: calc(min(1, max(0, var(--dkie-p) - .76) * 5.2));
}

.dkie-final span {
    display: block;
    margin: 0 0 12px;
    color: var(--dkie-accent);
    font: 800 10px/1 Arial, sans-serif;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.dkie-final strong {
    display: block;
    color: rgba(255,255,255,.94);
    font: 800 clamp(24px, 2.2vw, 38px)/.98 Arial, sans-serif;
    letter-spacing: -.055em;
}

.dkie-final p {
    margin: 16px 0 0;
    color: rgba(255,255,255,.68);
    font: 400 15px/1.58 Arial, sans-serif;
}

.dkie-final-cta {
    display: inline-flex;
    margin-top: 18px;
    color: #fff;
    text-decoration: none;
    font: 800 10px/1 Arial, sans-serif;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.dkie-scroll-hint {
    position: absolute;
    left: max(34px, calc((100vw - 1540px) / 2 + 96px));
    bottom: clamp(30px, 6vh, 66px);
    z-index: 12;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.52);
    font: 800 10px/1 Arial, sans-serif;
    letter-spacing: .24em;
    opacity: calc(1 - min(1, var(--dkie-p) * 7));
    transform: translateY(calc(var(--dkie-p) * 18px));
}

.dkie-scroll-hint span {
    width: 38px;
    height: 1px;
    background: linear-gradient(90deg, var(--dkie-accent), transparent);
    box-shadow: 0 0 20px var(--dkie-accent);
}

.dkie-progress {
    width: 5px;
    height: min(28vh, 210px);
    background: rgba(255,255,255,0.10);
    overflow: visible;
}

.dkie-progress::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -15px;
    width: 1px;
    height: calc(100% + 30px);
    background: rgba(255,255,255,.14);
    transform: translateX(-50%);
}

.dkie-progress i {
    width: 5px;
    background: linear-gradient(180deg, #fff, var(--dkie-accent));
    z-index: 2;
}

.dkie-progress b {
    position: absolute;
    left: 50%;
    width: 11px;
    height: 11px;
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 50%;
    background: #050507;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.dkie-progress b:nth-child(1) { top: 0; }
.dkie-progress b:nth-child(2) { top: 33.333%; }
.dkie-progress b:nth-child(3) { top: 66.666%; }
.dkie-progress b:nth-child(4) { top: 100%; }

.dkie-scene.dkie-stage-1 .dkie-progress b:nth-child(1),
.dkie-scene.dkie-stage-2 .dkie-progress b:nth-child(2),
.dkie-scene.dkie-stage-3 .dkie-progress b:nth-child(3),
.dkie-scene.dkie-stage-4 .dkie-progress b:nth-child(4) {
    border-color: var(--dkie-accent);
    box-shadow: 0 0 24px var(--dkie-accent);
}

body.dkie-canvas-template .dkie-copy {
    left: max(42px, calc((100vw - 1540px) / 2 + 118px));
}

body.dkie-canvas-template .dkie-object-wrap {
    left: 61%;
}

@media (max-width: 1180px) {
    .dkie-copy {
        left: clamp(28px, 6vw, 74px);
        width: min(560px, 46vw);
    }
    .dkie-object-wrap {
        left: 63%;
        width: min(56vw, 620px);
    }
    .dkie-final {
        width: min(460px, 40vw);
    }
}

@media (max-width: 767px) {
    .dkie-sticky::before {
        background:
            radial-gradient(circle at 56% 56%, color-mix(in srgb, var(--dkie-accent) 15%, transparent), transparent 34%),
            linear-gradient(180deg, rgba(0,0,0,.72), transparent 35%, rgba(0,0,0,.72));
    }
    .dkie-copy,
    body.dkie-canvas-template .dkie-copy {
        left: 22px;
        right: 22px;
        top: 22%;
        width: auto;
    }
    .dkie-object-wrap,
    body.dkie-canvas-template .dkie-object-wrap {
        left: 50%;
        width: min(92vw, 430px);
    }
    .dkie-final {
        left: 22px;
        right: 22px;
        bottom: 24px;
        width: auto;
        padding: 22px;
        border-radius: 24px;
    }
    .dkie-final strong {
        font-size: clamp(22px, 7vw, 32px);
    }
    .dkie-scroll-hint {
        left: 22px;
        bottom: 20px;
    }
}


/* v0.1.5 - Sharp DIGIKROM Identity Pass
   DIGIKROM is angular: panels and CTA use cut-corner geometry instead of soft/pill UI.
   Organic elements such as orbit rings and particles stay round because they describe motion. */
.dkie-scene {
    --dkie-cut-sm: 12px;
    --dkie-cut-md: 20px;
    --dkie-cut-lg: 28px;
}

.dkie-cta,
.dkie-final-cta {
    border-radius: 0 !important;
    clip-path: polygon(var(--dkie-cut-sm) 0, 100% 0, calc(100% - var(--dkie-cut-sm)) 100%, 0 100%);
}

.dkie-cta {
    min-height: 48px;
    padding-left: 26px;
    padding-right: 26px;
    border: 1px solid color-mix(in srgb, var(--dkie-accent) 72%, rgba(255,255,255,.32));
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--dkie-accent) 78%, #fff), var(--dkie-accent) 58%, color-mix(in srgb, var(--dkie-accent) 78%, #000));
}

.dkie-card,
.dkie-final {
    border-radius: 0 !important;
    clip-path: polygon(
        var(--dkie-cut-md) 0,
        100% 0,
        100% calc(100% - var(--dkie-cut-md)),
        calc(100% - var(--dkie-cut-md)) 100%,
        0 100%,
        0 var(--dkie-cut-md)
    );
}

.dkie-card::after,
.dkie-final::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,.46) 0 1px, transparent 1px 100%) top left / 68px 68px no-repeat,
        linear-gradient(315deg, color-mix(in srgb, var(--dkie-accent) 72%, rgba(255,255,255,.24)) 0 1px, transparent 1px 100%) bottom right / 78px 78px no-repeat;
    opacity: .75;
    z-index: 3;
}

.dkie-card > *,
.dkie-final > * {
    position: relative;
    z-index: 4;
}

.dkie-core::before,
.dkie-core::after {
    border-radius: 0 !important;
    clip-path: polygon(
        var(--dkie-cut-sm) 0,
        100% 0,
        100% calc(100% - var(--dkie-cut-sm)),
        calc(100% - var(--dkie-cut-sm)) 100%,
        0 100%,
        0 var(--dkie-cut-sm)
    );
}

.dkie-progress,
.dkie-progress i {
    border-radius: 0 !important;
}

.dkie-progress b {
    border-radius: 0 !important;
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

@media (max-width: 767px) {
    .dkie-scene {
        --dkie-cut-md: 16px;
        --dkie-cut-lg: 20px;
    }

    .dkie-card,
    .dkie-final {
        border-radius: 0 !important;
    }
}


/* v0.1.6 - Deep Scene Director
   Longer scroll, five stage timeline, stronger depth stack and a technical spine object.
   Still no external JS libraries and no 3D/GLB dependency. */
.dkie-scene {
    min-height: 520vh;
    --dkie-cut-xs: 7px;
    --dkie-depth-boost: 1;
}

.dkie-depth-deep {
    --dkie-depth-boost: 1.22;
}

.dkie-sticky {
    perspective: 1700px;
    perspective-origin: 57% 48%;
}

.dkie-sticky::before {
    background:
        radial-gradient(circle at 61% 48%, color-mix(in srgb, var(--dkie-accent) 25%, transparent), transparent 30%),
        radial-gradient(circle at 46% 58%, rgba(255,255,255,.075), transparent 24%),
        linear-gradient(90deg, rgba(0,0,0,0.80) 0%, transparent 30%, transparent 68%, rgba(0,0,0,0.52) 100%);
}

.dkie-depth-stack {
    position: absolute;
    inset: -10vh -10vw;
    z-index: 3;
    pointer-events: none;
    transform-style: preserve-3d;
    transform: rotateX(58deg) rotateZ(calc(-8deg + var(--dkie-p) * 18deg));
    opacity: .86;
}

.dkie-depth-plane,
.dkie-depth-beam {
    position: absolute;
    display: block;
    transform-style: preserve-3d;
    will-change: transform, opacity, filter;
}

.dkie-depth-plane {
    left: 50%;
    top: 50%;
    width: min(72vw, 1060px);
    height: clamp(120px, 18vh, 220px);
    border: 1px solid rgba(255,255,255,.11);
    background:
        linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.045) 12% 12.25%, transparent 12.25% 100%),
        linear-gradient(135deg, rgba(255,255,255,.055), color-mix(in srgb, var(--dkie-accent) 8%, transparent));
    clip-path: polygon(28px 0, 100% 0, calc(100% - 28px) 100%, 0 100%);
    box-shadow:
        0 0 80px color-mix(in srgb, var(--dkie-accent) 10%, transparent),
        inset 0 0 36px rgba(255,255,255,.045);
    filter: blur(calc(var(--dkie-plane-blur, 0px)));
}

.dkie-depth-plane-1 {
    --dkie-plane-blur: 1.6px;
    transform: translate3d(-62%, -160%, calc(-860px + var(--dkie-p) * 1320px)) rotateY(-34deg) rotateZ(-10deg) scale(1.08);
    opacity: calc(.08 + min(1, var(--dkie-p) * 2.4) * .24);
}

.dkie-depth-plane-2 {
    --dkie-plane-blur: .9px;
    transform: translate3d(-35%, -62%, calc(-640px + var(--dkie-p) * 1260px)) rotateY(32deg) rotateZ(7deg) scale(.92);
    opacity: calc(.10 + min(1, max(0, var(--dkie-p) - .08) * 2.6) * .28);
}

.dkie-depth-plane-3 {
    --dkie-plane-blur: .4px;
    transform: translate3d(-54%, 42%, calc(-430px + var(--dkie-p) * 1160px)) rotateY(-18deg) rotateZ(-4deg) scale(1.05);
    opacity: calc(.12 + min(1, max(0, var(--dkie-p) - .22) * 2.7) * .30);
}

.dkie-depth-plane-4 {
    --dkie-plane-blur: 1.3px;
    transform: translate3d(-18%, 136%, calc(-760px + var(--dkie-p) * 1440px)) rotateY(42deg) rotateZ(12deg) scale(1.18);
    opacity: calc(.08 + min(1, max(0, var(--dkie-p) - .38) * 3) * .28);
}

.dkie-depth-plane-5 {
    --dkie-plane-blur: 2.8px;
    transform: translate3d(-75%, 22%, calc(-1100px + var(--dkie-p) * 1720px)) rotateY(-52deg) rotateZ(-18deg) scale(1.32);
    opacity: calc(.07 + min(1, max(0, var(--dkie-p) - .58) * 3.5) * .20);
}

.dkie-depth-beam {
    left: 52%;
    top: 50%;
    width: min(92vw, 1380px);
    height: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--dkie-accent) 54%, #fff), transparent);
    box-shadow: 0 0 44px color-mix(in srgb, var(--dkie-accent) 46%, transparent);
    opacity: calc(.08 + var(--dkie-p) * .26);
}

.dkie-depth-beam-1 {
    transform: translate3d(-50%, -50%, calc(-740px + var(--dkie-p) * 980px)) rotateZ(-16deg) rotateY(22deg);
}

.dkie-depth-beam-2 {
    transform: translate3d(-50%, -50%, calc(-940px + var(--dkie-p) * 1440px)) rotateZ(19deg) rotateY(-34deg);
}

.dkie-copy {
    opacity: calc(1 - max(0, (var(--dkie-p) - 0.16)) * 2.65);
}

.dkie-object-wrap,
body.dkie-canvas-template .dkie-object-wrap {
    left: 60%;
    top: 50%;
    width: min(54vw, 820px);
    transform:
        translate3d(-50%, -50%, calc(-160px + var(--dkie-p) * 340px))
        rotateX(calc(62deg - var(--dkie-p) * 52deg))
        rotateY(calc(-40deg + var(--dkie-p) * 292deg))
        rotateZ(calc(-12deg + var(--dkie-p) * 155deg))
        scale(calc(0.58 + var(--dkie-p) * 0.76));
}

.dkie-spine {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18%;
    height: 122%;
    z-index: 4;
    transform-style: preserve-3d;
    transform:
        translate3d(-50%, -50%, 80px)
        rotateX(74deg)
        rotateZ(calc(18deg + var(--dkie-p) * 96deg));
    filter: drop-shadow(0 0 48px color-mix(in srgb, var(--dkie-accent) 24%, transparent));
}

.dkie-spine::before,
.dkie-spine::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.36), var(--dkie-accent), transparent);
    transform: translateX(-50%);
    box-shadow: 0 0 38px color-mix(in srgb, var(--dkie-accent) 48%, transparent);
}

.dkie-spine::after {
    width: 14px;
    opacity: .18;
    filter: blur(10px);
}

.dkie-spine-node {
    position: absolute;
    left: 50%;
    width: clamp(70px, 9vw, 146px);
    height: clamp(34px, 4.5vw, 72px);
    margin-left: calc(clamp(70px, 9vw, 146px) / -2);
    border: 1px solid rgba(255,255,255,.2);
    background:
        linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.055)),
        color-mix(in srgb, var(--dkie-accent) 15%, rgba(255,255,255,.02));
    clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
    box-shadow:
        0 20px 70px rgba(0,0,0,.44),
        inset 0 1px 0 rgba(255,255,255,.22);
    backdrop-filter: blur(16px) saturate(150%);
    transform-style: preserve-3d;
}

.dkie-spine-node-1 { top: 0%; transform: translateZ(calc(-260px + var(--dkie-p) * 340px)) rotateY(-22deg); opacity: .34; }
.dkie-spine-node-2 { top: 13%; transform: translateZ(calc(-190px + var(--dkie-p) * 260px)) rotateY(26deg); opacity: .48; }
.dkie-spine-node-3 { top: 26%; transform: translateZ(calc(-110px + var(--dkie-p) * 210px)) rotateY(-30deg); opacity: .64; }
.dkie-spine-node-4 { top: 39%; transform: translateZ(calc(-20px + var(--dkie-p) * 150px)) rotateY(30deg); opacity: .82; }
.dkie-spine-node-5 { top: 52%; transform: translateZ(calc(70px + var(--dkie-p) * 90px)) rotateY(-26deg); opacity: .88; }
.dkie-spine-node-6 { top: 65%; transform: translateZ(calc(150px + var(--dkie-p) * 40px)) rotateY(22deg); opacity: .74; }
.dkie-spine-node-7 { top: 78%; transform: translateZ(calc(230px - var(--dkie-p) * 40px)) rotateY(-18deg); opacity: .52; }
.dkie-spine-node-8 { top: 91%; transform: translateZ(calc(300px - var(--dkie-p) * 110px)) rotateY(18deg); opacity: .36; }

.dkie-core {
    width: 34%;
    transform: translate(-50%, -50%) rotateY(calc(var(--dkie-p) * 520deg)) rotateX(calc(var(--dkie-p) * 24deg));
}

.dkie-core::before,
.dkie-core::after {
    opacity: .82;
}

.dkie-chapters {
    right: max(34px, calc((100vw - 1540px) / 2 + 92px));
    top: clamp(92px, 15vh, 160px);
    width: min(430px, 31vw);
    z-index: 10;
    pointer-events: none;
}

.dkie-chapter {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    min-height: 132px;
    padding-left: 22px;
    border-left: 1px solid color-mix(in srgb, var(--dkie-accent) 58%, rgba(255,255,255,.2));
    opacity: 0;
    transform: translate3d(32px, 0, 0);
    filter: blur(4px);
    transition: opacity .32s ease, transform .32s ease, filter .32s ease;
}

.dkie-chapter span {
    display: block;
    margin: 0 0 13px;
    color: var(--dkie-accent);
    font: 900 10px/1 Arial, sans-serif;
    letter-spacing: .3em;
    text-transform: uppercase;
}

.dkie-chapter strong {
    display: block;
    color: rgba(255,255,255,.94);
    font: 900 clamp(24px, 2.25vw, 40px)/.98 Arial, sans-serif;
    letter-spacing: -.06em;
    text-transform: uppercase;
}

.dkie-chapter p {
    max-width: 36ch;
    margin: 16px 0 0;
    color: rgba(255,255,255,.68);
    font: 500 14px/1.62 Arial, sans-serif;
}

.dkie-stage-1 .dkie-chapter-1,
.dkie-stage-2 .dkie-chapter-2,
.dkie-stage-3 .dkie-chapter-3,
.dkie-stage-4 .dkie-chapter-4,
.dkie-stage-5 .dkie-chapter-5 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
}

.dkie-card-1 {
    transform:
        translate3d(calc(-460px + var(--dkie-p) * 210px), calc(-170px + var(--dkie-p) * 180px), calc(-1060px + var(--dkie-p) * 1900px))
        rotateY(calc(-44deg + var(--dkie-p) * 34deg))
        rotateZ(calc(-12deg + var(--dkie-p) * 15deg));
}

.dkie-card-2 {
    transform:
        translate3d(calc(560px - var(--dkie-p) * 920px), calc(-50% + var(--dkie-p) * -24px), calc(-1260px + var(--dkie-p) * 2240px))
        rotateY(calc(46deg - var(--dkie-p) * 52deg))
        rotateZ(calc(10deg - var(--dkie-p) * 14deg));
}

.dkie-card-3 {
    transform:
        translate3d(calc(-620px + var(--dkie-p) * 940px), calc(150px - var(--dkie-p) * 170px), calc(-1480px + var(--dkie-p) * 2440px))
        rotateY(calc(-52deg + var(--dkie-p) * 62deg))
        rotateZ(calc(-12deg + var(--dkie-p) * 11deg));
}

.dkie-final {
    opacity: calc(min(1, max(0, var(--dkie-p) - .86) * 8));
}

.dkie-progress b:nth-child(1) { top: 0; }
.dkie-progress b:nth-child(2) { top: 25%; }
.dkie-progress b:nth-child(3) { top: 50%; }
.dkie-progress b:nth-child(4) { top: 75%; }
.dkie-progress b:nth-child(5) { top: 100%; }

.dkie-scene.dkie-stage-5 .dkie-progress b:nth-child(5) {
    border-color: var(--dkie-accent);
    box-shadow: 0 0 24px var(--dkie-accent);
}

@media (max-width: 1180px) {
    .dkie-chapters {
        right: clamp(26px, 5vw, 70px);
        width: min(390px, 36vw);
    }
}

@media (max-width: 767px) {
    .dkie-scene {
        min-height: 560vh;
    }

    .dkie-depth-stack {
        inset: -8vh -45vw;
        opacity: .58;
        transform: rotateX(64deg) rotateZ(calc(-10deg + var(--dkie-p) * 14deg));
    }

    .dkie-depth-plane {
        width: 150vw;
        height: 120px;
    }

    .dkie-object-wrap,
    body.dkie-canvas-template .dkie-object-wrap {
        width: min(108vw, 520px);
        top: 56%;
        left: 50%;
        transform:
            translate3d(-50%, -50%, 0)
            rotateX(calc(64deg - var(--dkie-p) * 42deg))
            rotateY(calc(-22deg + var(--dkie-p) * 190deg))
            rotateZ(calc(-8deg + var(--dkie-p) * 122deg))
            scale(calc(0.62 + var(--dkie-p) * 0.50));
    }

    .dkie-spine {
        height: 112%;
    }

    .dkie-chapters {
        left: 22px;
        right: 22px;
        top: auto;
        bottom: 130px;
        width: auto;
    }

    .dkie-chapter {
        min-height: 96px;
        padding-left: 16px;
    }

    .dkie-chapter strong {
        font-size: clamp(21px, 7vw, 31px);
    }

    .dkie-chapter p {
        font-size: 13px;
        max-width: 30ch;
    }
}


/* v0.1.7 - Contrast Pass
   The previous cinematic vignette sat above interface layers and made white text read like
   dark grey on a dark background. Keep depth, but never sacrifice legibility. */
.dkie-scene {
    --dkie-text-strong: rgba(255,255,255,.98);
    --dkie-text-mid: rgba(255,255,255,.82);
    --dkie-text-soft: rgba(255,255,255,.70);
    --dkie-panel-bg: rgba(18,18,22,.70);
    --dkie-panel-bg-hot: color-mix(in srgb, var(--dkie-accent) 16%, rgba(18,18,22,.72));
}

/* The vignette belongs to the scene, not on top of the UI. */
.dkie-sticky::after {
    z-index: 6 !important;
    opacity: .62 !important;
    mix-blend-mode: normal !important;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.40), transparent 22%, transparent 72%, rgba(0,0,0,0.64)),
        radial-gradient(circle at 50% 50%, transparent 34%, rgba(0,0,0,0.46) 100%) !important;
}

.dkie-copy,
.dkie-card,
.dkie-chapters,
.dkie-final,
.dkie-scroll-hint,
.dkie-progress {
    position: absolute;
}

.dkie-card { z-index: 9 !important; }
.dkie-copy { z-index: 10 !important; }
.dkie-final { z-index: 11 !important; }
.dkie-chapters { z-index: 12 !important; }
.dkie-scroll-hint,
.dkie-progress { z-index: 13 !important; }

.dkie-title {
    color: var(--dkie-text-strong) !important;
    opacity: .96 !important;
    text-shadow:
        0 0 34px rgba(255,255,255,.10),
        0 22px 70px rgba(0,0,0,.80),
        0 0 54px color-mix(in srgb, var(--dkie-accent) 16%, transparent) !important;
}

.dkie-subtitle,
.dkie-chapter p,
.dkie-final p {
    color: var(--dkie-text-mid) !important;
    text-shadow: 0 14px 46px rgba(0,0,0,.84) !important;
}

.dkie-eyebrow,
.dkie-chapter span,
.dkie-final span,
.dkie-card span {
    color: color-mix(in srgb, var(--dkie-accent) 78%, #fff) !important;
    text-shadow:
        0 0 18px color-mix(in srgb, var(--dkie-accent) 46%, transparent),
        0 10px 34px rgba(0,0,0,.78) !important;
}

.dkie-card,
.dkie-final {
    border-color: rgba(255,255,255,.30) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.065)),
        var(--dkie-panel-bg-hot) !important;
    box-shadow:
        0 36px 130px rgba(0,0,0,.68),
        0 0 90px color-mix(in srgb, var(--dkie-accent) 14%, transparent),
        inset 0 1px 0 rgba(255,255,255,.25) !important;
}

.dkie-card strong,
.dkie-chapter strong,
.dkie-final strong {
    color: var(--dkie-text-strong) !important;
    text-shadow:
        0 18px 56px rgba(0,0,0,.88),
        0 0 22px rgba(255,255,255,.08) !important;
}

.dkie-chapter {
    border-left-color: color-mix(in srgb, var(--dkie-accent) 78%, rgba(255,255,255,.32)) !important;
}

.dkie-cta {
    color: #fff !important;
    text-shadow: 0 12px 30px rgba(0,0,0,.62);
    box-shadow:
        0 24px 90px color-mix(in srgb, var(--dkie-accent) 38%, transparent),
        inset 0 1px 0 rgba(255,255,255,.32) !important;
}

.dkie-final-cta {
    color: var(--dkie-text-strong) !important;
    text-shadow: 0 10px 32px rgba(0,0,0,.74);
}

/* Keep the far ghost title readable enough to feel intentional, not broken. */
.dkie-copy[style],
.dkie-copy {
    filter: drop-shadow(0 24px 72px rgba(0,0,0,.70));
}

@media (max-width: 767px) {
    .dkie-sticky::after {
        opacity: .72 !important;
    }

    .dkie-title {
        text-shadow:
            0 18px 58px rgba(0,0,0,.88),
            0 0 24px rgba(255,255,255,.10) !important;
    }

    .dkie-card,
    .dkie-final {
        background:
            linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.075)),
            rgba(18,18,22,.82) !important;
    }
}

/* v0.1.8 - Local Assets / 3D Preparation
   This does not activate Three.js yet. It only creates a stable visual slot for the future GLB mode,
   while preserving the confirmed v0.1.7 CSS object mode. */
.dkie-glb-slot {
    position: absolute;
    inset: 11%;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    transform-style: preserve-3d;
    transform: rotateX(10deg) rotateY(-12deg);
    border: 1px solid rgba(255,255,255,.30);
    background:
        linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.045)),
        color-mix(in srgb, var(--dkie-accent) 10%, rgba(12,12,16,.72));
    clip-path: polygon(9% 0, 100% 0, 100% 81%, 91% 100%, 0 100%, 0 19%);
    box-shadow:
        0 42px 120px rgba(0,0,0,.72),
        inset 0 1px 0 rgba(255,255,255,.22),
        0 0 90px color-mix(in srgb, var(--dkie-accent) 22%, transparent);
    backdrop-filter: blur(20px);
    color: var(--dkie-text-strong, #fff);
}

.dkie-glb-slot span {
    color: color-mix(in srgb, var(--dkie-accent) 82%, #fff);
    font: 800 10px/1 Arial, sans-serif;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.dkie-glb-slot strong {
    display: block;
    max-width: 12ch;
    color: var(--dkie-text-strong, #fff);
    font: 900 clamp(24px, 4vw, 64px)/.9 Arial, sans-serif;
    letter-spacing: -.06em;
    text-transform: uppercase;
    text-shadow: 0 18px 56px rgba(0,0,0,.86);
}

.dkie-glb-slot p {
    max-width: 30ch;
    margin: 0;
    color: var(--dkie-text-mid, rgba(255,255,255,.82));
    font: 500 13px/1.55 Arial, sans-serif;
    text-shadow: 0 14px 44px rgba(0,0,0,.82);
}

.dkie-object-mode-glb .dkie-spine,
.dkie-object-mode-glb .dkie-holo-ring,
.dkie-object-mode-glb .dkie-core {
    display: none;
}

.dkie-object-mode-glb .dkie-glb-slot {
    display: flex;
}

.dkie-object-mode-css .dkie-glb-slot {
    display: none !important;
}

.dkie-glb-prepared .dkie-glb-slot::before,
.dkie-glb-prepared .dkie-glb-slot::after {
    content: '';
    position: absolute;
    pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--dkie-accent) 34%, rgba(255,255,255,.16));
    opacity: .42;
}

.dkie-glb-prepared .dkie-glb-slot::before {
    inset: -9%;
    transform: translateZ(-28px) rotate(5deg);
}

.dkie-glb-prepared .dkie-glb-slot::after {
    inset: 12%;
    transform: translateZ(42px) rotate(-9deg);
}

/* v0.2.0 - Local Three.js / GLB Loader */
.dkie-glb-canvas {
    position: absolute;
    inset: -22%;
    z-index: 1;
    width: 144%;
    height: 144%;
    display: block;
    pointer-events: none;
    filter:
        drop-shadow(0 44px 90px rgba(0,0,0,.82))
        drop-shadow(0 0 44px color-mix(in srgb, var(--dkie-accent) 20%, transparent));
}

.dkie-glb-slot > span,
.dkie-glb-slot > strong,
.dkie-glb-slot > p {
    position: relative;
    z-index: 3;
    transition: opacity .35s ease, transform .35s ease, visibility .35s ease;
}

.dkie-glb-loading .dkie-glb-slot {
    border-color: color-mix(in srgb, var(--dkie-accent) 56%, rgba(255,255,255,.22));
}

.dkie-glb-loading .dkie-glb-slot::before {
    animation: dkie-glb-scan 1.6s linear infinite;
}

.dkie-glb-loaded .dkie-glb-slot {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    clip-path: none;
}

.dkie-glb-loaded .dkie-glb-slot::before,
.dkie-glb-loaded .dkie-glb-slot::after {
    opacity: .18;
}

.dkie-glb-loaded .dkie-glb-slot > span,
.dkie-glb-loaded .dkie-glb-slot > strong,
.dkie-glb-loaded .dkie-glb-slot > p {
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
}

.dkie-glb-error .dkie-glb-slot {
    border-color: rgba(255,75,75,.55);
    background:
        linear-gradient(135deg, rgba(255,55,55,.18), rgba(255,255,255,.05)),
        rgba(12,12,16,.82);
}

@keyframes dkie-glb-scan {
    0% { transform: translateZ(-28px) rotate(5deg) translateY(-8px); opacity: .20; }
    50% { transform: translateZ(-28px) rotate(5deg) translateY(8px); opacity: .56; }
    100% { transform: translateZ(-28px) rotate(5deg) translateY(-8px); opacity: .20; }
}

/* v0.2.1 - GLB Stabilizer
   Real WebGL canvas must not be perspective-skewed by CSS 3D wrappers.
   Scroll still drives the model in Three.js, but the viewport stays optically neutral. */
.dkie-object-mode-glb .dkie-object-wrap,
body.dkie-canvas-template .dkie-object-mode-glb .dkie-object-wrap {
    left: 58% !important;
    top: 52% !important;
    width: min(52vw, 760px) !important;
    height: min(78vh, 760px) !important;
    transform: translate(-50%, -50%) !important;
    transform-style: flat !important;
    perspective: none !important;
    filter: none !important;
    z-index: 8;
}

.dkie-object-mode-glb .dkie-glb-slot,
body.dkie-canvas-template .dkie-object-mode-glb .dkie-glb-slot {
    inset: 0 !important;
    display: flex;
    transform: none !important;
    transform-style: flat !important;
    perspective: none !important;
    clip-path: none !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
}

.dkie-object-mode-glb .dkie-glb-prepared .dkie-glb-slot::before,
.dkie-object-mode-glb .dkie-glb-prepared .dkie-glb-slot::after,
.dkie-object-mode-glb.dkie-glb-prepared .dkie-glb-slot::before,
.dkie-object-mode-glb.dkie-glb-prepared .dkie-glb-slot::after {
    display: none !important;
}

.dkie-object-mode-glb .dkie-glb-canvas {
    inset: -8% !important;
    width: 116% !important;
    height: 116% !important;
    transform: none !important;
    filter:
        drop-shadow(0 42px 90px rgba(0,0,0,.80))
        drop-shadow(0 0 34px color-mix(in srgb, var(--dkie-accent) 24%, transparent));
}

.dkie-object-mode-glb .dkie-glb-loaded .dkie-glb-slot,
.dkie-object-mode-glb.dkie-glb-loaded .dkie-glb-slot {
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 980px) {
    .dkie-object-mode-glb .dkie-object-wrap,
    body.dkie-canvas-template .dkie-object-mode-glb .dkie-object-wrap {
        left: 58% !important;
        top: 57% !important;
        width: 78vw !important;
        height: 48vh !important;
    }
}

/* v0.2.9 DNA / Spine flow: cards descend along a vertical object lane */
.dkie-flow-spine .dkie-card-1,
.dkie-flow-dna .dkie-card-1 {
    transform:
        translate3d(calc(240px + var(--dkie-p) * 18px), calc(-200px + var(--dkie-p) * 340px), calc(-980px + var(--dkie-p) * 1660px))
        rotateY(calc(-18deg + var(--dkie-p) * 16deg))
        rotateZ(calc(-6deg + var(--dkie-p) * 8deg));
}
.dkie-flow-spine .dkie-card-2,
.dkie-flow-dna .dkie-card-2 {
    transform:
        translate3d(calc(280px + var(--dkie-p) * 8px), calc(-30px + var(--dkie-p) * 360px), calc(-1180px + var(--dkie-p) * 1980px))
        rotateY(calc(16deg - var(--dkie-p) * 14deg))
        rotateZ(calc(5deg - var(--dkie-p) * 7deg));
}
.dkie-flow-spine .dkie-card-3,
.dkie-flow-dna .dkie-card-3 {
    transform:
        translate3d(calc(210px + var(--dkie-p) * 24px), calc(170px + var(--dkie-p) * 320px), calc(-1360px + var(--dkie-p) * 2180px))
        rotateY(calc(-14deg + var(--dkie-p) * 15deg))
        rotateZ(calc(-5deg + var(--dkie-p) * 6deg));
}
.dkie-flow-spine .dkie-card,
.dkie-flow-dna .dkie-card {
    opacity: calc(min(1, var(--dkie-p) * 4.8) - max(0, var(--dkie-p) - .90) * 4.2);
}


/* v0.3.0 DNA Axis stabilization: GLB viewport is not driven by the old fake-object wrapper. */
.dkie-scene.dkie-model-viewport-axis.dkie-object-mode-glb .dkie-object-wrap,
.dkie-scene.dkie-model-viewport-fixed.dkie-object-mode-glb .dkie-object-wrap {
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    perspective: none !important;
    transform-style: flat !important;
    pointer-events: none;
}

.dkie-scene.dkie-model-viewport-axis.dkie-object-mode-glb .dkie-glb-slot,
.dkie-scene.dkie-model-viewport-fixed.dkie-object-mode-glb .dkie-glb-slot {
    position: absolute !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    transform: none !important;
    opacity: 1 !important;
    overflow: visible !important;
}

.dkie-scene.dkie-model-viewport-axis .dkie-spine,
.dkie-scene.dkie-model-viewport-axis .dkie-core,
.dkie-scene.dkie-model-viewport-axis .dkie-holo-ring,
.dkie-scene.dkie-model-viewport-fixed .dkie-spine,
.dkie-scene.dkie-model-viewport-fixed .dkie-core,
.dkie-scene.dkie-model-viewport-fixed .dkie-holo-ring {
    display: none !important;
}

.dkie-flow-dna .dkie-depth-stack {
    transform: translate3d(0, calc(var(--dkie-vtravel, 0) * -220px), 0);
}

.dkie-flow-dna .dkie-chapters {
    transform: translate3d(0, calc(var(--dkie-vtravel, 0) * -180px), 0);
}

.dkie-flow-dna .dkie-card-1 {
    transform:
        translate3d(calc(250px + var(--dkie-p) * 12px), calc(-250px + var(--dkie-p) * 520px), calc(-980px + var(--dkie-p) * 1620px))
        rotateY(calc(-16deg + var(--dkie-p) * 12deg))
        rotateZ(calc(-5deg + var(--dkie-p) * 6deg)) !important;
}
.dkie-flow-dna .dkie-card-2 {
    transform:
        translate3d(calc(260px + var(--dkie-p) * 6px), calc(-20px + var(--dkie-p) * 560px), calc(-1160px + var(--dkie-p) * 1860px))
        rotateY(calc(12deg - var(--dkie-p) * 10deg))
        rotateZ(calc(4deg - var(--dkie-p) * 6deg)) !important;
}
.dkie-flow-dna .dkie-card-3 {
    transform:
        translate3d(calc(220px + var(--dkie-p) * 18px), calc(220px + var(--dkie-p) * 520px), calc(-1320px + var(--dkie-p) * 2040px))
        rotateY(calc(-12deg + var(--dkie-p) * 12deg))
        rotateZ(calc(-4deg + var(--dkie-p) * 5deg)) !important;
}


/* v0.3.1 DNA Rail: cards are tied to a vertical rail next to the GLB axis. */
.dkie-dna-rail.dkie-object-mode-glb .dkie-card {
    left: calc(50% + (var(--dkie-dna-x, .19) * 100vw)) !important;
    top: 50% !important;
    width: clamp(210px, 18vw, 330px) !important;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.dkie-dna-rail.dkie-object-mode-glb .dkie-card-1 {
    transform:
        translate3d(
            calc(-50% - (var(--dkie-dna-orbit, .32) * 260px)),
            calc(-360px + (var(--dkie-p) * 720px)),
            calc(-620px + (var(--dkie-p) * 980px) * var(--dkie-dna-depth, 1))
        )
        rotateY(calc(-74deg + var(--dkie-p) * 116deg))
        rotateZ(-5deg) !important;
    opacity: calc(min(1, max(0, var(--dkie-p) - .03) * 7) - max(0, var(--dkie-p) - .50) * 4);
}

.dkie-dna-rail.dkie-object-mode-glb .dkie-card-2 {
    transform:
        translate3d(
            calc(-50% + (var(--dkie-dna-orbit, .32) * 300px)),
            calc(-120px + (var(--dkie-p) * 760px)),
            calc(-760px + (var(--dkie-p) * 1120px) * var(--dkie-dna-depth, 1))
        )
        rotateY(calc(76deg - var(--dkie-p) * 122deg))
        rotateZ(4deg) !important;
    opacity: calc(min(1, max(0, var(--dkie-p) - .18) * 7) - max(0, var(--dkie-p) - .72) * 4);
}

.dkie-dna-rail.dkie-object-mode-glb .dkie-card-3 {
    transform:
        translate3d(
            calc(-50% - (var(--dkie-dna-orbit, .32) * 230px)),
            calc(130px + (var(--dkie-p) * 820px)),
            calc(-840px + (var(--dkie-p) * 1220px) * var(--dkie-dna-depth, 1))
        )
        rotateY(calc(-68deg + var(--dkie-p) * 110deg))
        rotateZ(-4deg) !important;
    opacity: calc(min(1, max(0, var(--dkie-p) - .36) * 7) - max(0, var(--dkie-p) - .90) * 5);
}

.dkie-dna-rail .dkie-chapters {
    right: clamp(140px, 17vw, 310px);
    transform: translate3d(0, calc(var(--dkie-dna-descent, 0) * -90px), 0);
}

.dkie-dna-rail.dkie-model-viewport-axis .dkie-glb-slot canvas,
.dkie-dna-rail.dkie-model-viewport-fixed .dkie-glb-slot canvas {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 900px) {
    .dkie-dna-rail.dkie-object-mode-glb .dkie-card {
        left: 50% !important;
        width: min(78vw, 330px) !important;
    }
}


/* v0.3.2 DNA Hard Rail: bypass legacy cards and make a visible vertical rail around the DNA axis. */
.dkie-dna-hard-rail.dkie-object-mode-glb .dkie-card {
    display: none !important;
}

.dkie-dna-hard-cards {
    display: none;
}

.dkie-dna-hard-rail .dkie-dna-hard-cards {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    perspective: 1300px;
    transform-style: preserve-3d;
}

.dkie-dna-hard-card {
    position: absolute;
    left: calc(50% + (var(--dkie-dna-x, .19) * 100vw));
    top: 50%;
    width: clamp(220px, 18vw, 340px);
    padding: 22px 24px 24px;
    border: 1px solid rgba(255,255,255,.20);
    background:
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.045)),
        rgba(42,24,28,.70);
    box-shadow: 0 26px 90px rgba(0,0,0,.48), 0 0 40px rgba(239,51,51,.10);
    color: #fff;
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.dkie-dna-hard-card span {
    display: block;
    color: var(--dkie-accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .22em;
    margin-bottom: 12px;
}

.dkie-dna-hard-card strong {
    display: block;
    font-size: clamp(18px, 1.35vw, 28px);
    line-height: .98;
    font-weight: 950;
    letter-spacing: -.045em;
    text-transform: none;
}

.dkie-dna-hard-card-1 {
    transform:
        translate3d(
            calc(-50% - 390px),
            calc(-520px + var(--dkie-p) * 1120px),
            calc(-260px + var(--dkie-p) * 120px)
        )
        rotateY(calc(-86deg + var(--dkie-p) * 190deg))
        rotateZ(-5deg);
    opacity: calc(min(1, max(0, var(--dkie-p) - .02) * 8) - max(0, var(--dkie-p) - .42) * 4.5);
}

.dkie-dna-hard-card-2 {
    transform:
        translate3d(
            calc(-50% + 320px),
            calc(-260px + var(--dkie-p) * 1160px),
            calc(-120px + var(--dkie-p) * 160px)
        )
        rotateY(calc(86deg - var(--dkie-p) * 190deg))
        rotateZ(4deg);
    opacity: calc(min(1, max(0, var(--dkie-p) - .18) * 8) - max(0, var(--dkie-p) - .70) * 4.5);
}

.dkie-dna-hard-card-3 {
    transform:
        translate3d(
            calc(-50% - 340px),
            calc(40px + var(--dkie-p) * 1180px),
            calc(-180px + var(--dkie-p) * 150px)
        )
        rotateY(calc(-78deg + var(--dkie-p) * 176deg))
        rotateZ(-4deg);
    opacity: calc(min(1, max(0, var(--dkie-p) - .38) * 8) - max(0, var(--dkie-p) - .92) * 5);
}

.dkie-dna-hard-rail .dkie-chapters {
    transform: translate3d(0, calc((var(--dkie-p) - .5) * -180px), 0) !important;
}

.dkie-dna-hard-rail.dkie-model-viewport-axis .dkie-object-wrap,
.dkie-dna-hard-rail.dkie-model-viewport-fixed .dkie-object-wrap {
    z-index: 10 !important;
}

@media (max-width: 900px) {
    .dkie-dna-hard-card {
        left: 50%;
        width: min(78vw, 340px);
    }
    .dkie-dna-hard-card-1,
    .dkie-dna-hard-card-2,
    .dkie-dna-hard-card-3 {
        transform: translate3d(-50%, calc(-220px + var(--dkie-p) * 520px), 0) rotateY(0deg);
    }
}


/* v0.3.3 isolated DNA shortcode. No legacy object wrapper, no legacy cards. */
.dkie-dna-scene,
.dkie-dna-scene * {
    box-sizing: border-box;
}

.dkie-dna-scene {
    --dkie-p: 0;
    --dkie-height: 720vh;
    position: relative;
    min-height: var(--dkie-height);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #020204;
    color: #fff;
    overflow: clip;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dkie-dna-stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 28%, rgba(239,51,51,.34), transparent 32%),
        radial-gradient(circle at 38% 70%, rgba(255,255,255,.08), transparent 32%),
        linear-gradient(90deg, #050508 0%, #08070a 52%, #020204 100%);
    perspective: 1300px;
    transform-style: preserve-3d;
}

.dkie-dna-particles,
.dkie-dna-glb,
.dkie-dna-glb-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dkie-dna-particles {
    z-index: 1;
    pointer-events: none;
}

.dkie-dna-bg {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: .8;
}

.dkie-dna-bg span {
    position: absolute;
    left: 36%;
    top: 50%;
    width: 46vw;
    height: 18vw;
    border: 1px solid rgba(239,51,51,.18);
    border-radius: 50%;
    transform: translate(-50%, -50%) rotateX(72deg) rotateZ(calc(var(--dkie-p) * 130deg));
    filter: blur(.2px);
}

.dkie-dna-bg span:nth-child(2) {
    left: 58%;
    width: 58vw;
    height: 22vw;
    opacity: .55;
    transform: translate(-50%, -50%) rotateX(68deg) rotateY(18deg) rotateZ(calc(var(--dkie-p) * -160deg));
}

.dkie-dna-bg span:nth-child(3) {
    left: 48%;
    width: 70vw;
    height: 10vw;
    opacity: .38;
    transform: translate(-50%, -50%) rotateX(82deg) rotateZ(-8deg);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.09), transparent);
}

.dkie-dna-glb {
    z-index: 5;
    pointer-events: none;
}

.dkie-dna-status {
    position: absolute;
    right: 32px;
    bottom: 28px;
    z-index: 10;
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.66);
}

.dkie-dna-loaded .dkie-dna-status {
    display: none;
}

.dkie-dna-copy {
    position: absolute;
    z-index: 8;
    left: clamp(32px, 21vw, 420px);
    top: 50%;
    width: min(560px, 38vw);
    transform: translate3d(0, calc(-50% + var(--dkie-p) * -120px), 0);
    opacity: calc(1 - max(0, var(--dkie-p) - .22) * 1.8);
}

.dkie-dna-eyebrow {
    color: var(--dkie-accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .42em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.dkie-dna-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(48px, 5vw, 104px);
    line-height: .86;
    letter-spacing: -.07em;
    text-transform: uppercase;
    font-weight: 950;
}

.dkie-dna-copy p {
    margin: 24px 0 28px;
    color: rgba(255,255,255,.86);
    font-size: 15px;
    line-height: 1.55;
    max-width: 470px;
}

.dkie-dna-cta {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 28px;
    background: var(--dkie-accent);
    color: #fff !important;
    text-decoration: none;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .22em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    box-shadow: 0 18px 56px rgba(239,51,51,.34);
}

.dkie-dna-rail-cards {
    position: absolute;
    inset: 0;
    z-index: 12;
    pointer-events: none;
    transform-style: preserve-3d;
}

.dkie-dna-rail-card {
    position: absolute;
    left: calc(50% + 17vw);
    top: 50%;
    width: clamp(220px, 18vw, 350px);
    padding: 22px 24px 24px;
    border: 1px solid rgba(255,255,255,.20);
    background:
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
        rgba(42,24,28,.72);
    color: #fff;
    box-shadow: 0 28px 86px rgba(0,0,0,.52), 0 0 40px rgba(239,51,51,.10);
    clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
    will-change: transform, opacity;
}

.dkie-dna-rail-card span {
    display: block;
    color: var(--dkie-accent);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .22em;
    margin-bottom: 12px;
}

.dkie-dna-rail-card strong {
    display: block;
    color: #fff;
    font-size: clamp(18px, 1.45vw, 30px);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 950;
}

.dkie-dna-rail-card-1 {
    transform:
        translate3d(calc(-50% - 390px), calc(-660px + var(--dkie-p) * 1320px), -180px)
        rotateY(calc(-82deg + var(--dkie-p) * 164deg))
        rotateZ(-5deg);
    opacity: calc(min(1, max(0, var(--dkie-p) - .02) * 8) - max(0, var(--dkie-p) - .44) * 4);
}

.dkie-dna-rail-card-2 {
    transform:
        translate3d(calc(-50% + 330px), calc(-360px + var(--dkie-p) * 1380px), 80px)
        rotateY(calc(82deg - var(--dkie-p) * 164deg))
        rotateZ(4deg);
    opacity: calc(min(1, max(0, var(--dkie-p) - .20) * 8) - max(0, var(--dkie-p) - .72) * 4);
}

.dkie-dna-rail-card-3 {
    transform:
        translate3d(calc(-50% - 330px), calc(-40px + var(--dkie-p) * 1420px), -90px)
        rotateY(calc(-76deg + var(--dkie-p) * 152deg))
        rotateZ(-4deg);
    opacity: calc(min(1, max(0, var(--dkie-p) - .40) * 8) - max(0, var(--dkie-p) - .94) * 5);
}

.dkie-dna-chapters {
    position: absolute;
    z-index: 14;
    right: clamp(80px, 14vw, 260px);
    top: 18%;
    width: min(390px, 26vw);
    transform: translate3d(0, calc((var(--dkie-p) - .5) * -180px), 0);
}

.dkie-dna-chapter {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translate3d(34px, 24px, 0);
    transition: opacity .25s linear, transform .25s linear;
}

.dkie-dna-chapter span {
    display: block;
    color: var(--dkie-accent);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .25em;
    margin-bottom: 12px;
}

.dkie-dna-chapter strong {
    display: block;
    color: #fff;
    font-size: clamp(28px, 2.25vw, 48px);
    line-height: .88;
    font-weight: 950;
    letter-spacing: -.055em;
}

.dkie-dna-chapter p {
    color: rgba(255,255,255,.84);
    line-height: 1.5;
    font-size: 14px;
    margin: 16px 0 0;
}

.dkie-dna-scene[data-dkie-dna-stage="1"] .dkie-dna-chapter-1,
.dkie-dna-scene[data-dkie-dna-stage="2"] .dkie-dna-chapter-2,
.dkie-dna-scene[data-dkie-dna-stage="3"] .dkie-dna-chapter-3,
.dkie-dna-scene[data-dkie-dna-stage="4"] .dkie-dna-chapter-4 {
    opacity: 1;
    transform: translate3d(0,0,0);
}

.dkie-dna-progress {
    position: absolute;
    z-index: 18;
    right: 38px;
    top: 50%;
    width: 1px;
    height: 150px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.16);
}

.dkie-dna-progress i {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 0%;
    background: linear-gradient(180deg, var(--dkie-accent), #fff);
    box-shadow: 0 0 22px rgba(239,51,51,.72);
}

.dkie-dna-progress b {
    position: absolute;
    left: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(255,255,255,.32);
    transform: rotate(45deg);
    background: #050508;
}

.dkie-dna-progress b:nth-child(1) { top: 0%; }
.dkie-dna-progress b:nth-child(2) { top: 33%; }
.dkie-dna-progress b:nth-child(3) { top: 66%; }
.dkie-dna-progress b:nth-child(4) { top: 100%; }

.dkie-dna-scroll {
    position: absolute;
    left: clamp(32px, 20vw, 410px);
    bottom: 7vh;
    z-index: 15;
    display: flex;
    gap: 14px;
    align-items: center;
    color: rgba(255,255,255,.55);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .3em;
    opacity: calc(1 - min(1, var(--dkie-p) * 7));
}

.dkie-dna-scroll span {
    width: 36px;
    height: 1px;
    background: var(--dkie-accent);
}

@media (max-width: 900px) {
    .dkie-dna-copy {
        left: 22px;
        top: 24%;
        width: calc(100vw - 44px);
    }

    .dkie-dna-glb {
        transform: translateX(20vw);
    }

    .dkie-dna-rail-card {
        left: 50%;
        width: min(82vw, 340px);
    }

    .dkie-dna-chapters {
        left: 22px;
        right: auto;
        top: 62%;
        width: calc(100vw - 44px);
    }
}


/* v0.3.4 True DNA Rig — DNA, cards and camera share one Three.js scene. */
.dkie-rig-scene,
.dkie-rig-scene * {
    box-sizing: border-box;
}

.dkie-rig-scene {
    --dkie-p: 0;
    --dkie-height: 760vh;
    position: relative;
    min-height: var(--dkie-height);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #020204;
    color: #fff;
    overflow: clip;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dkie-rig-stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 72% 30%, rgba(239,51,51,.34), transparent 32%),
        radial-gradient(circle at 36% 72%, rgba(255,255,255,.08), transparent 34%),
        linear-gradient(90deg, #050508 0%, #08070a 52%, #020204 100%);
}

.dkie-rig-canvas,
.dkie-rig-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dkie-rig-canvas {
    z-index: 5;
}

.dkie-rig-particles {
    z-index: 2;
    pointer-events: none;
}

.dkie-rig-copy {
    position: absolute;
    z-index: 9;
    left: clamp(30px, 20vw, 410px);
    top: 50%;
    width: min(570px, 38vw);
    transform: translate3d(0, calc(-50% + var(--dkie-p) * -130px), 0);
    opacity: calc(1 - max(0, var(--dkie-p) - .20) * 1.85);
    pointer-events: auto;
}

.dkie-rig-eyebrow {
    color: var(--dkie-accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .42em;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.dkie-rig-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(48px, 5vw, 104px);
    line-height: .86;
    letter-spacing: -.07em;
    text-transform: uppercase;
    font-weight: 950;
}

.dkie-rig-copy p {
    margin: 24px 0 28px;
    color: rgba(255,255,255,.86);
    font-size: 15px;
    line-height: 1.55;
    max-width: 470px;
}

.dkie-rig-cta {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 28px;
    background: var(--dkie-accent);
    color: #fff !important;
    text-decoration: none;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .22em;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    box-shadow: 0 18px 56px rgba(239,51,51,.34);
}

.dkie-rig-chapters {
    position: absolute;
    z-index: 9;
    right: clamp(80px, 13vw, 250px);
    top: 17%;
    width: min(390px, 26vw);
    transform: translate3d(0, calc((var(--dkie-p) - .5) * -160px), 0);
    pointer-events: none;
}

.dkie-rig-chapter {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translate3d(30px, 22px, 0);
    transition: opacity .22s linear, transform .22s linear;
}

.dkie-rig-chapter span {
    display: block;
    color: var(--dkie-accent);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .25em;
    margin-bottom: 12px;
}

.dkie-rig-chapter strong {
    display: block;
    color: #fff;
    font-size: clamp(28px, 2.25vw, 48px);
    line-height: .88;
    font-weight: 950;
    letter-spacing: -.055em;
}

.dkie-rig-chapter p {
    color: rgba(255,255,255,.84);
    line-height: 1.5;
    font-size: 14px;
    margin: 16px 0 0;
}

.dkie-rig-scene[data-dkie-rig-stage="1"] .dkie-rig-chapter-1,
.dkie-rig-scene[data-dkie-rig-stage="2"] .dkie-rig-chapter-2,
.dkie-rig-scene[data-dkie-rig-stage="3"] .dkie-rig-chapter-3,
.dkie-rig-scene[data-dkie-rig-stage="4"] .dkie-rig-chapter-4 {
    opacity: 1;
    transform: translate3d(0,0,0);
}

.dkie-rig-status {
    position: absolute;
    z-index: 12;
    right: 32px;
    bottom: 28px;
    color: rgba(255,255,255,.62);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.dkie-rig-loaded .dkie-rig-status {
    display: none;
}

.dkie-rig-progress {
    position: absolute;
    z-index: 14;
    right: 38px;
    top: 50%;
    width: 1px;
    height: 150px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.16);
}

.dkie-rig-progress i {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 0%;
    background: linear-gradient(180deg, var(--dkie-accent), #fff);
    box-shadow: 0 0 22px rgba(239,51,51,.72);
}

.dkie-rig-progress b {
    position: absolute;
    left: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid rgba(255,255,255,.32);
    transform: rotate(45deg);
    background: #050508;
}

.dkie-rig-progress b:nth-child(1) { top: 0%; }
.dkie-rig-progress b:nth-child(2) { top: 33%; }
.dkie-rig-progress b:nth-child(3) { top: 66%; }
.dkie-rig-progress b:nth-child(4) { top: 100%; }

.dkie-rig-scroll {
    position: absolute;
    left: clamp(32px, 20vw, 410px);
    bottom: 7vh;
    z-index: 12;
    display: flex;
    gap: 14px;
    align-items: center;
    color: rgba(255,255,255,.55);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .3em;
    opacity: calc(1 - min(1, var(--dkie-p) * 7));
}

.dkie-rig-scroll span {
    width: 36px;
    height: 1px;
    background: var(--dkie-accent);
}

@media (max-width: 900px) {
    .dkie-rig-copy {
        left: 22px;
        top: 24%;
        width: calc(100vw - 44px);
    }

    .dkie-rig-chapters {
        left: 22px;
        right: auto;
        top: 62%;
        width: calc(100vw - 44px);
    }
}


/* v0.3.5 DNA Axis Baseline — clean reference-matching model-only rig. */
.dkie-axis-scene,
.dkie-axis-scene * {
    box-sizing: border-box;
}

.dkie-axis-scene {
    --dkie-p: 0;
    --dkie-height: 720vh;
    position: relative;
    min-height: var(--dkie-height);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #050506;
    overflow: clip;
}

.dkie-axis-stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 34%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 56%),
        linear-gradient(180deg, #313131 0%, #151515 52%, #050506 100%);
}

.dkie-axis-bg-clean .dkie-axis-stage {
    background:
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.20), transparent 34%),
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.08), transparent 58%),
        linear-gradient(180deg, #3a3a3a 0%, #1b1b1b 52%, #070707 100%);
}

.dkie-axis-bg-dark .dkie-axis-stage {
    background:
        radial-gradient(circle at 50% 48%, rgba(239,51,51,.14), transparent 34%),
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.09), transparent 58%),
        linear-gradient(180deg, #111114 0%, #07070a 60%, #020204 100%);
}

.dkie-axis-canvas,
.dkie-axis-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dkie-axis-canvas {
    z-index: 4;
}

.dkie-axis-particles {
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.dkie-axis-show-noise .dkie-axis-particles {
    opacity: .44;
}

.dkie-axis-status {
    position: absolute;
    z-index: 10;
    right: 28px;
    bottom: 24px;
    color: rgba(255,255,255,.62);
    font: 800 11px/1.4 Inter, system-ui, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.dkie-axis-loaded .dkie-axis-status {
    display: none;
}

.dkie-axis-progress {
    display: none;
    position: absolute;
    z-index: 12;
    right: 28px;
    top: 50%;
    width: 1px;
    height: 150px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.18);
}

.dkie-axis-show-progress .dkie-axis-progress {
    display: block;
}

.dkie-axis-progress i {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 0%;
    background: linear-gradient(180deg, var(--dkie-accent), #fff);
    box-shadow: 0 0 22px rgba(239,51,51,.55);
}

.dkie-axis-debug {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 20;
    color: #fff;
    font: 12px/1.4 monospace;
    opacity: .66;
}


/* v0.3.7 DNA Orbit Camera — inspired by NM Spotlight: stable model, scroll-driven camera around target. */
.dkie-orbit-scene,
.dkie-orbit-scene * {
    box-sizing: border-box;
}

.dkie-orbit-scene {
    --dkie-p: 0;
    --dkie-height: 720vh;
    position: relative;
    min-height: var(--dkie-height);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #050506;
    overflow: clip;
}

.dkie-orbit-stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.20), transparent 34%),
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.08), transparent 58%),
        linear-gradient(180deg, #3a3a3a 0%, #1b1b1b 52%, #070707 100%);
}

.dkie-orbit-bg-dark .dkie-orbit-stage {
    background:
        radial-gradient(circle at 50% 48%, rgba(239,51,51,.14), transparent 34%),
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.09), transparent 58%),
        linear-gradient(180deg, #111114 0%, #07070a 60%, #020204 100%);
}

.dkie-orbit-canvas,
.dkie-orbit-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dkie-orbit-canvas {
    z-index: 4;
}

.dkie-orbit-particles {
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.dkie-orbit-show-noise .dkie-orbit-particles {
    opacity: .38;
}

.dkie-orbit-status {
    position: absolute;
    z-index: 10;
    right: 28px;
    bottom: 24px;
    color: rgba(255,255,255,.62);
    font: 800 11px/1.4 Inter, system-ui, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.dkie-orbit-loaded .dkie-orbit-status {
    display: none;
}

.dkie-orbit-progress {
    display: none;
    position: absolute;
    z-index: 12;
    right: 28px;
    top: 50%;
    width: 1px;
    height: 150px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.18);
}

.dkie-orbit-show-progress .dkie-orbit-progress {
    display: block;
}

.dkie-orbit-progress i {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 0%;
    background: linear-gradient(180deg, var(--dkie-accent), #fff);
    box-shadow: 0 0 22px rgba(239,51,51,.55);
}

.dkie-orbit-debug {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 20;
    color: #fff;
    font: 12px/1.4 monospace;
    opacity: .66;
}


/* v0.3.8 DNA Vertical Track — ZERO ORBIT. Fixed camera, fixed rotation, vertical model pass. */
.dkie-vertical-scene,
.dkie-vertical-scene * { box-sizing: border-box; }
.dkie-vertical-scene {
    --dkie-p: 0;
    --dkie-height: 720vh;
    position: relative;
    min-height: var(--dkie-height);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #050506;
    overflow: clip;
}
.dkie-vertical-stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.20), transparent 34%),
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.08), transparent 58%),
        linear-gradient(180deg, #3a3a3a 0%, #1b1b1b 52%, #070707 100%);
}
.dkie-vertical-bg-dark .dkie-vertical-stage {
    background:
        radial-gradient(circle at 50% 48%, rgba(239,51,51,.14), transparent 34%),
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.09), transparent 58%),
        linear-gradient(180deg, #111114 0%, #07070a 60%, #020204 100%);
}
.dkie-vertical-canvas,
.dkie-vertical-particles { position:absolute; inset:0; width:100%; height:100%; }
.dkie-vertical-canvas { z-index:4; }
.dkie-vertical-particles { z-index:5; opacity:0; pointer-events:none; }
.dkie-vertical-show-noise .dkie-vertical-particles { opacity:.34; }
.dkie-vertical-status {
    position:absolute; z-index:10; right:28px; bottom:24px;
    color:rgba(255,255,255,.62); font:800 11px/1.4 Inter,system-ui,sans-serif;
    letter-spacing:.18em; text-transform:uppercase;
}
.dkie-vertical-loaded .dkie-vertical-status { display:none; }
.dkie-vertical-progress {
    display:none; position:absolute; z-index:12; right:28px; top:50%; width:1px; height:150px;
    transform:translateY(-50%); background:rgba(255,255,255,.18);
}
.dkie-vertical-show-progress .dkie-vertical-progress { display:block; }
.dkie-vertical-progress i {
    position:absolute; left:0; top:0; width:1px; height:0%;
    background:linear-gradient(180deg,var(--dkie-accent),#fff); box-shadow:0 0 22px rgba(239,51,51,.55);
}
.dkie-vertical-debug { position:absolute; left:20px; bottom:18px; z-index:20; color:#fff; font:12px/1.4 monospace; opacity:.66; }


/* v0.3.9 DNA NM Track — model centered like NM Spotlight, camera tracks model target. */
.dkie-nm-track-scene,
.dkie-nm-track-scene * {
    box-sizing: border-box;
}

.dkie-nm-track-scene {
    --dkie-p: 0;
    --dkie-height: 720vh;
    position: relative;
    min-height: var(--dkie-height);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: #050506;
    overflow: clip;
}

.dkie-nm-track-stage {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.20), transparent 34%),
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.08), transparent 58%),
        linear-gradient(180deg, #3a3a3a 0%, #1b1b1b 52%, #070707 100%);
}

.dkie-nm-track-bg-dark .dkie-nm-track-stage {
    background:
        radial-gradient(circle at 50% 48%, rgba(239,51,51,.14), transparent 34%),
        radial-gradient(circle at 50% 48%, rgba(255,255,255,.09), transparent 58%),
        linear-gradient(180deg, #111114 0%, #07070a 60%, #020204 100%);
}

.dkie-nm-track-canvas,
.dkie-nm-track-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dkie-nm-track-canvas {
    z-index: 4;
}

.dkie-nm-track-particles {
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.dkie-nm-track-show-noise .dkie-nm-track-particles {
    opacity: .32;
}

.dkie-nm-track-status {
    position: absolute;
    z-index: 10;
    right: 28px;
    bottom: 24px;
    color: rgba(255,255,255,.62);
    font: 800 11px/1.4 Inter, system-ui, sans-serif;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.dkie-nm-track-loaded .dkie-nm-track-status {
    display: none;
}

.dkie-nm-track-progress {
    display: none;
    position: absolute;
    z-index: 12;
    right: 28px;
    top: 50%;
    width: 1px;
    height: 150px;
    transform: translateY(-50%);
    background: rgba(255,255,255,.18);
}

.dkie-nm-track-show-progress .dkie-nm-track-progress {
    display: block;
}

.dkie-nm-track-progress i {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 0%;
    background: linear-gradient(180deg, var(--dkie-accent), #fff);
    box-shadow: 0 0 22px rgba(239,51,51,.55);
}

.dkie-nm-track-debug {
    position: absolute;
    left: 20px;
    bottom: 18px;
    z-index: 20;
    color: #fff;
    font: 12px/1.4 monospace;
    opacity: .66;
}


/* v0.4.2 Single Content Card Test for stable DNA NM Track. */
.dkie-nm-track-scene {
    --dkie-card-p: 0;
}

.dkie-nm-track-card {
    position: absolute;
    z-index: 9;
    top: 50%;
    width: clamp(280px, 25vw, 430px);
    padding: 26px 28px 28px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.035)),
        rgba(28, 22, 25, .74);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        0 34px 100px rgba(0,0,0,.48),
        0 0 42px rgba(239,51,51,.12);
    clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
    pointer-events: none;
    opacity: calc(min(1, var(--dkie-card-p) * 1.35) * (1 - max(0, var(--dkie-p) - .88) * 5));
    transform:
        translate3d(0, calc(-50% + (1 - var(--dkie-card-p)) * 44px), 0)
        rotateX(calc((1 - var(--dkie-card-p)) * 6deg))
        scale(calc(.94 + var(--dkie-card-p) * .06));
    transform-origin: center center;
    will-change: opacity, transform;
}

.dkie-nm-track-card-right .dkie-nm-track-card {
    right: clamp(44px, 11vw, 210px);
}

.dkie-nm-track-card-left .dkie-nm-track-card {
    left: clamp(44px, 11vw, 210px);
}

.dkie-nm-track-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(239,51,51,.28), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 52%);
    opacity: .55;
    pointer-events: none;
}

.dkie-nm-track-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 22px;
    width: 2px;
    height: calc(100% - 44px);
    background: var(--dkie-accent);
    box-shadow: 0 0 26px rgba(239,51,51,.70);
}

.dkie-nm-track-card__meta {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,.58);
    font: 850 10px/1.3 Inter, system-ui, sans-serif;
    letter-spacing: .28em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.dkie-nm-track-card span {
    position: relative;
    z-index: 2;
    display: block;
    color: var(--dkie-accent);
    font: 950 11px/1.2 Inter, system-ui, sans-serif;
    letter-spacing: .25em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.dkie-nm-track-card strong {
    position: relative;
    z-index: 2;
    display: block;
    color: #fff;
    font: 950 clamp(30px, 2.55vw, 52px)/.88 Inter, system-ui, sans-serif;
    letter-spacing: -.06em;
    text-transform: uppercase;
}

.dkie-nm-track-card p {
    position: relative;
    z-index: 2;
    margin: 18px 0 0;
    color: rgba(255,255,255,.84);
    font: 500 14px/1.55 Inter, system-ui, sans-serif;
}

@media (max-width: 900px) {
    .dkie-nm-track-card,
    .dkie-nm-track-card-right .dkie-nm-track-card,
    .dkie-nm-track-card-left .dkie-nm-track-card {
        left: 22px;
        right: 22px;
        top: auto;
        bottom: 10vh;
        width: auto;
        transform:
            translate3d(0, calc((1 - var(--dkie-card-p)) * 34px), 0)
            scale(calc(.96 + var(--dkie-card-p) * .04));
    }
}


/* v0.4.3 — visible scroll motion for the single content card. */
.dkie-nm-track-scene {
    --dkie-card-raw: 0;
    --dkie-card-exit-p: 0;
}

.dkie-nm-track-card-motion-rail .dkie-nm-track-card {
    opacity:
        calc(
            min(1, var(--dkie-card-p) * 1.6)
            * (1 - max(0, var(--dkie-card-raw) - .90) * 10)
        );
    transform:
        translate3d(
            calc((1 - var(--dkie-card-p)) * var(--dkie-card-move-x) + var(--dkie-card-exit-p) * var(--dkie-card-exit-x)),
            calc(-50% + (1 - var(--dkie-card-p)) * var(--dkie-card-move-y) + var(--dkie-card-exit-p) * var(--dkie-card-exit-y)),
            0
        )
        rotateY(calc((1 - var(--dkie-card-p)) * var(--dkie-card-tilt) * -1 + var(--dkie-card-exit-p) * var(--dkie-card-tilt)))
        rotateZ(calc((1 - var(--dkie-card-p)) * 2deg - var(--dkie-card-exit-p) * 3deg))
        scale(calc(.88 + var(--dkie-card-p) * .14 - var(--dkie-card-exit-p) * .05));
}

.dkie-nm-track-card-left.dkie-nm-track-card-motion-rail .dkie-nm-track-card {
    transform:
        translate3d(
            calc((1 - var(--dkie-card-p)) * var(--dkie-card-move-x) * -1 + var(--dkie-card-exit-p) * var(--dkie-card-exit-x) * -1),
            calc(-50% + (1 - var(--dkie-card-p)) * var(--dkie-card-move-y) + var(--dkie-card-exit-p) * var(--dkie-card-exit-y)),
            0
        )
        rotateY(calc((1 - var(--dkie-card-p)) * var(--dkie-card-tilt) + var(--dkie-card-exit-p) * var(--dkie-card-tilt) * -1))
        rotateZ(calc((1 - var(--dkie-card-p)) * -2deg + var(--dkie-card-exit-p) * 3deg))
        scale(calc(.88 + var(--dkie-card-p) * .14 - var(--dkie-card-exit-p) * .05));
}

.dkie-nm-track-card-motion-soft .dkie-nm-track-card {
    transform:
        translate3d(
            calc((1 - var(--dkie-card-p)) * 60px),
            calc(-50% + (1 - var(--dkie-card-p)) * 120px + var(--dkie-card-exit-p) * -90px),
            0
        )
        scale(calc(.94 + var(--dkie-card-p) * .06));
}

.dkie-nm-track-card-motion-fixed .dkie-nm-track-card {
    transform:
        translate3d(0, calc(-50% + (1 - var(--dkie-card-p)) * 44px), 0)
        scale(calc(.94 + var(--dkie-card-p) * .06));
}

@media (max-width: 900px) {
    .dkie-nm-track-card-motion-rail .dkie-nm-track-card,
    .dkie-nm-track-card-left.dkie-nm-track-card-motion-rail .dkie-nm-track-card {
        transform:
            translate3d(
                0,
                calc((1 - var(--dkie-card-p)) * 190px + var(--dkie-card-exit-p) * -150px),
                0
            )
            scale(calc(.92 + var(--dkie-card-p) * .10 - var(--dkie-card-exit-p) * .04));
    }
}


/* v0.4.4 — Dock motion: enter, hold beside DNA, breathe, exit. */
.dkie-nm-track-scene {
    --dkie-card-in-p: 0;
    --dkie-card-hold-p: 0;
}

.dkie-nm-track-card-motion-dock .dkie-nm-track-card {
    opacity:
        calc(
            min(1, var(--dkie-card-in-p) * 1.25)
            * (1 - var(--dkie-card-exit-p))
        );
    transform:
        translate3d(
            calc((1 - var(--dkie-card-in-p)) * var(--dkie-card-move-x) + var(--dkie-card-dock-x) + var(--dkie-card-exit-p) * var(--dkie-card-exit-x)),
            calc(-50% + (1 - var(--dkie-card-in-p)) * var(--dkie-card-move-y) + var(--dkie-card-dock-y) + sin(var(--dkie-card-hold-p) * 3.14159) * var(--dkie-card-breathe) + var(--dkie-card-exit-p) * var(--dkie-card-exit-y)),
            0
        )
        rotateY(calc((1 - var(--dkie-card-in-p)) * var(--dkie-card-tilt) * -1 + var(--dkie-card-exit-p) * var(--dkie-card-tilt) * .35))
        rotateZ(calc((1 - var(--dkie-card-in-p)) * 1.4deg - var(--dkie-card-exit-p) * 2deg))
        scale(calc(.92 + var(--dkie-card-in-p) * .08 - var(--dkie-card-exit-p) * .04));
}

.dkie-nm-track-card-left.dkie-nm-track-card-motion-dock .dkie-nm-track-card {
    transform:
        translate3d(
            calc((1 - var(--dkie-card-in-p)) * var(--dkie-card-move-x) * -1 + var(--dkie-card-dock-x) * -1 + var(--dkie-card-exit-p) * var(--dkie-card-exit-x) * -1),
            calc(-50% + (1 - var(--dkie-card-in-p)) * var(--dkie-card-move-y) + var(--dkie-card-dock-y) + sin(var(--dkie-card-hold-p) * 3.14159) * var(--dkie-card-breathe) + var(--dkie-card-exit-p) * var(--dkie-card-exit-y)),
            0
        )
        rotateY(calc((1 - var(--dkie-card-in-p)) * var(--dkie-card-tilt) + var(--dkie-card-exit-p) * var(--dkie-card-tilt) * -.35))
        rotateZ(calc((1 - var(--dkie-card-in-p)) * -1.4deg + var(--dkie-card-exit-p) * 2deg))
        scale(calc(.92 + var(--dkie-card-in-p) * .08 - var(--dkie-card-exit-p) * .04));
}

.dkie-nm-track-card-motion-dock .dkie-nm-track-card::before {
    opacity: calc(.34 + var(--dkie-card-in-p) * .28);
}

.dkie-nm-track-card-motion-dock .dkie-nm-track-card::after {
    height: calc((100% - 44px) * (.45 + var(--dkie-card-in-p) * .55));
}

@media (max-width: 900px) {
    .dkie-nm-track-card-motion-dock .dkie-nm-track-card,
    .dkie-nm-track-card-left.dkie-nm-track-card-motion-dock .dkie-nm-track-card {
        transform:
            translate3d(
                0,
                calc((1 - var(--dkie-card-in-p)) * 170px + var(--dkie-card-dock-y) + var(--dkie-card-exit-p) * -140px),
                0
            )
            scale(calc(.94 + var(--dkie-card-in-p) * .06 - var(--dkie-card-exit-p) * .04));
    }
}


/* v0.4.5 — Orbit3D card uses a Three.js plane; hide DOM overlay card in this mode. */
.dkie-nm-track-card-motion-orbit3d .dkie-nm-track-card {
    display: none !important;
}


/* v0.4.8 — Cascade3D uses Three.js cards, not the DOM overlay card. */
.dkie-nm-track-card-motion-cascade3d .dkie-nm-track-card {
    display: none !important;
}


/* v0.5.0 — Helix3D uses cards attached to the DNA pivot in Three.js. */
.dkie-nm-track-card-motion-helix3d .dkie-nm-track-card {
    display: none !important;
}