/*
===============================================================================
FILE: static/css/dwf-logo.css

PURPOSE:
    Presents the Drinks With Friendz logo as a floating, spatial neon client
    showcase without changing the original logo artwork or brand colors.

UPDATED:
    July 16, 2026

RESPONSIBILITIES:
    [x] Remove the boxed image appearance
    [x] Preserve the original animated SVG
    [x] Create an open spatial presentation
    [x] Add ambient light behind the logo
    [x] Add subtle depth and perspective
    [x] Add floating orbit details
    [x] Add restrained particles
    [x] Add a soft floor reflection
    [x] Support hover and focus interaction
    [x] Scale correctly on desktop, tablet, and mobile
    [x] Support reduced-motion preferences

HTML DEPENDENCIES:
    .dwf-logo-showcase
    .dwf-logo-showcase__space
    .dwf-logo-showcase__orbit
    .dwf-logo-showcase__particle
    .dwf-logo-showcase__ambient
    .dwf-logo-showcase__stage
    .dwf-logo-showcase__backlight
    .dwf-logo-showcase__logo
    .dwf-logo-showcase__surface-light
    .dwf-logo-showcase__reflection

IMPORTANT RULES:
    [x] Do not recolor the client logo
    [x] Do not reshape the client logo
    [x] Do not place text over the client logo
    [x] Do not create a visible square behind the logo
    [x] Effects must support the logo instead of overpowering it
    [x] The SVG remains the primary source of neon animation
===============================================================================
*/

/* ==========================================================================
   SHOWCASE FOUNDATION
========================================================================== */

.dwf-logo-showcase {
    --dwf-stage-rotate-x: 0deg;
    --dwf-stage-rotate-y: 0deg;
    --dwf-stage-shift-x: 0px;
    --dwf-stage-shift-y: 0px;
    --dwf-stage-scale: 1;

    position: relative;
    isolation: isolate;
    width: 100%;
    min-height: clamp(460px, 52vw, 720px);
    display: grid;
    place-items: center;
    margin: 0;
    padding:
        clamp(32px, 5vw, 72px)
        clamp(18px, 4vw, 56px)
        clamp(46px, 6vw, 86px);
    overflow: hidden;
    perspective: 1400px;
    transform-style: preserve-3d;
    background: transparent;
}

/*
No card-colored background is applied here.

The parent client spotlight may still provide its own section atmosphere,
but this logo stage itself remains visually open.
*/

.dwf-logo-showcase::before {
    content: "";
    position: absolute;
    z-index: -5;
    top: 50%;
    left: 50%;
    width: min(92%, 760px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.62;
    background:
        radial-gradient(
            circle,
            rgba(56, 189, 248, 0.13) 0%,
            rgba(14, 165, 233, 0.07) 32%,
            rgba(34, 197, 94, 0.035) 49%,
            transparent 72%
        );
    filter: blur(34px);
    transform:
        translate(-50%, -50%)
        scale(0.94);
    animation:
        dwfAtmosphereBreathe
        7.5s
        ease-in-out
        infinite;
}

.dwf-logo-showcase::after {
    content: "";
    position: absolute;
    z-index: -4;
    right: 8%;
    bottom: 7%;
    left: 8%;
    height: 18%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.28;
    background:
        radial-gradient(
            ellipse,
            rgba(41, 168, 232, 0.2),
            rgba(156, 216, 66, 0.07) 36%,
            transparent 72%
        );
    filter: blur(26px);
    transform:
        perspective(500px)
        rotateX(72deg)
        scaleX(0.92);
}

/* ==========================================================================
   SPATIAL DECORATION LAYER
========================================================================== */

.dwf-logo-showcase__space {
    position: absolute;
    z-index: 1;
    inset: 5%;
    overflow: visible;
    pointer-events: none;
    transform-style: preserve-3d;
}

.dwf-logo-showcase__orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(125, 211, 252, 0.12);
    border-radius: 50%;
    opacity: 0.58;
    transform-style: preserve-3d;
}

.dwf-logo-showcase__orbit::before,
.dwf-logo-showcase__orbit::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.dwf-logo-showcase__orbit::before {
    top: -3px;
    left: 50%;
    width: 6px;
    height: 6px;
    background: #7dd3fc;
    box-shadow:
        0 0 8px rgba(125, 211, 252, 0.95),
        0 0 20px rgba(56, 189, 248, 0.54);
}

.dwf-logo-showcase__orbit::after {
    right: 8%;
    bottom: 10%;
    width: 4px;
    height: 4px;
    background: #a3e635;
    box-shadow:
        0 0 7px rgba(163, 230, 53, 0.9),
        0 0 16px rgba(132, 204, 22, 0.48);
}

