/* =========================================================
   DWENN FINAL LOGO HOLOGRAM V1
   No image assets.
   ========================================================= */

.cta-section.dw-final-holo-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0 150px !important;
    background:
        radial-gradient(
            circle at 50% 66%,
            rgba(54, 205, 210, .08),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 66%,
            rgba(88, 118, 255, .06),
            transparent 45%
        ),
        #06101d !important;
}

.cta-section.dw-final-holo-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .11;
    background-image:
        linear-gradient(
            rgba(77, 200, 214, .055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(77, 200, 214, .055) 1px,
            transparent 1px
        );
    background-size: 58px 58px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent 5%,
            #000 30%,
            #000 90%,
            transparent
        );
}

.dw-final-holo-wrap {
    position: relative;
    z-index: 2;
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

.dw-final-holo-copy {
    width: min(980px, 100%);
}

.dw-final-holo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #8fa9bf;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.dw-final-holo-eyebrow::before {
    content: "";
    width: 31px;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            #628cff,
            #4dd7cf
        );
    box-shadow:
        0 0 12px rgba(77, 215, 207, .46);
}

.dw-final-holo-copy h2 {
    width: min(1060px, 100%);
    margin: 26px auto 0 !important;
    color: #eef6ff !important;
    font-size: clamp(42px, 5vw, 72px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
    text-align: center !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    text-wrap: balance;
}


/* -----------------------------------------
   HOLOGRAM
   ----------------------------------------- */

.dw-final-logo-stage {
    position: relative;
    width: min(760px, 92%);
    height: 380px;
    margin-top: 44px;
    display: grid;
    place-items: center;
    perspective: 1100px;
}

.dw-final-logo-trigger {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    perspective: 1100px;
}

.dw-final-logo-trigger:focus-visible {
    outline:
        1px solid rgba(91, 224, 218, .68);
    outline-offset: 6px;
    border-radius: 20px;
}

.dw-final-logo-scene {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    transform-style: preserve-3d;
    transform:
        rotateX(var(--dw-logo-rx, 0deg))
        rotateY(var(--dw-logo-ry, 0deg));
    transition: transform .14s ease-out;
}

.dw-final-logo-orbit {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 500px;
    height: 170px;
    transform:
        translate(-50%, -50%)
        rotateX(67deg);
    border:
        1px solid rgba(74, 218, 219, .15);
    border-radius: 50%;
    box-shadow:
        0 0 50px rgba(59, 209, 211, .04),
        inset 0 0 50px rgba(59, 209, 211, .025);
}

.dw-final-logo-orbit::before,
.dw-final-logo-orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border:
        1px dashed rgba(79, 215, 220, .10);
}

.dw-final-logo-orbit::before {
    inset: 15px 42px;
}

.dw-final-logo-orbit::after {
    inset: 31px 90px;
}

.dw-final-logo-floor {
    position: absolute;
    left: 50%;
    top: 70%;
    width: 420px;
    height: 36px;
    transform:
        translate(-50%, -50%);
    border:
        1px solid rgba(80, 219, 219, .18);
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse,
            rgba(73, 219, 214, .09),
            transparent 68%
        );
}

.dw-final-logo-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    transform-style: preserve-3d;
    animation:
        dwLogoFloat 4.8s ease-in-out infinite;
}

