/*===================================================
    Brand motion styles
    Companion to assets/js/brand-motion.js. Loaded last so it can rely on the
    brand custom properties defined in brand.css.
====================================================*/

/* Reveal targets start hidden, but only when scripting can bring them back.
   Without this guard a JS failure would leave the page permanently blank. */
.js [data-reveal] {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .js [data-reveal] {
        visibility: visible;
    }
}

/* ---------- Velocity marquee ---------- */
/* GSAP takes this row over from the theme's keyframe animation (see
   brand-motion.js). Declaring it here as well means the handover is not
   dependent on inline-style timing. */
[data-velocity-marquee][data-animated="true"] .dl-scroller__inner {
    animation: none;
    will-change: transform;
}

/* ---------- Horizontal pinned panels ---------- */
.horizontal-section {
    overflow: hidden;
}

.horizontal-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 30px;
    will-change: transform;
}

.horizontal-panel {
    flex: 0 0 auto;
    width: min(420px, 78vw);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 38px 34px;
    border: 1px solid var(--dl-border-color);
    border-radius: 18px;
    background: var(--dl-bg-grey);
    transition: border-color 0.4s ease, transform 0.4s ease;
}

.horizontal-panel:hover {
    border-color: var(--dl-primary-color);
}

.horizontal-panel .panel-step {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dl-primary-color);
    margin-bottom: 20px;
    display: block;
}

.horizontal-panel h3 {
    font-size: 24px;
    margin-bottom: 14px;
}

.horizontal-panel p {
    margin-bottom: 0;
}

.horizontal-panel .panel-icon {
    margin-bottom: 26px;
}

/* Below the pin breakpoint the panels become an ordinary stacked list, so the
   section reads normally on phones instead of trapping the scroll. */
@media (max-width: 991px) {
    .horizontal-track {
        flex-wrap: wrap;
        gap: 20px;
        transform: none !important;
    }

    .horizontal-panel {
        width: 100%;
    }
}

/* ---------- Line-draw icons ---------- */
[data-draw] svg {
    width: 56px;
    height: 56px;
    overflow: visible;
}

[data-draw] svg path,
[data-draw] svg line,
[data-draw] svg circle,
[data-draw] svg rect,
[data-draw] svg polyline,
[data-draw] svg polygon {
    fill: none;
    stroke: var(--dl-primary-color);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Cursor states ---------- */
.mouse-cursor.cursor-contact,
.cursor.cursor-contact {
    transform: scale(1.6);
}

.mouse-cursor.cursor-drag::after,
.cursor.cursor-drag::after {
    content: "drag";
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---------- Page transitions ---------- */
/* Cross-document view transitions, deliberately NOT Astro's ClientRouter.
   The theme initialises ScrollSmoother, the custom cursor, Pace and every
   GSAP timeline once on DOMContentLoaded; an SPA router would swap the
   document without re-running any of it. This keeps real page loads — so
   every script re-runs exactly as it does today — and asks the browser to
   animate between them. Browsers without support simply navigate normally. */
@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: bh-page-out 0.32s cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
    animation: bh-page-in 0.42s cubic-bezier(0, 0, 0.2, 1) both;
}

@keyframes bh-page-out {
    to {
        opacity: 0;
        transform: translateY(-14px);
    }
}

@keyframes bh-page-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

/* The header is identical across routes, so holding it still through the
   swap is what makes navigation read as one continuous surface rather than
   two separate documents. */
.main-header {
    view-transition-name: bh-header;
}

::view-transition-old(bh-header),
::view-transition-new(bh-header) {
    animation: none;
    mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}