/* ============================================================================ T1Daily — shared page enhancement layer Adds the same cinematic feel as the home page (ambient aurora, film grain, scroll reveals, headline line-rise, sticky-nav shadow) to every sub-page. Everything degrades gracefully: motion only activates once the JS engine adds `.js-motion` to , and all of it respects prefers-reduced-motion. ========================================================================== */ /* ── Sticky nav with scroll shadow (matches the home page) ───────────────── */ nav { position: sticky; top: 0; z-index: 100; transition: box-shadow .3s ease, background .3s ease; } nav.scrolled { background: rgba(250, 250, 248, .96); box-shadow: 0 4px 24px rgba(27, 43, 75, .07); } /* ── Dark section depth (page header / 404 body) ─────────────────────────── */ .page-header { position: relative; overflow: hidden; } .page-header .container { position: relative; z-index: 2; } /* ── Ambient aurora ──────────────────────────────────────────────────────── */ .aurora { position: absolute; inset: -25% -15%; z-index: 0; pointer-events: none; overflow: hidden; filter: blur(70px); opacity: .7; } .aurora b { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; will-change: transform; } .aurora .a1 { width: 46vw; height: 46vw; left: 4%; top: -8%; background: radial-gradient(circle at 50% 50%, rgba(123,174,140,.55), transparent 66%); animation: auroraDrift 26s ease-in-out infinite; } .aurora .a2 { width: 40vw; height: 40vw; right: -4%; top: 8%; background: radial-gradient(circle at 50% 50%, rgba(74,123,199,.35), transparent 66%); animation: auroraDrift 32s ease-in-out infinite reverse; } .aurora .a3 { width: 34vw; height: 34vw; left: 32%; bottom: -18%; background: radial-gradient(circle at 50% 50%, rgba(123,174,140,.30), transparent 66%); animation: auroraDrift 38s ease-in-out infinite; } @keyframes auroraDrift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(4%, 6%, 0) scale(1.12); } 66% { transform: translate3d(-5%, -3%, 0) scale(.92); } } /* ── Film grain ──────────────────────────────────────────────────────────── */ .grain::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%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"); } /* ── Scroll reveal (only hides once the motion engine is confirmed on) ───── */ .js-motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; } .js-motion [data-reveal].in { opacity: 1; transform: none; } /* ── Headline line-rise (JS wraps each line in .rl-line > .rl-inner) ─────── */ .rl-line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; } .rl-inner { display: block; will-change: transform; } .js-motion .page-header h1 { opacity: 0; } /* ── Mobile perf: keep the mesh, drop the continuous blur repaint ────────── */ @media (max-width: 820px) { .aurora { filter: blur(52px); opacity: .5; } .aurora b { animation: none !important; } } /* ── Reduced motion ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .aurora, .aurora b { animation: none !important; } .js-motion .page-header h1 { opacity: 1 !important; } .rl-inner { transform: none !important; } .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; } }