@keyframes dwLogoFloat {
    0%,
    100% {
        transform:
            translateY(2px)
            rotateY(-4deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotateY(4deg);
    }
}


/* -----------------------------------------
   DWENN MARK
   ----------------------------------------- */

.dw-final-mark {
    position: relative;
    width: 94px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform:
        skewY(-8deg);
}

.dw-final-bar {
    display: block;
    width: 15px;
    border-radius: 5px;
    transform-origin: 50% 100%;
    opacity: 0;
    transform:
        translateY(48px)
        scaleY(.08);

    background:
        linear-gradient(
            180deg,
            #6d91ff 0%,
            #4bcfcd 58%,
            #32bfa9 100%
        );

    box-shadow:
        0 0 11px rgba(75, 210, 207, .55),
        0 0 28px rgba(80, 132, 255, .20);
}

.dw-final-bar-1 {
    height: 76px;
}

.dw-final-bar-2 {
    height: 100px;
}

.dw-final-bar-3 {
    height: 84px;
}

.dw-final-bar-4 {
    height: 63px;
}


.dw-final-logo-trigger.is-playing
.dw-final-bar-1 {
    animation:
        dwLogoBuild .62s cubic-bezier(.18,.84,.24,1)
        .12s forwards;
}

.dw-final-logo-trigger.is-playing
.dw-final-bar-2 {
    animation:
        dwLogoBuild .62s cubic-bezier(.18,.84,.24,1)
        .48s forwards;
}

.dw-final-logo-trigger.is-playing
.dw-final-bar-3 {
    animation:
        dwLogoBuild .62s cubic-bezier(.18,.84,.24,1)
        .84s forwards;
}

.dw-final-logo-trigger.is-playing
.dw-final-bar-4 {
    animation:
        dwLogoBuild .62s cubic-bezier(.18,.84,.24,1)
        1.20s forwards;
}

@keyframes dwLogoBuild {
    0% {
        opacity: 0;
        transform:
            translateY(48px)
            scaleY(.08);
    }

    55% {
        opacity: 1;
        transform:
            translateY(-5px)
            scaleY(1.08);
    }

    100% {
        opacity: 1;
        transform:
            translateY(0)
            scaleY(1);
    }
}


/* -----------------------------------------
   WORDMARK
   ----------------------------------------- */

.dw-final-word {
    opacity: 0;
    transform:
        translateX(-14px);
    color: #f6faff;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 850;
    letter-spacing: .20em;
    line-height: 1;
    text-shadow:
        0 0 18px rgba(116, 180, 255, .14);
}

.dw-final-logo-trigger.is-playing
.dw-final-word {
    animation:
        dwWordReveal 1.35s
        cubic-bezier(.22,.61,.36,1)
        2.55s forwards;
}

@keyframes dwWordReveal {
    0% {
        opacity: 0;
        transform:
            translateX(-18px)
            scale(.97);
        letter-spacing: .30em;
        filter: blur(4px);
    }

    55% {
        opacity: .72;
        transform:
            translateX(-5px)
            scale(.99);
        letter-spacing: .23em;
        filter: blur(1px);
    }

    100% {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
        letter-spacing: .20em;
        filter: blur(0);
    }
}


/* -----------------------------------------
   SCAN / SIGNALS
   ----------------------------------------- */

.dw-final-logo-scan {
    position: absolute;
    z-index: 4;
    left: 22%;
    right: 22%;
    top: 24%;
    height: 2px;
    opacity: 0;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(123, 240, 236, .88),
            transparent
        );
    box-shadow:
        0 0 14px rgba(101, 230, 225, .56);
}

.dw-final-logo-trigger.is-playing
.dw-final-logo-scan {
    animation:
        dwLogoScan 2.35s ease
        .12s forwards;
}

@keyframes dwLogoScan {
    0% {
        opacity: 0;
        transform: translateY(-36px);
    }

    15% {
        opacity: .8;
    }

    85% {
        opacity: .8;
    }

    100% {
        opacity: 0;
        transform: translateY(170px);
    }
}

.dw-final-logo-pulse {
    position: absolute;
    left: 50%;
    top: 51%;
    width: 210px;
    height: 210px;
    transform:
        translate(-50%, -50%)
        scale(.5);
    border:
        1px solid rgba(92, 229, 223, .40);
    border-radius: 50%;
    opacity: 0;
}

.dw-final-logo-trigger.is-playing
.dw-final-logo-pulse {
    animation:
        dwLogoPulse 1.2s ease-out
        1.65s forwards;
}

@keyframes dwLogoPulse {
    0% {
        opacity: .52;
        transform:
            translate(-50%, -50%)
            scale(.45);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(1.7);
    }
}

.dw-final-logo-status {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform:
        translateX(-50%);
    display: flex;
    align-items: center;
    gap: 9px;
    color: #657f94;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .16em;
    white-space: nowrap;
    text-transform: uppercase;
}

.dw-final-logo-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #55d9d0;
    box-shadow:
        0 0 11px rgba(85, 217, 208, .76);
}


/* -----------------------------------------
   MOBILE
   ----------------------------------------- */