.dwf-logo-showcase__orbit--outer {
    width: min(88%, 650px);
    aspect-ratio: 1;
    animation:
        dwfOrbitOuter
        28s
        linear
        infinite;
}

.dwf-logo-showcase__orbit--inner {
    width: min(70%, 510px);
    aspect-ratio: 1;
    border-color: rgba(163, 230, 53, 0.1);
    animation:
        dwfOrbitInner
        21s
        linear
        infinite
        reverse;
}

/* ==========================================================================
   PARTICLES
========================================================================== */

.dwf-logo-showcase__particle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.5;
    background: #7dd3fc;
    box-shadow:
        0 0 8px rgba(125, 211, 252, 0.9),
        0 0 18px rgba(56, 189, 248, 0.52);
    animation:
        dwfParticleDrift
        var(--dwf-particle-duration, 7s)
        ease-in-out
        infinite;
}

.dwf-logo-showcase__particle--one {
    top: 19%;
    left: 17%;
    --dwf-particle-duration: 8.2s;
}

.dwf-logo-showcase__particle--two {
    top: 29%;
    right: 13%;
    width: 4px;
    height: 4px;
    background: #a3e635;
    box-shadow:
        0 0 8px rgba(163, 230, 53, 0.88),
        0 0 18px rgba(132, 204, 22, 0.46);
    --dwf-particle-duration: 6.8s;
    animation-delay: -2.4s;
}

.dwf-logo-showcase__particle--three {
    right: 22%;
    bottom: 24%;
    width: 3px;
    height: 3px;
    --dwf-particle-duration: 9.1s;
    animation-delay: -4.3s;
}

.dwf-logo-showcase__particle--four {
    bottom: 18%;
    left: 22%;
    width: 4px;
    height: 4px;
    background: #facc15;
    box-shadow:
        0 0 8px rgba(250, 204, 21, 0.88),
        0 0 18px rgba(250, 204, 21, 0.42);
    --dwf-particle-duration: 7.6s;
    animation-delay: -1.6s;
}

/* ==========================================================================
   AMBIENT LIGHT
========================================================================== */

.dwf-logo-showcase__ambient {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: min(82%, 690px);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.72;
    background:
        radial-gradient(
            circle at 43% 37%,
            rgba(255, 255, 255, 0.08),
            transparent 23%
        ),
        radial-gradient(
            circle,
            rgba(41, 168, 232, 0.16),
            rgba(156, 216, 66, 0.055) 43%,
            transparent 72%
        );
    filter: blur(38px);
    transform:
        translate(-50%, -50%)
        translateZ(-60px);
    animation:
        dwfAmbientPulse
        6.6s
        ease-in-out
        infinite;
}

/* ==========================================================================
   LOGO STAGE
========================================================================== */

.dwf-logo-showcase__stage {
    position: relative;
    z-index: 10;
    width: min(100%, 760px);
    display: grid;
    place-items: center;
    transform:
        translate3d(
            var(--dwf-stage-shift-x),
            var(--dwf-stage-shift-y),
            0
        )
        rotateX(var(--dwf-stage-rotate-x))
        rotateY(var(--dwf-stage-rotate-y))
        scale(var(--dwf-stage-scale));
    transform-origin: center;
    transform-style: preserve-3d;
    transition:
        transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 320ms ease;
    will-change: transform;
}

.dwf-logo-showcase:hover .dwf-logo-showcase__stage {
    --dwf-stage-scale: 1.025;

    filter:
        brightness(1.06)
        saturate(1.03);
}

/* ==========================================================================
   BACKLIGHT
========================================================================== */

.dwf-logo-showcase__backlight {
    position: absolute;
    z-index: -2;
    top: 50%;
    left: 50%;
    width: 76%;
    height: 76%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.68;
    background:
        radial-gradient(
            circle at 46% 40%,
            rgba(41, 168, 232, 0.24),
            rgba(156, 216, 66, 0.09) 36%,
            rgba(248, 154, 34, 0.045) 54%,
            transparent 73%
        );
    filter: blur(26px);
    transform:
        translate(-50%, -50%)
        translateZ(-32px);
    animation:
        dwfBacklightBreathe
        5.8s
        ease-in-out
        infinite;
}

.dwf-logo-showcase__backlight::before {
    content: "";
    position: absolute;
    inset: 18%;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.075),
            transparent 66%
        );
    filter: blur(8px);
}

/* ==========================================================================
   LOGO ARTWORK
========================================================================== */

