/* Maritime Attention Index — theme layer + motion primitives. ──────────────────────────────────────────────────────────────────────── Ported from the "Maritime Attention Index Chart-Led" design (Claude Design project b65c1e4b, src/mai-theme.css). Light values come from the vendored Cardinal Response tokens (tokens.css). Dark values are the same system's "break register" promoted to page ground. Loaded before style.css so page-level rules can still override, and kept separate from tokens.css for the same reason tokens.css is vendored: this file is ours to edit, tokens.css is a copy that must never be edited in place. The design ships light by default with the dark register available. Here it is wired to the reader's own setting: prefers-color-scheme drives it, and an explicit data-theme on wins in either direction so the choice can be forced later without touching this file. ──────────────────────────────────────────────────────────────────────── */ /* One block, applied by either trigger. Defined as a custom-property payload so the two selectors below cannot drift apart. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-page: #101112; --surface-card: #17191B; --surface-sunken: #1E2023; --surface-inverse: #FBFBFC; --border-default: rgba(255,255,255,0.13); --border-strong: rgba(255,255,255,0.26); --border-focus: var(--color-gold); --text-primary: #F7F7F8; --text-secondary: rgba(255,255,255,0.62); --text-tertiary: rgba(255,255,255,0.38); --text-inverse: #141414; --text-accent: #F0BC57; --text-link: #F7F7F8; --text-link-hover: var(--color-gold); --viz-grid: rgba(255,255,255,0.09); --viz-axis: rgba(255,255,255,0.45); --viz-label: rgba(255,255,255,0.55); --viz-1: oklch(0.66 0.115 250); --viz-2: oklch(0.68 0.135 33); --viz-3: oklch(0.86 0 0); --viz-4: oklch(0.68 0 0); --shadow-md: 0 8px 30px rgba(0,0,0,0.45); --shadow-lg: 0 24px 60px rgba(0,0,0,0.55); } } :root[data-theme="dark"] { --surface-page: #101112; --surface-card: #17191B; --surface-sunken: #1E2023; --surface-inverse: #FBFBFC; --border-default: rgba(255,255,255,0.13); --border-strong: rgba(255,255,255,0.26); --border-focus: var(--color-gold); --text-primary: #F7F7F8; --text-secondary: rgba(255,255,255,0.62); --text-tertiary: rgba(255,255,255,0.38); --text-inverse: #141414; --text-accent: #F0BC57; --text-link: #F7F7F8; --text-link-hover: var(--color-gold); --viz-grid: rgba(255,255,255,0.09); --viz-axis: rgba(255,255,255,0.45); --viz-label: rgba(255,255,255,0.55); --viz-1: oklch(0.66 0.115 250); --viz-2: oklch(0.68 0.135 33); --viz-3: oklch(0.86 0 0); --viz-4: oklch(0.68 0 0); --shadow-md: 0 8px 30px rgba(0,0,0,0.45); --shadow-lg: 0 24px 60px rgba(0,0,0,0.55); } /* ── motion primitives ──────────────────────────────────────────────────── */ @keyframes mai-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes mai-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes mai-pulse { 0%, 100% { opacity: .6; transform: scale(1); } 50% { opacity: .04; transform: scale(3); } } /* Scroll reveal, gated on `.js-reveal` — a class home.js puts on only once it is definitely going to manage the animation. The gate is the whole point. Hiding a section by default means the page ships two thirds of its content at opacity 0 and trusts a script to turn it back on; if that script does not run, does not finish, or runs in a browser that suppresses its trigger, the reader gets blank space and no error. With the gate, the default state is visible and the animation is the addition, so the worst failure is a page that does not animate. */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--duration-reveal) var(--ease-emphasized), transform var(--duration-reveal) var(--ease-emphasized); } .js-reveal [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } .js-reveal [data-reveal] { opacity: 1; transform: none; } }