@media (max-width: 760px) {
    .cta-section.dw-final-holo-section {
        padding:
            84px 0 96px !important;
    }

    .dw-final-holo-wrap {
        width:
            min(100% - 28px, 1180px);
    }

    .dw-final-holo-copy h2 {
        font-size:
            clamp(36px, 10vw, 50px) !important;
    }

    .dw-final-logo-stage {
        width: 100%;
        height: 300px;
        margin-top: 26px;
    }

    .dw-final-logo-content {
        gap: 17px;
    }

    .dw-final-mark {
        width: 72px;
        height: 92px;
        gap: 6px;
    }

    .dw-final-bar {
        width: 11px;
    }

    .dw-final-bar-1 {
        height: 58px;
    }

    .dw-final-bar-2 {
        height: 78px;
    }

    .dw-final-bar-3 {
        height: 66px;
    }

    .dw-final-bar-4 {
        height: 49px;
    }

    .dw-final-word {
        font-size: 37px;
    }

    .dw-final-logo-orbit {
        width: 330px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dw-final-logo-content,
    .dw-final-bar,
    .dw-final-word,
    .dw-final-logo-scan,
    .dw-final-logo-pulse {
        animation: none !important;
    }

    .dw-final-bar,
    .dw-final-word {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =========================================================
   DWENN OFFICIAL 3-BAR MARK V2
   Matches the proportions of the site header brand mark.
   ========================================================= */

.dw-final-logo-content {
    gap: 24px;
}

.dw-final-mark {
    width: 92px;
    height: 112px;
    gap: 8px;
    align-items: flex-start;
    transform: skewY(-8deg);
}

.dw-final-bar {
    --dw-bar-y: 0px;

    width: 22px;
    height: 82px !important;
    margin-top: 0 !important;

    border-radius: 6px;

    background:
        linear-gradient(
            180deg,
            #5f8cff 0%,
            #30d3bb 100%
        );

    box-shadow:
        0 0 10px rgba(69, 212, 197, .48),
        0 0 25px rgba(95, 140, 255, .16);

    transform-origin: 50% 50%;

    opacity: 0;

    transform:
        translateY(
            calc(42px + var(--dw-bar-y))
        )
        scaleY(.08);
}

.dw-final-bar-1 {
    --dw-bar-y: 0px;
}

.dw-final-bar-2 {
    --dw-bar-y: 10px;
}

.dw-final-bar-3 {
    --dw-bar-y: 20px;
}


/*
 * Official three-bar assembly:
 * equal bar length, progressively shifted down,
 * exactly like the DWENN header mark.
 */
@keyframes dwLogoBuild {
    0% {
        opacity: 0;

        transform:
            translateY(
                calc(42px + var(--dw-bar-y))
            )
            scaleY(.08);
    }

    55% {
        opacity: 1;

        transform:
            translateY(
                calc(var(--dw-bar-y) - 4px)
            )
            scaleY(1.06);
    }

    100% {
        opacity: 1;

        transform:
            translateY(
                var(--dw-bar-y)
            )
            scaleY(1);
    }
}

.dw-final-logo-trigger.is-playing
.dw-final-bar-1 {
    animation:
        dwLogoBuild
        .72s
        cubic-bezier(.18,.84,.24,1)
        .10s
        forwards;
}

.dw-final-logo-trigger.is-playing
.dw-final-bar-2 {
    animation:
        dwLogoBuild
        .72s
        cubic-bezier(.18,.84,.24,1)
        .92s
        forwards;
}

.dw-final-logo-trigger.is-playing
.dw-final-bar-3 {
    animation:
        dwLogoBuild
        .72s
        cubic-bezier(.18,.84,.24,1)
        1.74s
        forwards;
}


/* Remove obsolete fourth-bar rules */
.dw-final-bar-4 {
    display: none !important;
}


/* Keep icon/wordmark proportions closer to official logo */
.dw-final-word {
    font-size: clamp(44px, 4.8vw, 66px);
    letter-spacing: .19em;
}


@media (max-width: 760px) {

    .dw-final-mark {
        width: 68px;
        height: 86px;
        gap: 6px;
    }

    .dw-final-bar {
        width: 16px;
        height: 61px !important;
        border-radius: 4px;
    }

    .dw-final-bar-2 {
        --dw-bar-y: 7px;
    }

    .dw-final-bar-3 {
        --dw-bar-y: 14px;
    }

    .dw-final-word {
        font-size: 37px;
    }
}