/* ==========================================================================
   RAWBURTZ BUILD 046 — PUBLIC NERVOUS SYSTEM
   Motion and responsive behavior layered over BUILD 043/044/045.
   ========================================================================== */

.rb046-nervous-system {
    --rb046-ease: cubic-bezier(.2,.8,.2,1);
    --rb046-fast: 180ms;
    --rb046-medium: 420ms;
    --rb046-slow: 780ms;
}

/* ------------------------------------------------------------
   VIEWPORT REVEAL
   ------------------------------------------------------------ */

.rb046-reveal {
    --rb046-reveal-y: 26px;
    opacity: 0;
    transform: translate3d(0, var(--rb046-reveal-y), 0);
    transition:
        opacity var(--rb046-slow) var(--rb046-ease),
        transform var(--rb046-slow) var(--rb046-ease);
    transition-delay: var(--rb046-delay, 0ms);
}

.rb046-reveal.is-rb046-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.rb046-reveal[data-rb046-reveal="left"] {
    --rb046-reveal-y: 0px;
    transform: translate3d(-28px, 0, 0);
}

.rb046-reveal[data-rb046-reveal="left"].is-rb046-visible {
    transform: translate3d(0, 0, 0);
}

.rb046-reveal[data-rb046-reveal="right"] {
    --rb046-reveal-y: 0px;
    transform: translate3d(28px, 0, 0);
}

.rb046-reveal[data-rb046-reveal="right"].is-rb046-visible {
    transform: translate3d(0, 0, 0);
}

/* ------------------------------------------------------------
   SIGNAL TRACE
   ------------------------------------------------------------ */

.rb046-signal-trace {
    position: relative;
}

.rb046-signal-trace::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: var(--rb044-signal, #ff1a1a);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 520ms var(--rb046-ease);
    pointer-events: none;
}

.rb046-signal-trace.is-rb046-visible::after,
.rb046-signal-trace:hover::after,
.rb046-signal-trace:focus-within::after {
    transform: scaleX(1);
}

/* ------------------------------------------------------------
   ARTWORK PRESENCE / MICRO DRIFT
   ------------------------------------------------------------ */

.rb046-art-presence {
    --rb046-art-x: 0px;
    --rb046-art-y: 0px;
    --rb046-art-rx: 0deg;
    --rb046-art-ry: 0deg;
    transform:
        perspective(1100px)
        translate3d(var(--rb046-art-x), var(--rb046-art-y), 0)
        rotateX(var(--rb046-art-rx))
        rotateY(var(--rb046-art-ry));
    transform-style: preserve-3d;
    transition: transform 380ms var(--rb046-ease);
    will-change: transform;
}

.rb046-art-presence.is-rb046-active {
    transition-duration: 90ms;
}

.rb046-art-presence img {
    transition:
        transform 560ms var(--rb046-ease),
        filter 360ms ease;
}

.rb046-art-presence:hover img {
    filter: saturate(1.04) contrast(1.025);
}

/* Slightly lift artwork cards, never enough to feel like generic ecommerce. */
.rb046-card-response {
    position: relative;
    transition:
        transform 280ms var(--rb046-ease),
        background-color 280ms ease,
        border-color 280ms ease;
}

.rb046-card-response::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 3px;
    background: #ff1a1a;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 280ms var(--rb046-ease);
    pointer-events: none;
}

.rb046-card-response:hover {
    transform: translate3d(0,-3px,0);
}

.rb046-card-response:hover::after,
.rb046-card-response:focus-within::after {
    transform: scaleX(1);
}

/* ------------------------------------------------------------
   BUTTON / LINK RESPONSE
   ------------------------------------------------------------ */

.rb046-nervous-system .button-primary,
.rb046-nervous-system .button-secondary,
.rb046-nervous-system .text-link,
.rb046-nervous-system .nav-link,
.rb046-nervous-system button[type="submit"] {
    --rb046-button-x: 0px;
    --rb046-button-y: 0px;
}

.rb046-magnetic {
    transform: translate3d(var(--rb046-button-x), var(--rb046-button-y), 0);
    transition: transform 160ms var(--rb046-ease);
    will-change: transform;
}

.rb046-magnetic.is-rb046-active {
    transition-duration: 60ms;
}

/* ------------------------------------------------------------
   SECTION SIGNAL PULSE
   ------------------------------------------------------------ */

.rb046-section-pulse {
    position: relative;
}

.rb046-section-pulse::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: #ff1a1a;
    opacity: .9;
    transition: height 720ms var(--rb046-ease);
    pointer-events: none;
    z-index: 5;
}

.rb046-section-pulse.is-rb046-visible::before {
    height: min(100%, 120px);
}

/* ------------------------------------------------------------
   RANDOMIZED MARK RESPONSE
   ------------------------------------------------------------ */