.dwf-logo-showcase__logo {
    position: relative;
    z-index: 5;
    display: block;
    width: min(100%, 700px);
    height: auto;
    max-height: 650px;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    background: transparent;
    filter:
        drop-shadow(
            0 20px 30px
            rgba(0, 0, 0, 0.32)
        )
        drop-shadow(
            0 0 18px
            rgba(41, 168, 232, 0.16)
        );
    transform:
        translateZ(34px);
    transform-origin: center;
    animation:
        dwfLogoFloat
        6.9s
        ease-in-out
        infinite;
}

/*
The SVG already owns the detailed neon sequence.

This outer animation only creates spatial motion and does not alter
the client's artwork or color treatment.
*/

/* ==========================================================================
   SURFACE LIGHT
========================================================================== */

.dwf-logo-showcase__surface-light {
    position: absolute;
    z-index: 8;
    top: 7%;
    left: 13%;
    width: 54%;
    height: 22%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.2;
    background:
        linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.33),
            rgba(186, 230, 253, 0.08) 42%,
            transparent 72%
        );
    filter: blur(12px);
    mix-blend-mode: screen;
    transform:
        rotate(-17deg)
        translateZ(60px);
    animation:
        dwfSurfaceLightTravel
        8.8s
        ease-in-out
        infinite;
}

/* ==========================================================================
   FLOOR REFLECTION
========================================================================== */

.dwf-logo-showcase__reflection {
    position: absolute;
    z-index: 4;
    right: 16%;
    bottom: 4%;
    left: 16%;
    height: 16%;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0.35;
    background:
        radial-gradient(
            ellipse,
            rgba(41, 168, 232, 0.24),
            rgba(156, 216, 66, 0.08) 32%,
            rgba(248, 154, 34, 0.04) 48%,
            transparent 72%
        );
    filter: blur(22px);
    transform:
        perspective(520px)
        rotateX(72deg)
        scaleX(0.9);
    animation:
        dwfFloorReflection
        6.9s
        ease-in-out
        infinite;
}

/* ==========================================================================
   INTERACTION STATES
========================================================================== */

.dwf-logo-showcase:hover .dwf-logo-showcase__orbit--outer {
    border-color: rgba(125, 211, 252, 0.22);
}

.dwf-logo-showcase:hover .dwf-logo-showcase__orbit--inner {
    border-color: rgba(163, 230, 53, 0.19);
}

.dwf-logo-showcase:hover .dwf-logo-showcase__ambient {
    opacity: 0.92;
}

.dwf-logo-showcase:hover .dwf-logo-showcase__backlight {
    opacity: 0.88;
}

.dwf-logo-showcase:hover .dwf-logo-showcase__reflection {
    opacity: 0.5;
}

/* ==========================================================================
   ANIMATIONS
========================================================================== */

@keyframes dwfAtmosphereBreathe {
    0%,
    100% {
        opacity: 0.5;
        transform:
            translate(-50%, -50%)
            scale(0.92);
    }

    50% {
        opacity: 0.76;
        transform:
            translate(-50%, -50%)
            scale(1.06);
    }
}

@keyframes dwfAmbientPulse {
    0%,
    100% {
        opacity: 0.56;
        transform:
            translate(-50%, -50%)
            translateZ(-60px)
            scale(0.94);
    }

    50% {
        opacity: 0.82;
        transform:
            translate(-50%, -50%)
            translateZ(-60px)
            scale(1.08);
    }
}

@keyframes dwfBacklightBreathe {
    0%,
    100% {
        opacity: 0.52;
        transform:
            translate(-50%, -50%)
            translateZ(-32px)
            scale(0.94);
    }

    50% {
        opacity: 0.82;
        transform:
            translate(-50%, -50%)
            translateZ(-32px)
            scale(1.06);
    }
}

@keyframes dwfLogoFloat {
    0%,
    100% {
        transform:
            translate3d(0, 0, 34px)
            rotateZ(-0.25deg);
    }

    28% {
        transform:
            translate3d(3px, -8px, 44px)
            rotateZ(0.2deg);
    }

    55% {
        transform:
            translate3d(-2px, -15px, 52px)
            rotateZ(0.38deg);
    }

    76% {
        transform:
            translate3d(2px, -7px, 42px)
            rotateZ(-0.12deg);
    }
}

@keyframes dwfSurfaceLightTravel {
    0%,
    100% {
        opacity: 0.12;
        transform:
            translate3d(-14px, 4px, 60px)
            rotate(-17deg)
            scale(0.92);
    }

    48% {
        opacity: 0.3;
        transform:
            translate3d(18px, -5px, 66px)
            rotate(-12deg)
            scale(1.08);
    }
}

