/* ========================================================= Political Idioms — motion system Ported from Motion Lab. Contract with motion.js: .pi-reveal and .pi-line are VISIBLE by default and only hidden once carries .am-js, so a script failure can never leave text invisible. ========================================================= */ /* --------------------------------------------------------- Scroll reveal --------------------------------------------------------- */ .pi-reveal { opacity: 1; } html.am-js .pi-reveal { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); transition-delay: var(--d, 0ms); will-change: opacity, transform; } html.am-js .pi-reveal.is-in { opacity: 1; transform: none; will-change: auto; } /* Masked line reveal for headline typography */ .pi-line { display: block; overflow: hidden; padding-bottom: 0.08em; } .pi-line > span { display: block; } html.am-js .pi-line > span { transform: translate3d(0, 110%, 0); transition: transform 1s var(--ease-out); transition-delay: var(--d, 0ms); } html.am-js .pi-line.is-in > span { transform: none; } /* Stagger utilities. Classes rather than inline style attributes so the Content-Security-Policy can stay free of 'unsafe-inline' for styles. */ .pi-d1 { --d: 90ms; } .pi-d2 { --d: 180ms; } .pi-d3 { --d: 270ms; } .pi-d4 { --d: 360ms; } .pi-d5 { --d: 450ms; } .pi-d6 { --d: 540ms; } .pi-d7 { --d: 630ms; } .pi-d8 { --d: 720ms; } /* --------------------------------------------------------- Fixed chrome — grain, progress, loader --------------------------------------------------------- */ .pi-noise { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0.028; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .pi-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 1000; } .pi-progress span { display: block; height: 100%; width: 0%; background: var(--grad-iris); } .pi-loader { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; background: var(--bg); transition: opacity 0.7s var(--ease-out), visibility 0.7s; } .pi-loader.is-hidden { opacity: 0; visibility: hidden; } .pi-loader__mark { width: 34px; height: 34px; border-radius: 10px; background: var(--grad-iris); animation: piLoaderPulse 1.5s var(--ease-io) infinite; } .pi-loader__word { font-family: var(--font-mono); letter-spacing: 0.42em; font-size: 0.72rem; text-indent: 0.42em; color: var(--text-3); opacity: 0; animation: piFade 0.6s 0.5s var(--ease-out) forwards; } @keyframes piLoaderPulse { 0%, 100% { border-radius: 10px; transform: rotate(0deg) scale(1); } 50% { border-radius: 50% 12px 50% 12px; transform: rotate(180deg) scale(0.86); } } @keyframes piFade { to { opacity: 1; } } /* --------------------------------------------------------- Back to top --------------------------------------------------------- */ .pi-totop { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 900; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(10px); box-shadow: var(--shadow-md); color: var(--text-2); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out), visibility 0.4s, color 0.3s, border-color 0.3s; } .pi-totop.is-visible { opacity: 1; visibility: visible; transform: none; } .pi-totop:hover { color: var(--ink); border-color: var(--line-strong); } /* --------------------------------------------------------- Hero Static artwork only. No canvas, no requestAnimationFrame loop and no blur filters, so the first paint is the final paint. --------------------------------------------------------- */ .pi-hero { position: relative; min-height: min(100svh, 900px); display: flex; align-items: center; padding: calc(var(--nav-h) + 3rem) 0 5rem; overflow: hidden; } /* The swirl ribbon. Anchored right on desktop, pushed behind the copy and faded on narrow screens where there is no room beside it. */ .pi-hero__art { position: absolute; top: 50%; right: -6vw; z-index: 0; width: min(72vw, 1020px); aspect-ratio: 16 / 9; transform: translateY(-50%); background: url('/assets/img/swirl-hero.jpg') center / contain no-repeat; -webkit-mask-image: radial-gradient(ellipse 74% 74% at 54% 50%, #000 46%, transparent 78%); mask-image: radial-gradient(ellipse 74% 74% at 54% 50%, #000 46%, transparent 78%); pointer-events: none; } /* Keeps the headline legible where it overlaps the artwork. */ .pi-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, var(--bg) 16%, rgba(246, 244, 241, 0.72) 42%, transparent 70%); } .pi-hero__inner { position: relative; z-index: 3; width: var(--shell); margin-inline: auto; max-width: 62rem; } .pi-hero__title { font-size: clamp(2.7rem, 7.4vw, 5.6rem); font-weight: 600; letter-spacing: -0.045em; } .pi-hero__sub { margin: 1.8rem 0 2.4rem; max-width: 46ch; color: var(--text-2); font-size: clamp(1rem, 0.94rem + 0.35vw, 1.14rem); } .pi-hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; } .pi-hero__meta { display: flex; gap: clamp(1.4rem, 4vw, 2.8rem); margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--line-soft); flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-3); } @media (max-width: 900px) { .pi-hero { min-height: auto; padding-bottom: 3.5rem; } .pi-hero__art { width: 128vw; right: -34vw; opacity: 0.5; } .pi-hero__scrim { background: linear-gradient(180deg, rgba(246, 244, 241, 0.55), rgba(246, 244, 241, 0.9)); } } .pi-scroll-cue { position: absolute; left: 50%; bottom: 1.5rem; z-index: 3; transform: translateX(-50%); display: grid; place-items: start center; padding-top: 8px; width: 25px; height: 42px; border: 1px solid var(--line-strong); border-radius: 100px; } .pi-scroll-cue span { width: 3px; height: 8px; border-radius: 100px; background: var(--violet); animation: piCue 1.9s var(--ease-io) infinite; } @keyframes piCue { 0% { transform: translateY(-2px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } } /* --------------------------------------------------------- Marquee --------------------------------------------------------- */ .pi-marquee { position: relative; z-index: 3; padding: 1.5rem 0; border-block: 1px solid var(--line-soft); background: rgba(255, 255, 255, 0.55); overflow: hidden; user-select: none; } .pi-marquee__row { display: flex; overflow: hidden; will-change: transform; } .pi-marquee__track { display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; white-space: nowrap; animation: piMarquee 36s linear infinite; } .pi-marquee__row--b .pi-marquee__track { animation-duration: 48s; animation-direction: reverse; } .pi-marquee__track span { font-family: var(--font-display); font-size: clamp(1.05rem, 2.1vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px rgba(16, 19, 28, 0.28); } .pi-marquee__track span.is-solid { -webkit-text-stroke: 0; color: var(--ink); } @keyframes piMarquee { to { transform: translateX(-50%); } } /* --------------------------------------------------------- Statement scrub --------------------------------------------------------- */ .pi-statement { position: relative; padding: clamp(5rem, 14vw, 11rem) 0; overflow: hidden; } .pi-statement::before { content: ''; position: absolute; inset: 0 calc(50% - 50vw); background: url('/assets/img/swirl-wide.jpg') center / cover no-repeat, var(--bg-2); opacity: 0.5; border-block: 1px solid var(--line-soft); z-index: -2; } .pi-statement::after { content: ''; position: absolute; inset: 0 calc(50% - 50vw); background: rgba(246, 244, 241, 0.74); z-index: -1; } .pi-statement__inner { width: var(--shell); margin-inline: auto; } .pi-statement h2 { font-size: clamp(2rem, 6vw, 4.6rem); line-height: 1.1; max-width: 20ch; } .pi-statement__word { display: inline-block; color: var(--text-3); opacity: 0.4; transition: color 0.5s var(--ease-out), opacity 0.5s var(--ease-out); } .pi-statement__word.is-lit { color: var(--text); opacity: 1; } .pi-statement__word.is-lit.is-key { color: var(--violet); } /* --------------------------------------------------------- Spotlight cards --------------------------------------------------------- */ .pi-spot { position: relative; isolation: isolate; overflow: hidden; } .pi-spot::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(184, 166, 242, 0.3), transparent 62%); opacity: 0; transition: opacity 0.45s; pointer-events: none; } .pi-spot:hover::before { opacity: 1; } /* --------------------------------------------------------- Reduced motion — single consolidated block --------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.am-js .pi-reveal, html.am-js .pi-line > span { opacity: 1 !important; transform: none !important; } .pi-marquee__track { animation: none; } .pi-scroll-cue { display: none; } }