/* ============================================================ Confyro — cinematic hero intro (overlay for the live hero) ------------------------------------------------------------ Progressive enhancement. Everything is gated behind html.ci-on, which the inline script adds whenever JS is on. Owner chose (2026-07-22) to show the intro to EVERYONE, reduced-motion included. With no JS the cover stays display:none and the spacer collapses, so the current site still renders completely untouched. Every class/keyframe is namespaced ci-* to avoid colliding with the site's .hero / .kicker / .sub / .row / .conflict / .btn classes. No @font-face here — reuses the site's fonts and tokens via var(--display/--serif/--mono/...); each var carries the prototype's value as a fallback so colours are correct even if a token is absent. Ported 1:1 from ~/confyro-hero-lab/index.html (owner-approved). Trivially removable: delete this file + hero-intro.js + the index.html hooks. ============================================================ */ /* ---- gate: default off; the inline head script flips it on ---- */ .ci-cover { display: none; } .ci-spacer { height: 0; } html.ci-on .ci-cover { display: block; position: fixed; inset: 0; z-index: 900; overflow: hidden; background: var(--sand, #F2ECDD); will-change: opacity; } html.ci-on .ci-spacer { height: 170vh; } .ci-diver { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(22px, 3.6vh, 46px) 20px; transform-origin: 50% 50%; isolation: isolate; will-change: transform; } .ci-fx { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .ci-veil { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(120% 90% at 50% 50%, #14171a 0%, #0b0d0e 55%, #060708 100%); } html.ci-on .ci-veil { opacity: 1; } .ci-stage { position: relative; z-index: 2; flex: 1; width: 100%; max-width: 940px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; perspective: 1600px; } .ci-top { flex: 1 1 0; min-height: 0; display: flex; align-items: flex-end; } .ci-bottom { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; } .ci-glow { position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -50%; width: min(1100px, 150vw); height: min(720px, 90vh); pointer-events: none; background: radial-gradient(closest-side, rgba(255,246,224,.95), rgba(255,240,210,.35) 42%, transparent 72%), radial-gradient(closest-side, rgba(196,59,50,.28), transparent 66%); filter: blur(8px); opacity: 0; } .ci-rays { position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -50%; width: 140vw; height: 140vh; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,245,222,.10) 8deg, transparent 16deg, transparent 40deg, rgba(255,245,222,.08) 48deg, transparent 56deg, transparent 92deg, rgba(255,245,222,.10) 100deg, transparent 108deg, transparent 150deg, rgba(255,245,222,.08) 158deg, transparent 166deg, transparent 210deg, rgba(255,245,222,.10) 218deg, transparent 226deg, transparent 270deg, rgba(255,245,222,.08) 278deg, transparent 286deg, transparent 320deg, rgba(255,245,222,.10) 328deg, transparent 336deg); -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 70%); mask-image: radial-gradient(closest-side, #000 10%, transparent 70%); } .ci-kicker { margin: 0 0 clamp(18px, 2.8vh, 30px); font-family: var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); font-weight: 600; font-size: clamp(16px, 2.5vw, 30px); letter-spacing: .3em; text-transform: uppercase; color: var(--verdict, #C43B32); text-shadow: 0 10px 30px rgba(196,59,50,.30); } /* ---- laptop mock ---- */ .ci-laptop { flex: 0 0 auto; width: min(620px, 90vw); transform-style: preserve-3d; will-change: transform, filter, opacity; } .ci-laptop-in { position: relative; transform-style: preserve-3d; } .ci-screenwrap { background: #111417; border-radius: 16px 16px 6px 6px; padding: 12px 12px 14px; box-shadow: 0 2px 0 #2a2f33 inset, 0 40px 70px -30px rgba(0,0,0,.7), 0 18px 30px -18px rgba(0,0,0,.5); } .ci-notch { position: absolute; top: 5px; left: 50%; translate: -50%; width: 70px; height: 5px; border-radius: 0 0 6px 6px; background: #23282c; } .ci-base { height: 14px; width: min(760px, 104%); margin: -2px auto 0; translate: -1% 0; background: linear-gradient(#c9ccce, #a4a8ab 40%, #7f8386); border-radius: 0 0 12px 12px; position: relative; } .ci-base::after { content: ""; position: absolute; top: 0; left: 50%; translate: -50%; width: 110px; height: 5px; border-radius: 0 0 7px 7px; background: #6d7175; } .ci-screen { background: var(--sand, #F2ECDD); border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 10.2; display: flex; flex-direction: column; position: relative; color-scheme: light; } .ci-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 48%, transparent 56%); transform: translateX(-120%); } .ci-diver.ci-playing .ci-screen::after { animation: ci-sheen 1.1s ease 2.5s 1; } .ci-chrome { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--paper, #FFFDF8); border-bottom: 1px solid var(--rule, #D8D1C4); } .ci-lights { display: flex; gap: 6px; } .ci-lights i { width: 8px; height: 8px; border-radius: 50%; background: #D8D1C4; } .ci-url { margin: 0 auto; font: 600 11px var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); color: var(--margin, #65655F); display: inline-flex; gap: 8px; align-items: center; letter-spacing: .03em; } .ci-bodyv { display: flex; flex: 1; min-height: 0; } .ci-side { width: 33%; border-right: 1px solid var(--rule, #D8D1C4); background: var(--paper, #FFFDF8); padding: 12px 10px; display: flex; flex-direction: column; } .ci-side .ci-h { font: 600 8.5px var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); letter-spacing: .14em; text-transform: uppercase; color: #8B887F; } .ci-files { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; } .ci-file { display: flex; align-items: center; gap: 7px; padding: 5px 7px; font: 500 10.5px var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); color: var(--margin, #65655F); white-space: nowrap; } .ci-file.ci-file-on { background: var(--sand, #F2ECDD); border: 1px solid var(--rule, #D8D1C4); border-left: 2px solid var(--verdict, #C43B32); color: var(--ink, #121416); } .ci-dot { width: 8px; height: 9px; border-radius: 1px; background: #cfc7b6; flex: none; } .ci-side .ci-foot { margin-top: auto; font: 500 8.5px var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); color: #8B887F; } .ci-work { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; } .ci-wtop { display: flex; justify-content: space-between; align-items: baseline; white-space: nowrap; font: 600 12px var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); color: var(--ink, #121416); } .ci-wtop .ci-sum { font: 600 9px var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--margin, #65655F); } .ci-rows { margin-top: 12px; display: flex; flex-direction: column; } .ci-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--rule, #D8D1C4); font: 600 12px var(--serif, "Newsreader", Georgia, serif); } .ci-row:last-child { border-bottom: 0; } .ci-sw { width: 8px; height: 8px; flex: none; border-radius: 1px; } .ci-sw.ci-hi { background: var(--verdict, #C43B32); } .ci-sw.ci-md { background: var(--warn, #B47215); } .ci-sw.ci-ok { background: var(--evidence, #1F7554); } .ci-tag { font: 600 8px var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--verdict, #C43B32); padding: 3px 6px 2px; } .ci-rnum { color: var(--ink, #121416); } .ci-rlabel { color: var(--body, #3B3D3A); } .ci-rval { margin-left: auto; font: 600 11px var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); color: var(--margin, #65655F); white-space: nowrap; } .ci-rval .ci-r { color: var(--verdict, #C43B32); } .ci-rval .ci-g { color: var(--evidence, #1F7554); } .ci-conflict { background: #F7DED8; border-left: 3px solid var(--verdict, #C43B32); margin: 0 -16px; padding: 8px 16px; } .ci-wfoot { margin-top: auto; padding-top: 10px; font: 600 8.5px var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); letter-spacing: .1em; text-transform: uppercase; color: #8B887F; } .ci-headline { margin: clamp(18px, 2.6vh, 28px) 0 0; font-family: var(--display, "Fraunces", Georgia, serif); font-weight: 600; font-size: clamp(26px, 3.9vw, 46px); line-height: 1.06; letter-spacing: -.02em; color: var(--ink, #121416); max-width: 26ch; text-wrap: balance; font-variation-settings: "opsz" 90; } .ci-headline em { font-style: italic; } .ci-sub { margin: clamp(12px, 1.8vh, 20px) auto 0; max-width: 52ch; font-size: clamp(15px, 1.7vw, 18.5px); line-height: 1.62; color: var(--body, #3B3D3A); } /* ---- the great bloom the screen fills with, then whites out ---- */ .ci-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transform-origin: 50% 50%; will-change: opacity, transform; background: radial-gradient(circle at 50% 50%, #ffffff 0%, #ffffff 40%, #fffdf6 66%, rgba(255,251,240,.92) 100%); } .ci-cue { position: absolute; left: 50%; bottom: 24px; translate: -50%; z-index: 7; text-align: center; font: 600 11px var(--mono, "IBM Plex Mono", ui-monospace, Consolas, monospace); letter-spacing: .18em; text-transform: uppercase; color: var(--margin, #65655F); display: flex; flex-direction: column; align-items: center; gap: 8px; } .ci-cue .ci-arw { width: 20px; height: 20px; border-right: 2px solid var(--verdict, #C43B32); border-bottom: 2px solid var(--verdict, #C43B32); transform: rotate(45deg); animation: ci-bob 1.6s ease-in-out infinite; } @keyframes ci-bob { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 50% { transform: rotate(45deg) translate(3px, 3px); } } /* ---- poster entrance — plays once hero-intro.js adds .ci-playing ---- */ html.ci-on .ci-anim { opacity: 0; } .ci-diver.ci-playing .ci-veil { animation: ci-veilOut 1.7s ease .1s forwards; } .ci-diver.ci-playing .ci-glow { animation: ci-bloom 1.15s cubic-bezier(.2,.7,.2,1) 1.02s forwards; } .ci-diver.ci-playing .ci-rays { animation: ci-rays 1.5s ease 1.06s forwards; } .ci-diver.ci-playing .ci-laptop { animation: ci-flyIn 1.95s cubic-bezier(.4,.08,.18,1) both; } .ci-diver.ci-playing .ci-kicker { animation: ci-rise .85s cubic-bezier(.16,1,.3,1) 1.6s both; } .ci-diver.ci-playing .ci-headline { animation: ci-rise .85s cubic-bezier(.16,1,.3,1) 1.78s both; } .ci-diver.ci-playing .ci-laptop-in { animation: ci-float 6s ease-in-out 3s infinite; } @keyframes ci-veilOut { to { opacity: 0; } } @keyframes ci-bloom { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: scale(1); } } @keyframes ci-rays { from { opacity: 0; transform: rotate(-6deg) scale(.7); } to { opacity: .5; transform: rotate(0) scale(1); } } @keyframes ci-flyIn { 0% { opacity: 0; transform: translateY(48px) scale(.05) rotateX(18deg); filter: blur(36px); } 38% { opacity: 1; } 66% { filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); filter: blur(0); } } @keyframes ci-rise { 0% { opacity: 0; transform: translateY(20px) scale(.96); filter: blur(12px); } 100% { opacity: 1; transform: none; filter: blur(0); } } @keyframes ci-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes ci-sheen { to { transform: translateX(120%); } } @media (max-width: 560px) { .ci-headline { font-size: clamp(26px, 8vw, 34px); } .ci-kicker { letter-spacing: .26em; } .ci-side .ci-h, .ci-side .ci-foot { display: none; } } /* Owner decision (2026-07-22): the cinematic intro plays for EVERYONE, prefers-reduced-motion visitors included. Two things previously kept it from reduced-motion users: (1) the inline gate only armed ci-on when motion was allowed — now removed; (2) the site's global reduced-motion reset in index.html, `* { animation: none !important }`, freezes the poster on its opacity:0 base (line ~159) and leaves the veil opaque. So we re-enable EXACTLY the intro's own animations below — each selector outspecifies the blanket `*`, so with !important it wins and the full intro plays. Nothing else on the page is affected; the rest of the site still honours reduced-motion. The JS-failure safety net also still holds (the inline gate strips ci-on after 5s if hero-intro.js never runs). To restore the accessibility opt-out (skip the intro for reduced-motion), delete this whole block AND re-add the suppression: @media (prefers-reduced-motion: reduce) { .ci-cover { display: none !important; } .ci-spacer { height: 0 !important; } } */ @media (prefers-reduced-motion: reduce) { .ci-diver.ci-playing .ci-veil { animation: ci-veilOut 1.7s ease .1s forwards !important; } .ci-diver.ci-playing .ci-glow { animation: ci-bloom 1.15s cubic-bezier(.2,.7,.2,1) 1.02s forwards !important; } .ci-diver.ci-playing .ci-rays { animation: ci-rays 1.5s ease 1.06s forwards !important; } .ci-diver.ci-playing .ci-laptop { animation: ci-flyIn 1.95s cubic-bezier(.4,.08,.18,1) both !important; } .ci-diver.ci-playing .ci-kicker { animation: ci-rise .85s cubic-bezier(.16,1,.3,1) 1.6s both !important; } .ci-diver.ci-playing .ci-headline { animation: ci-rise .85s cubic-bezier(.16,1,.3,1) 1.78s both !important; } .ci-diver.ci-playing .ci-laptop-in { animation: ci-float 6s ease-in-out 3s infinite !important; } .ci-diver.ci-playing .ci-screen::after { animation: ci-sheen 1.1s ease 2.5s 1 !important; } .ci-cue .ci-arw { animation: ci-bob 1.6s ease-in-out infinite !important; } }