.rb045-mark-layer.is-visible {
    transition:
        opacity .85s var(--rb046-ease),
        transform 1.1s var(--rb046-ease),
        filter .5s ease;
}

.rb046-mark-reacting {
    --rb046-mark-shift-x: 0px;
    --rb046-mark-shift-y: 0px;
}

.rb046-mark-reacting > .rb045-mark-layer.is-visible {
    transform:
        translate3d(
            calc(var(--rb045-x, 0px) + var(--rb046-mark-shift-x)),
            calc(var(--rb045-y, 0px) + var(--rb046-mark-shift-y)),
            0
        )
        rotate(var(--rb045-rotate, -6deg))
        scale(var(--rb045-scale, 1));
}

/* ------------------------------------------------------------
   HERO BREATHING
   ------------------------------------------------------------ */

.rb043-hero-title,
.rb044-realm > section:first-child h1 {
    text-wrap: balance;
}

.rb046-nervous-system .rb043-hero-actions,
.rb046-nervous-system .rb043-hero-note {
    transition: transform 460ms var(--rb046-ease);
}

.rb046-nervous-system .rb043-hero:hover .rb043-hero-actions {
    transform: translate3d(4px,0,0);
}

.rb046-nervous-system .rb043-hero:hover .rb043-hero-note {
    transform: translate3d(-3px,0,0);
}

/* ------------------------------------------------------------
   FORMS
   ------------------------------------------------------------ */

