/* ===================================================================== AI PROCESSING EXPERIENCE — reusable component styles --------------------------------------------------------------------- Finalized visual direction: "Cinematic" (formerly Option C of the three-option prototype explored in ai-processing-prototype.html). Options A ("Blurred Reveal") and B ("Drawing Assembly") were explicitly not selected and are not implemented here. Design tokens below are copied verbatim from css/main.css's :root block (ivory/ink/sage/brass/line, serif/sans/mono, ease-3/ease-4) so this file has no build-time dependency on the main stylesheet, but the values themselves are the same source of truth — nothing here invents a new palette, type scale, or spacing system. This file is NOT linked from project.html or any workflow screen. It is loaded only by the standalone finalized demo (ai-processing-experience.html) until a future task wires a real AI job into an actual workflow. ===================================================================== */ :root{ --aip-ivory:#F4F1E9; --aip-ink:#1B1C19; --aip-sage:#64705D; --aip-brass:#B09A6D; --aip-line:#D9D4C9; --aip-error:#9c5b3e; --aip-serif:'Playfair Display', Georgia, serif; --aip-sans:'Manrope', Helvetica, Arial, sans-serif; --aip-mono:'DM Mono', 'SFMono-Regular', Consolas, monospace; --aip-ease-3: cubic-bezier(.22,.61,.36,1); --aip-ease-4: cubic-bezier(.16,1,.3,1); } /* ===================================================================== FULL-VIEWPORT SYSTEM TRANSITION OVERLAY --------------------------------------------------------------------- The Cinematic experience always mounts inside this fixed, full- viewport layer (js/ai-processing-experience.js appends it to ) — the same visual language as the main site's own page-transition curtain (css/main.css .page-transition / js/chrome.js): a full-bleed layer that slides up to cover the current screen and slides away to reveal what's next, carrying the 2S Development identity. Unlike that curtain, which is fully opaque, this one is deliberately translucent/frosted (see .aip below) so the caller's own project page keeps reading faintly behind it — "I am still in my project; an AI process is happening above it" — while remaining fully non-interactive and non-scrollable underneath (body scroll is locked by the component for as long as the overlay is up). No page edges are ever exposed and no scrollbar/layout shift is introduced, at any viewport size, since this is always position: fixed + inset:0 rather than sized to a caller's container. ===================================================================== */ .aip-overlay{ position:fixed; inset:0; z-index:9000; overflow:hidden; transform:translateY(100%); opacity:0; visibility:hidden; transition:transform .6s var(--aip-ease-4), opacity .5s var(--aip-ease-4), visibility 0s linear .6s; } .aip-overlay.is-visible{ transform:translateY(0%); opacity:1; visibility:visible; transition:transform .6s var(--aip-ease-4), opacity .5s var(--aip-ease-4), visibility 0s linear 0s; } .aip-overlay.is-leaving{ /* Continues the same upward motion off-screen — the same directional language as the site curtain's own reveal (y:0% -> y:-101%) — rather than reversing back the way it came. */ transform:translateY(-100%); opacity:1; transition:transform .6s var(--aip-ease-4); } @media (prefers-reduced-motion: reduce){ .aip-overlay{ transform:none; transition:opacity .4s linear, visibility 0s linear .4s; } .aip-overlay.is-visible{ transition:opacity .4s linear, visibility 0s linear 0s; } .aip-overlay.is-leaving{ transform:none; transition:opacity .4s linear; } } /* System identity mark — present for the same reason the site's own curtain shows "2S Development" mid-transition: this reads as a system-level transition, not an app-local spinner or a modal. */ .aip-wordmark{ position:absolute; top:28px; left:50%; transform:translateX(-50%); z-index:3; font:400 13px var(--aip-serif); letter-spacing:.08em; text-transform:uppercase; color:rgba(244,241,233,.82); } .aip{ position:relative; width:100%; min-height:100%; overflow:hidden; font-family:var(--aip-sans); isolation:isolate; /* Frosted-glass surface, not a fresh opaque backdrop: a translucent dark tint + blur over whatever the overlay sits on top of, so the project page's own colors/light still bleed through softly. */ background:rgba(20,21,18,.82); -webkit-backdrop-filter:blur(22px) saturate(1.05); backdrop-filter:blur(22px) saturate(1.05); } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ /* No blur support: fall back to a darker but still non-opaque tint rather than losing the "still see your project" effect entirely. */ .aip{ background:rgba(15,16,14,.94); } } /* ---------- immersive background + slow Ken Burns drift ---------- */ .aip-bg{ position:absolute; inset:0; background-size:cover; background-position:center; animation:aip-kenburns 26s var(--aip-ease-3) infinite alternate; will-change:transform; /* Dimmed to a presence within the frosted layer rather than an opaque photo — keeps the Cinematic project-related visual (rule 7) without it alone defeating the overlay's translucency. */ opacity:.5; } @media (prefers-reduced-motion: reduce){ .aip-bg{ animation:none; } } @keyframes aip-kenburns{ 0%{ transform:scale(1.02); } 100%{ transform:scale(1.12); } } /* Bottom-anchored scrim — content sits inside this gradient, never a flat card floating on top of the image. Lightens on completion so the reveal feels like uncovering the result, not swapping a screen. */ .aip-scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,16,14,.7) 0%, rgba(15,16,14,.3) 42%, rgba(15,16,14,.08) 68%); transition:background 1.6s var(--aip-ease-4); } .aip[data-state="completed"] .aip-scrim{ background:linear-gradient(0deg, rgba(15,16,14,.55) 0%, rgba(15,16,14,.1) 55%, rgba(15,16,14,0) 75%); } .aip[data-state="failed"] .aip-scrim{ background:linear-gradient(0deg, rgba(15,16,14,.94) 0%, rgba(15,16,14,.5) 48%, rgba(15,16,14,.08) 70%); } /* ---------- content panel ---------- */ .aip-panel{ /* Absolute + inset:0 (not a percentage min-height in normal flow) so this reliably fills .aip regardless of how .aip itself is sized by its host page — a percentage height here would silently fail to resolve whenever .aip's own height comes from something other than an explicit "height" (e.g. min-height:100%, as below), leaving the panel content-sized and stuck at the top instead of bottom-anchored. */ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(28px,5vw,72px); } .aip-eyebrow{ display:inline-block; font:10px/1 var(--aip-mono); letter-spacing:.16em; text-transform:uppercase; color:rgba(244,241,233,.7); margin-bottom:14px; } .aip-heading{ font:400 clamp(26px,4vw,46px)/1.1 var(--aip-serif); letter-spacing:-.02em; color:var(--aip-ivory); margin:0 0 12px; max-width:16ch; text-wrap:balance; } .aip-desc{ font:15px/1.6 var(--aip-sans); color:rgba(244,241,233,.8); max-width:40ch; margin:0 0 26px; } /* Status row: a calm, subtly pulsing mark + the current message. This is the ONLY processing indicator — never a spinner, never a percentage unless the caller explicitly supplies real progress. */ .aip-status-row{ display:flex; align-items:center; gap:11px; min-height:14px; margin-bottom:20px; } .aip-status-dot{ width:7px; height:7px; border-radius:50%; background:var(--aip-brass); flex:none; animation:aip-pulse 2.4s var(--aip-ease-3) infinite; } .aip[data-state="queued"] .aip-status-dot{ animation-duration:3.6s; opacity:.6; } .aip[data-state="completed"] .aip-status-dot, .aip[data-state="failed"] .aip-status-dot{ animation:none; } .aip[data-state="completed"] .aip-status-dot{ background:var(--aip-brass); opacity:1; } .aip[data-state="failed"] .aip-status-dot{ background:var(--aip-error); } @keyframes aip-pulse{ 0%, 100%{ opacity:.35; transform:scale(.85); } 50%{ opacity:1; transform:scale(1); } } .aip-status-text{ font:12px/1.4 var(--aip-mono); letter-spacing:.03em; color:rgba(244,241,233,.92); } /* Optional real-progress rule — rendered ONLY when the caller passes a numeric progressPercent. No JS in this component ever invents or increments this value on its own. */ .aip-progress{ display:none; width:220px; max-width:50vw; height:1px; background:rgba(244,241,233,.22); margin-bottom:22px; overflow:hidden; } .aip-progress[data-has-value="true"]{ display:block; } .aip-progress-fill{ height:100%; width:0%; background:var(--aip-brass); transition:width .8s var(--aip-ease-4); } .aip-note{ font:13px/1.5 var(--aip-sans); color:rgba(244,241,233,.78); max-width:40ch; margin:0 0 22px; } /* ---------- actions ---------- */ .aip-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; } .aip-cta{ display:inline-flex; align-items:center; gap:10px; font:11px/1 var(--aip-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--aip-ink); background:var(--aip-ivory); border:1px solid var(--aip-ivory); padding:14px 22px; cursor:pointer; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .5s var(--aip-ease-3), transform .5s var(--aip-ease-3), background .2s, color .2s; } .aip-cta.is-visible{ opacity:1; transform:translateY(0); pointer-events:auto; } .aip-cta:hover{ background:transparent; color:var(--aip-ivory); } .aip-cta.is-secondary{ background:transparent; color:var(--aip-ivory); border-color:rgba(244,241,233,.5); } .aip-cta.is-secondary:hover{ background:rgba(244,241,233,.12); color:var(--aip-ivory); } /* ---------- state badge (top-right, quiet) ---------- */ .aip-badge{ position:absolute; top:20px; right:20px; z-index:6; font:9px/1 var(--aip-mono); letter-spacing:.1em; text-transform:uppercase; color:rgba(244,241,233,.85); border:1px solid rgba(244,241,233,.35); padding:6px 10px; border-radius:20px; background:rgba(15,16,14,.25); backdrop-filter:blur(4px); } .aip[data-state="failed"] .aip-badge{ color:#f0d9cd; border-color:rgba(240,217,205,.45); } /* ---------- responsive ---------- */ @media (max-width:900px){ .aip-heading{ max-width:14ch; } } @media (max-width:640px){ .aip-panel{ padding:22px; padding-bottom:max(22px, env(safe-area-inset-bottom)); } .aip-heading{ font-size:clamp(24px,7vw,32px); max-width:13ch; } .aip-desc{ font-size:14px; max-width:none; } .aip-actions{ flex-direction:column; align-items:stretch; } .aip-cta{ justify-content:center; } .aip-badge{ top:14px; right:14px; font-size:8px; padding:5px 9px; } }