/* * Port hardening overrides — Claude Code, 2026-05-29 (Phase 2). * Kept SEPARATE from the Design source `styles.css` so a re-export never clobbers it. * Loaded AFTER styles.css in mc.astro. * * --- Reduced-motion safety net --- * The design has ~55 keyframe animations and only partial prefers-reduced-motion * coverage. This neutralises ALL CSS animation + transition for users who ask for * reduced motion. We use near-zero duration + a single iteration (rather than * `animation: none`) so anything that fades/scales IN jumps to its END state * instantly instead of getting stuck in its hidden start state. * * NOTE: this is CSS-only. The canvas / requestAnimationFrame loops (live-wire * ImpulseField, HeadBoltField, the scroll-velocity motion-blur) are gated in JS * separately — see Phase 2 JS pass. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } } /* * --- Motion-blur repaint gate (perf) --- * The source applies `filter: url(#motion-vblur)` to .stage whenever * data-motion-blur is on — an always-present SVG filter is an expensive constant * repaint even when idle (CC_HANDOFF §A). useScrollVelocity now toggles * `data-scrolling` on only while actually scrolling, so we attach the * filter ONLY then. (This file loads after styles.css; same/greater specificity wins.) */ html[data-motion-blur="true"] .stage { filter: none; } html[data-motion-blur="true"][data-scrolling="true"] .stage { filter: url(#motion-vblur); } /* * --- a11y: keyboard focus visibility (Phase 2 §C) --- * Universal fallback so EVERY focusable element shows a clear keyboard focus * ring — including the social icons, header links, and email that have no * element-specific focus style in styles.css. `var(--fg)` contrasts on both * `void` and `chalk`. Element-specific `:focus-visible` rules in styles.css * still win where they exist (higher specificity). */ :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; } /* * On the `chalk` palette `--accent` is ≈ white (the recurring invisible-on-chalk * gotcha), so the design's accent-coloured focus rings (sun/moon, reel, codex) * vanish. Force every focus ring to `--fg` on chalk so it stays visible. */ html[data-palette="chalk"] :focus-visible { outline-color: var(--fg) !important; } /* * --- Phone (≤480px) layout fixes (Phase 2 §F) --- * Design's responsive work stops at 720px; these address the phone-width breaks * found by capturing /mc at 390px (no horizontal overflow, but two collisions): */ @media (max-width: 480px) { /* Motto: the clamp floor (56px) + white-space:nowrap overran 390px and clipped "CHARACTER ART." / "TECHNO GRAPHICA.". Shrink to fit and allow wrapping. */ .motto { font-size: clamp(26px, 9vw, 42px); white-space: normal; margin-left: 4vw; max-width: none; } /* Masthead: the M//CODEX / clock / LAS VEGAS / LIVE segments collided with the centred sun-moon toggle. Shrink the type + gaps so they fit. */ .header { font-size: 9px; } .header .seg { gap: 9px; } } @media (max-width: 480px) { /* Hide the masthead clock + "LAS VEGAS" on phones — it collides with the centred sun-moon toggle. Scoped to .header so the Reel caption's .lbl-2 is untouched. Time/location are non-essential chrome at phone width. */ .header .lbl-2 { display: none; } }