.rb046-nervous-system input,
.rb046-nervous-system textarea,
.rb046-nervous-system select {
    transition:
        border-color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.rb046-nervous-system input:focus,
.rb046-nervous-system textarea:focus,
.rb046-nervous-system select:focus {
    box-shadow: inset 3px 0 0 #ff1a1a;
}

/* ------------------------------------------------------------
   MOBILE / REDUCED MOTION
   ------------------------------------------------------------ */

@media (max-width: 820px) {
    .rb046-art-presence,
    .rb046-magnetic {
        transform: none !important;
    }

    .rb046-card-response:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rb046-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .rb046-art-presence,
    .rb046-magnetic,
    .rb046-mark-reacting > .rb045-mark-layer.is-visible {
        transform: none !important;
        transition: none !important;
    }

    .rb046-signal-trace::after,
    .rb046-card-response::after,
    .rb046-section-pulse::before {
        transition: none !important;
    }
}

@media print {
    .rb046-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .rb046-section-pulse::before,
    .rb046-card-response::after,
    .rb046-signal-trace::after {
        display: none !important;
    }
}

/* ==========================================================================
   RAWBURTZ BUILD 046 R2 — ALL-SCREEN SIGNAL MARQUEE
   Continuous, measured, seamless signal strip on desktop + mobile.
   ========================================================================== */

.rb043-signal-strip {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}

.rb043-signal-track.rb046-mobile-marquee,
.rb043-signal-track.rb046-all-screen-marquee {
    display: flex;
    width: max-content;
    min-width: max-content;
    justify-content: flex-start;
    gap: var(--rb046-marquee-gap, 42px);
    padding-left: 24px;
    padding-right: 24px;
    will-change: transform;
    animation:
        rb046-signal-marquee
        var(--rb046-marquee-duration, 24s)
        linear
        infinite;
}

.rb043-signal-track.rb046-mobile-marquee > span,
.rb043-signal-track.rb046-all-screen-marquee > span {
    flex: 0 0 auto;
}

@keyframes rb046-signal-marquee {
    from {
        transform: translate3d(0,0,0);
    }
    to {
        transform: translate3d(
            calc(-1 * var(--rb046-marquee-distance, 600px)),
            0,
            0
        );
    }
}

@media (min-width: 821px) {
    .rb043-signal-track.rb046-mobile-marquee,
    .rb043-signal-track.rb046-all-screen-marquee {
        gap: var(--rb046-marquee-gap, 54px);
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rb043-signal-strip {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .rb043-signal-strip::-webkit-scrollbar {
        display: none;
    }

    .rb043-signal-track.rb046-mobile-marquee,
    .rb043-signal-track.rb046-all-screen-marquee {
        animation: none !important;
        transform: none !important;
    }
}


/* ==========================================================================
   RAWBURTZ BUILD 047 — CONTINUITY / OBSERVER LAYER
   Progressive cross-document continuity + session-scoped observation memory.
   ========================================================================== */

/* Modern MPA continuity: unsupported browsers simply navigate normally. */
@view-transition {
    navigation: auto;
}

/* Root transition stays quiet so artwork continuity can be the event. */
::view-transition-old(root) {
    animation: rb047-root-out 180ms ease both;
}

::view-transition-new(root) {
    animation: rb047-root-in 360ms cubic-bezier(.2,.8,.2,1) both;
}

@keyframes rb047-root-out {
    to {
        opacity: .84;
        filter: brightness(.82);
    }
}

@keyframes rb047-root-in {
    from {
        opacity: .72;
        filter: brightness(.78);
    }
    to {
        opacity: 1;
        filter: brightness(1);
    }
}

/* JS marks artwork transition participants with this class. */
.rb047-view-artwork {
    view-transition-class: rb047-artwork;
}

::view-transition-group(*.rb047-artwork) {
    animation-duration: 620ms;
    animation-timing-function: cubic-bezier(.2,.8,.2,1);
}

/* Keep the global chrome visually stable where supported. */
.rb043-header {
    view-transition-name: rb047-header;
}

::view-transition-group(rb047-header) {
    animation-duration: 260ms;
}

.rb043-signal-strip {
    view-transition-name: rb047-signal;
}

::view-transition-group(rb047-signal) {
    animation-duration: 340ms;
}

/* ------------------------------------------------------------
   OBSERVATION MEMORY
   ------------------------------------------------------------ */

.rb047-seen-work {
    position: relative;
}

.rb047-seen-badge {
    position: absolute;
    z-index: 12;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 8px;
    border: 1px solid rgba(255,255,255,.42);
    background: rgba(5,5,5,.88);
    color: #f4f1ea;
    font-size: .52rem;
    font-weight: 950;
    letter-spacing: .14em;
    line-height: 1;
    text-transform: uppercase;
    pointer-events: none;
    backdrop-filter: blur(7px);
}

.rb047-seen-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    background: #ff1a1a;
}

.rb047-seen-work:hover .rb047-seen-badge {
    border-color: #ff1a1a;
}

/* ------------------------------------------------------------
   OBSERVER RAIL
   ------------------------------------------------------------ */

.rb047-observer {
    position: fixed;
    z-index: 44;
    right: 14px;
    top: 50%;
    display: grid;
    grid-template-columns: 2px minmax(0, 145px);
    gap: 12px;
    align-items: stretch;
    min-height: 180px;
    transform: translateY(-50%);
    pointer-events: none;
}

.rb047-observer-track {
    position: relative;
    overflow: hidden;
    width: 2px;
    height: 100%;
    min-height: 180px;
    background: rgba(255,255,255,.12);
}

.rb047-observer-fill {
    position: absolute;
    inset: 0;
    background: #ff1a1a;
    transform: scaleY(var(--rb047-progress, 0));
    transform-origin: top;
    transition: transform 80ms linear;
}

.rb047-observer-copy {
    display: grid;
    align-content: center;
    gap: 9px;
}

.rb047-observer-index,
.rb047-observer-session {
    color: #ff1a1a;
    font-size: .50rem;
    font-weight: 950;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.rb047-observer-label {
    max-width: 145px;
    color: rgba(244,241,234,.72);
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .1em;
    line-height: 1.35;
    text-transform: uppercase;
}

.rb047-observer-session {
    color: rgba(244,241,234,.35);
}

/* Native scroll timeline progressively owns the bar when supported. */
@supports (animation-timeline: scroll()) {
    .rb047-observer-fill {
        transform: scaleY(0);
        animation: rb047-native-scroll-progress linear both;
        animation-timeline: scroll(root block);
        transition: none;
    }

    @keyframes rb047-native-scroll-progress {
        from { transform: scaleY(0); }
        to { transform: scaleY(1); }
    }
}

/* ------------------------------------------------------------
   CURRENT ARTWORK RECORD
   ------------------------------------------------------------ */

.rb047-current-observation {
    position: fixed;
    z-index: 43;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
    padding: 0 10px;
    border-left: 3px solid #ff1a1a;
    background: rgba(5,5,5,.78);
    color: rgba(244,241,234,.64);
    font-size: .53rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
    backdrop-filter: blur(7px);
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 420ms cubic-bezier(.2,.8,.2,1),
        transform 420ms cubic-bezier(.2,.8,.2,1);
}

.rb047-current-observation.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.rb047-current-observation strong {
    color: #fff;
    font-weight: 950;
}

/* ------------------------------------------------------------
   NAVIGATION FEEDBACK
   ------------------------------------------------------------ */

html.rb047-navigating .rb043-signal-strip {
    filter: brightness(1.12);
}

html.rb047-navigating .rb043-header {
    border-bottom-color: rgba(255,26,26,.7);
}

/* Mobile keeps continuity but removes fixed observer furniture. */
@media (max-width: 900px) {
    .rb047-observer {
        display: none;
    }

    .rb047-current-observation {
        left: 8px;
        bottom: 8px;
        min-height: 25px;
        max-width: calc(100vw - 16px);
        padding: 0 8px;
        font-size: .46rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-group(*.rb047-artwork),
    ::view-transition-group(rb047-header),
    ::view-transition-group(rb047-signal) {
        animation-duration: .01ms !important;
    }

    .rb047-current-observation {
        transition: none !important;
    }
}

@media print {
    .rb047-observer,
    .rb047-current-observation,
    .rb047-seen-badge {
        display: none !important;
    }
}