@keyframes dwfFloorReflection {
    0%,
    100% {
        opacity: 0.26;
        transform:
            perspective(520px)
            rotateX(72deg)
            scaleX(0.84)
            scaleY(0.9);
    }

    50% {
        opacity: 0.42;
        transform:
            perspective(520px)
            rotateX(72deg)
            scaleX(0.96)
            scaleY(1.04);
    }
}

@keyframes dwfOrbitOuter {
    from {
        transform:
            translate(-50%, -50%)
            rotateZ(0deg)
            rotateX(69deg)
            rotateY(8deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateZ(360deg)
            rotateX(69deg)
            rotateY(8deg);
    }
}

@keyframes dwfOrbitInner {
    from {
        transform:
            translate(-50%, -50%)
            rotateZ(0deg)
            rotateY(67deg)
            rotateX(18deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotateZ(360deg)
            rotateY(67deg)
            rotateX(18deg);
    }
}

@keyframes dwfParticleDrift {
    0%,
    100% {
        opacity: 0.18;
        transform:
            translate3d(0, 8px, 0)
            scale(0.7);
    }

    35% {
        opacity: 0.7;
        transform:
            translate3d(8px, -8px, 24px)
            scale(1);
    }

    70% {
        opacity: 0.38;
        transform:
            translate3d(-5px, -18px, 10px)
            scale(0.82);
    }
}

/* ==========================================================================
   LARGE SCREENS
========================================================================== */

@media (min-width: 1500px) {
    .dwf-logo-showcase {
        min-height: 760px;
    }

    .dwf-logo-showcase__stage {
        width: min(100%, 820px);
    }

    .dwf-logo-showcase__logo {
        width: min(100%, 760px);
        max-height: 700px;
    }

    .dwf-logo-showcase__orbit--outer {
        width: min(90%, 730px);
    }

    .dwf-logo-showcase__orbit--inner {
        width: min(72%, 560px);
    }
}

/* ==========================================================================
   TABLET
========================================================================== */

@media (max-width: 1020px) {
    .dwf-logo-showcase {
        min-height: 620px;
        padding:
            44px
            22px
            64px;
    }

    .dwf-logo-showcase__stage {
        width: min(100%, 670px);
    }

    .dwf-logo-showcase__logo {
        width: min(100%, 620px);
    }

    .dwf-logo-showcase__orbit--outer {
        width: min(92%, 580px);
    }

    .dwf-logo-showcase__orbit--inner {
        width: min(72%, 450px);
    }
}

/* ==========================================================================
   MOBILE
========================================================================== */

@media (max-width: 760px) {
    .dwf-logo-showcase {
        min-height: 480px;
        padding:
            32px
            8px
            52px;
    }

    .dwf-logo-showcase__space {
        inset: 2%;
    }

    .dwf-logo-showcase__stage {
        width: 100%;
    }

    .dwf-logo-showcase__logo {
        width: min(108%, 480px);
        max-width: none;
        max-height: 440px;
    }

    .dwf-logo-showcase__orbit--outer {
        width: min(112vw, 470px);
    }

    .dwf-logo-showcase__orbit--inner {
        width: min(90vw, 370px);
    }

    .dwf-logo-showcase__particle--one {
        left: 8%;
    }

    .dwf-logo-showcase__particle--two {
        right: 8%;
    }

    .dwf-logo-showcase__reflection {
        right: 8%;
        left: 8%;
        bottom: 2%;
    }
}

/* ==========================================================================
   SMALL MOBILE
========================================================================== */

@media (max-width: 480px) {
    .dwf-logo-showcase {
        min-height: 390px;
        padding:
            22px
            0
            40px;
    }

    .dwf-logo-showcase__logo {
        width: min(118%, 390px);
        max-height: 360px;
    }

    .dwf-logo-showcase__orbit--outer {
        width: min(118vw, 390px);
    }

    .dwf-logo-showcase__orbit--inner {
        width: min(94vw, 310px);
    }

    .dwf-logo-showcase__particle--three,
    .dwf-logo-showcase__particle--four {
        display: none;
    }

    .dwf-logo-showcase__surface-light {
        opacity: 0.14;
    }
}

/* ==========================================================================
   REDUCED MOTION
========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .dwf-logo-showcase::before,
    .dwf-logo-showcase__orbit,
    .dwf-logo-showcase__particle,
    .dwf-logo-showcase__ambient,
    .dwf-logo-showcase__backlight,
    .dwf-logo-showcase__logo,
    .dwf-logo-showcase__surface-light,
    .dwf-logo-showcase__reflection {
        animation: none !important;
        transition: none !important;
    }

    .dwf-logo-showcase__stage,
    .dwf-logo-showcase:hover .dwf-logo-showcase__stage {
        transform: none;
        filter: none;
    }

    .dwf-logo-showcase__logo {
        transform: none;
    }
}