/* =========================================================
   DYNAMO DEV — Global Motion System
   Smooth section reveals, custom cursor and branded scrollbar
   ========================================================= */

:root {
    --dd-motion-blue: #119cff;
    --dd-motion-cyan: #27e4ff;
    --dd-motion-violet: #7d5cff;
    --dd-motion-bg: #020912;
    --dd-motion-border: rgba(17, 156, 255, .32);
    --dd-motion-ease: cubic-bezier(.16, 1, .3, 1);
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: #168fe8 #030a12;
}

body {
    overflow-x: hidden;
}

/* Branded scrollbar — Chromium / Safari */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #030a12;
}

::-webkit-scrollbar-thumb {
    min-height: 52px;
    border: 2px solid #030a12;
    border-radius: 999px;
    background: linear-gradient(180deg, #19b8ff 0%, #187eea 52%, #7659ff 100%);
    box-shadow: 0 0 18px rgba(17, 156, 255, .28);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #32c6ff 0%, #2195ff 50%, #8b6cff 100%);
}

/* ---------------------------------------------------------
   Section reveal
   First page section stays immediately visible. Every next
   section enters only when it approaches the viewport.
   --------------------------------------------------------- */
html.dd-motion-ready main > section.dd-motion-section {
    opacity: 0;
    transform: translate3d(0, 58px, 0) scale(.988);
    filter: blur(5px);
    transition:
        opacity .9s var(--dd-motion-ease),
        transform 1.05s var(--dd-motion-ease),
        filter .9s var(--dd-motion-ease);
    will-change: opacity, transform, filter;
}

html.dd-motion-ready main > section.dd-motion-section.dd-motion-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* A soft light sweep makes the reveal feel intentional, not flashy. */
main > section.dd-motion-section {
    position: relative;
}

main > section.dd-motion-section::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    width: min(760px, 70vw);
    height: 1px;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-50%) scaleX(.35);
    background: linear-gradient(90deg, transparent, rgba(39, 228, 255, .34), rgba(17, 156, 255, .5), transparent);
    transition: opacity 1.1s var(--dd-motion-ease) .08s, transform 1.15s var(--dd-motion-ease) .08s;
}

main > section.dd-motion-section.dd-motion-visible::after {
    opacity: .55;
    transform: translateX(-50%) scaleX(1);
}

/* Staggered children inside each section */
html.dd-motion-ready .dd-motion-item {
    opacity: 0;
    transition: opacity .72s var(--dd-motion-ease);
    transition-delay: var(--dd-motion-delay, 0ms);
}

html.dd-motion-ready .dd-motion-visible .dd-motion-item {
    opacity: 1;
}

/* Keep section contents above the decorative sweep without changing their
   original positioning. This is important for sections that use absolute
   decorative layers (for example the Home "Final Word" section). */
main > section.dd-motion-section > * {
    z-index: 1;
}

/* Preserve intentional decorative layers in the Final Word section. */
#final-word > .final-stage,
#final-word > .final-glow,
#final-word > .sec-index {
    position: absolute;
}

#final-word > .final-stage,
#final-word > .final-glow {
    z-index: 0;
}

/* ---------------------------------------------------------
   Cursor
   Enabled only on true mouse / trackpad devices.
   --------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    html.dd-cursor-enabled,
    html.dd-cursor-enabled body,
    html.dd-cursor-enabled a,
    html.dd-cursor-enabled button,
    html.dd-cursor-enabled [role="button"],
    html.dd-cursor-enabled input,
    html.dd-cursor-enabled textarea,
    html.dd-cursor-enabled select,
    html.dd-cursor-enabled label {
        cursor: none !important;
    }

    .dd-cursor-ring,
    .dd-cursor-dot {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2147483646;
        pointer-events: none;
        opacity: 0;
        transform: translate3d(-100px, -100px, 0);
        transition: opacity .18s ease, width .24s var(--dd-motion-ease), height .24s var(--dd-motion-ease), border-color .24s ease, background-color .24s ease, box-shadow .24s ease;
    }

    .dd-cursor-ring {
        width: 46px;
        height: 46px;
        margin: -23px 0 0 -23px;
        border: 2px solid rgba(101, 92, 255, .92);
        border-radius: 50%;
        background: rgba(12, 35, 59, .09);
        box-shadow:
            0 0 0 1px rgba(17, 156, 255, .13) inset,
            0 0 18px rgba(86, 80, 255, .16);
        backdrop-filter: blur(1px);
    }

    .dd-cursor-dot {
        width: 10px;
        height: 10px;
        margin: -5px 0 0 -5px;
        border-radius: 50%;
        background: var(--dd-motion-cyan);
        box-shadow: 0 0 16px rgba(39, 228, 255, .75);
    }

    html.dd-cursor-active .dd-cursor-ring,
    html.dd-cursor-active .dd-cursor-dot {
        opacity: 1;
    }

    .dd-cursor-ring.is-hovering {
        width: 64px;
        height: 64px;
        margin: -32px 0 0 -32px;
        border-color: rgba(17, 156, 255, .92);
        background: rgba(17, 156, 255, .08);
        box-shadow:
            0 0 0 1px rgba(39, 228, 255, .16) inset,
            0 0 26px rgba(17, 156, 255, .22);
    }

    .dd-cursor-ring.is-pressed {
        width: 38px;
        height: 38px;
        margin: -19px 0 0 -19px;
        border-color: var(--dd-motion-cyan);
    }
}

/* Better anchor positioning below the sticky header. */
section[id], [id].service-detail {
    scroll-margin-top: 92px;
}

/* Accessibility: motion-sensitive visitors get the same content instantly. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    html.dd-motion-ready main > section.dd-motion-section,
    html.dd-motion-ready .dd-motion-item {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    main > section.dd-motion-section::after {
        display: none;
    }

    .dd-cursor-ring,
    .dd-cursor-dot {
        display: none !important;
    }
}

/* Touch devices keep the native interaction model. */
@media (hover: none), (pointer: coarse) {
    .dd-cursor-ring,
    .dd-cursor-dot {
        display: none !important;
    }
}