/* ════════════════════════════════════════════════════════════════════════ AI — cinematic scroll-snap pages (Views/ai.php, content/ai-beats.php). Loaded only on /ai* (page-scoped). Scoped under .ai-* / html.is-ai so nothing leaks into the rest of the site. Tokens from tokens.css; the accent is the brand's signature electric-cyan (#27E1FF) via the default [data-accent="thread"] on — AI is the connective tissue — with ember on the human beat. Buttons/cue reuse app.css. Root scroll-snap (mandatory) is switched on app-wide by initScrollSnap() on first interaction (.snap-on). ════════════════════════════════════════════════════════════════════════ */ html.is-ai.snap-on{scroll-snap-type:y mandatory;} @media (max-height:680px){ html.is-ai.snap-on{scroll-snap-type:y proximity;} } html.is-ai .site-footer{scroll-snap-align:start;} /* ── Beat shell ─────────────────────────────────────────────────────────── */ .ai-beat{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center; padding-block:var(--s-9);overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;} .ai-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;background-color:var(--ink-900);} .ai-grade{position:absolute;inset:0;z-index:1; background:radial-gradient(120% 90% at 16% 100%, rgba(0,0,0,.5), transparent 55%), linear-gradient(90deg, rgba(10,11,13,.9) 0%, rgba(10,11,13,.55) 45%, rgba(10,11,13,.2) 100%);} .ai-beat-inner{position:relative;z-index:2;width:100%;} /* ── Typography ─────────────────────────────────────────────────────────── */ .ai-eyebrow{font-family:var(--font-mono);font-size:var(--t-eyebrow);letter-spacing:.18em;text-transform:uppercase; color:var(--accent);margin:0 0 var(--s-4);} .ai-h1{font:600 var(--t-display-xl)/1.03 var(--font-display);letter-spacing:-.02em;margin:0 0 var(--s-4);color:var(--on-ink-hi);max-width:16ch;} .ai-h2{font:600 var(--t-h1)/1.05 var(--font-display);letter-spacing:-.02em;margin:0 0 var(--s-4);color:var(--on-ink-hi);max-width:20ch;} .ai-sub{font-size:var(--t-body-lg);line-height:1.5;color:var(--on-ink-mid);margin:0;max-width:48ch;} .ai-body{font-size:var(--t-body);line-height:1.6;color:var(--on-ink-mid);margin:0;max-width:54ch;} /* ── Picture-beside-capability (two-column; stacks picture-first on mobile) ── */ .ai-beat-inner--split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(24px,4vw,64px);align-items:center;} .ai-pic{position:relative;} .ai-pic img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block; border-radius:var(--r-md);border:var(--b-hairline) solid var(--ink-700);background:var(--ink-800); box-shadow:0 24px 60px rgba(0,0,0,.45);} .ai-service-name{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase; color:var(--on-ink-mid);margin:0 0 var(--s-2);} .ai-service-line{margin-bottom:var(--s-4);} /* ── Facts (Monitors / Produces / Serves …) ─────────────────────────────── */ .ai-facts{margin:var(--s-5) 0 0;max-width:54ch;} .ai-fact{display:grid;grid-template-columns:minmax(120px,12ch) 1fr;gap:14px;padding:10px 0; border-top:var(--b-hairline) solid var(--ink-700);} .ai-fact dt{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);} .ai-fact dd{margin:0;color:var(--on-ink-hi);font-size:.95rem;line-height:1.4;} .ai-link{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s-5); font:600 var(--t-body)/1 var(--font-text);color:var(--accent);text-decoration:none;} .ai-link span{transition:transform var(--dur) var(--ease-standard);} .ai-link:hover span{transform:translateX(4px);} /* ── Connect ────────────────────────────────────────────────────────────── */ .ai-ctas{margin-top:var(--s-7);} .ai-credo{margin-top:var(--s-6);font-size:var(--t-caption);color:var(--on-ink-mid);line-height:1.6;max-width:52ch;} .ai-cue{z-index:3;} /* ── Progress rail — fixed, right; real in-page anchors (work without JS) ── */ .ai-rail{position:fixed;right:clamp(10px,2.4vw,30px);top:50%;transform:translateY(-50%);z-index:var(--z-sticky); display:flex;flex-direction:column;align-items:center;} .ai-rail-line{position:absolute;top:6px;bottom:6px;width:1px;background:var(--ink-700);} .ai-rail-fill{position:absolute;top:6px;width:1px;height:0;background:var(--accent);box-shadow:0 0 8px var(--accent); transition:height var(--dur-slow) var(--ease-standard),background var(--dur-slow) var(--ease-standard);} .ai-dot{position:relative;width:26px;height:28px;display:flex;align-items:center;justify-content:center;text-decoration:none;} .ai-dot i{width:7px;height:7px;border-radius:50%;background:var(--ink-600);border:1px solid var(--ink-700); transition:transform var(--dur) var(--ease-standard),background var(--dur) var(--ease-standard),border-color var(--dur) var(--ease-standard),box-shadow var(--dur) var(--ease-standard);} .ai-dot.is-current i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent);transform:scale(1.25);} .ai-dot-label{position:absolute;right:32px;white-space:nowrap;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em; text-transform:uppercase;color:var(--on-ink-mid);opacity:0;transform:translateX(6px); transition:opacity var(--dur) var(--ease-standard),transform var(--dur) var(--ease-standard);pointer-events:none;} .ai-dot:hover .ai-dot-label,.ai-dot:focus-visible .ai-dot-label,.ai-dot.is-current .ai-dot-label{opacity:1;transform:none;} /* ── Reveal: self-contained; first beat ships active so it paints at once. With no JS the html.js gate never applies, so all content is visible. ─── */ html.js .ai-content{opacity:0;transform:translateY(var(--reveal-y)); transition:opacity var(--dur-slow) var(--ease-cine),transform var(--dur-slow) var(--ease-cine);} html.js .ai-beat.is-active .ai-content{opacity:1;transform:none;} /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width:880px){ .ai-beat-inner--split{grid-template-columns:1fr;gap:var(--s-6);} } @media (max-width:760px){ .ai-rail{right:10px;} .ai-dot-label{display:none;} /* Reserve a gutter so wrapped content never runs under the fixed rail. */ .ai-content{padding-right:clamp(40px,10vw,48px);} } @media (prefers-reduced-motion:reduce){ html.is-ai{scroll-snap-type:none;} .ai-content{opacity:1!important;transform:none!important;} .ai-rail-fill{transition:none;} } html.no-motion.is-ai{scroll-snap-type:none;} html.no-motion.is-ai .ai-content{opacity:1;transform:none;}