/* ============================================================================ M1B INTRO — "The Manifest" (Concept B + restrained Concept A route lines) Self-contained overlay styles. Deleting this file + intro.js + the #dcg-intro fragment removes the intro completely (§9 removability). Display/gating and scroll lock live inline in (fail-safe). Compositor-friendly only: transform + opacity (+ SVG stroke draw). ============================================================================ */ #dcg-intro { background: var(--dcg-p-asphalt, #16171A); font-family: var(--dcg-font-mono, "IBM Plex Mono", ui-monospace, monospace); } .di-stage { position: absolute; inset: 0; overflow: hidden; } /* Change 01 pass 3 (§8): the stage is nearly clean — a barely-there texture plus a soft vignette. No guide lines cross the slogan or the logo. */ .di-grid { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 90% 70% at 50% 42%, rgba(242, 241, 236, .03), transparent 70%), repeating-linear-gradient(0deg, transparent 0 179px, rgba(242, 241, 236, .016) 179px 180px), repeating-linear-gradient(90deg, transparent 0 239px, rgba(242, 241, 236, .012) 239px 240px); animation: di-grid-in 500ms ease-out forwards; } @keyframes di-grid-in { to { opacity: 1; } } /* The traffic behind the slogan. It sits above the texture and below the route lines, the identifiers, the scrim, the slogan and the badge — so it is always behind everything that has to be read. Opacity is driven from intro.js: up after the opening starts, back as the badge forms, out with the overlay. */ .di-traffic { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; will-change: opacity; } /* reduced motion: one still frame, held at a whisper */ .di-traffic.is-still { opacity: .5; will-change: auto; } .di-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .di-svg .di-route { fill: none; stroke: rgba(242, 241, 236, .5); stroke-width: 2.5; stroke-linecap: round; } .di-svg .di-route--accent { stroke: rgba(226, 72, 84, .8); } .di-svg .di-node { fill: var(--dcg-p-red, #E24854); } /* Traveling identifier lanes (Beat 2) — decorative, aria-hidden ancestor */ .di-lanes { position: absolute; inset: 0; } .di-lane { position: absolute; top: 0; left: 0; display: flex; align-items: baseline; gap: .55em; color: var(--dcg-p-bone, #F2F1EC); opacity: 0; will-change: transform, opacity; white-space: nowrap; } .di-lane .di-eyebrow { font-size: clamp(13px, 1.6vw, 22px); letter-spacing: .18em; color: rgba(242, 241, 236, .75); } .di-lane .di-num { font-family: var(--dcg-font-display, "Archivo Expanded", Archivo, sans-serif); font-weight: 800; font-size: clamp(52px, 9.5vw, 140px); /* visually dominant (owner req §3) */ letter-spacing: .04em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px rgba(0, 0, 0, .55); } .di-lane--mid .di-num { font-size: clamp(64px, 13vw, 190px); } @media (max-width: 719px) { .di-lane .di-num { font-size: clamp(48px, 14vw, 90px); } .di-lane--mid .di-num { font-size: clamp(56px, 17vw, 110px); } } /* Badge zone (Beats 3–4). Layer order inside the overlay: routes/lanes BELOW → .di-scrim (invisible asphalt occluder — identifiers visibly sink INTO the badge zone) → .di-white (the official badge's own alpha mask filled bone = perfectly aligned white line-art state) → .di-badge-img (official color badge, revealed bottom-to-top via clip-path) → single sheen. Both badge states derive from ONE official asset, so the white→color transformation can never jump. Undistorted, uniform scale. */ .di-scrim { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; background: radial-gradient(ellipse 52% 48% at 50% 54%, rgba(22, 23, 26, .97) 55%, rgba(22, 23, 26, .85) 66%, rgba(22, 23, 26, 0) 80%); will-change: opacity; } .di-badge { position: absolute; top: 0; left: 0; will-change: transform, opacity; } /* WHITE state composite: badge artwork bone, AMERICAN FLAGS in full color, no bottom motto (derived pixel-precisely from the official art). In-flow block: it defines .di-badge's box (the other layers stack on it). */ .di-white { display: block; width: 100%; height: auto; opacity: 0; will-change: opacity; } /* EXACT motto layer: the official motto pixels recolored bone — the live flying letters crossfade into THIS at the seat, so the seated white motto is pixel-identical in geometry to the printed red one (proven: 0 alpha mismatches between delta-motto-white and delta-motto-red). */ .di-motto-official { position: absolute; inset: 0; width: 100%; height: auto; opacity: 0; will-change: opacity; } html[data-intro="reduced"] .di-motto-official { display: none; } /* Full official artwork (motto included) — hidden by its clip until the WHITE→RED sweep reveals it bottom-up (the sweep converts the stamped motto first, then the rest of the badge). */ .di-badge-full { position: absolute; inset: 0; width: 100%; height: auto; opacity: 1; clip-path: inset(100% 0 0 0); will-change: clip-path; } /* One restrained sheen pass, masked to the badge alpha (Beat 4). Flat highlight — explicitly no neon glow, no bloom, no floor light. */ .di-sheen-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; -webkit-mask-image: url("/assets/delta-badge.webp"); mask-image: url("/assets/delta-badge.webp"); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } .di-sheen { position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; transform: translateX(-160%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(242, 241, 236, .38) 50%, transparent); will-change: transform; } /* Skip control — accessible, focusable first (overlay precedes page in DOM) */ .di-skip { position: absolute; right: 20px; bottom: 18px; font: 500 12px/1 var(--dcg-font-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 241, 236, .85); background: transparent; border: 1px solid rgba(242, 241, 236, .32); border-radius: 6px; padding: 12px 16px; min-height: 44px; min-width: 44px; cursor: pointer; } .di-skip:hover { color: #fff; border-color: rgba(242, 241, 236, .6); } .di-skip:focus-visible { outline: 3px solid var(--dcg-p-red, #E24854); outline-offset: 2px; } /* ---------- ?introDebug=1 timeline bar (local owner review only; the head eligibility script only enables debug on local hostnames) ---------- */ .di-debug { position: absolute; left: 20px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--dcg-font-mono, ui-monospace, monospace); color: rgba(242, 241, 236, .9); background: rgba(22, 23, 26, .85); border: 1px solid rgba(242, 241, 236, .25); border-radius: 8px; padding: 10px 12px; } .di-debug button { font: inherit; color: inherit; background: transparent; cursor: pointer; border: 1px solid rgba(242, 241, 236, .3); border-radius: 5px; padding: 8px 10px; } .di-debug button:hover { border-color: rgba(242, 241, 236, .6); } .di-debug button:focus-visible { outline: 3px solid var(--dcg-p-red, #E24854); outline-offset: 1px; } .di-debug input[type="range"] { width: min(34vw, 320px); accent-color: var(--dcg-p-red, #E24854); } .di-debug .di-time { min-width: 64px; text-align: right; color: rgba(242, 241, 236, .65); } /* ---------- reduced motion: static badge reveal (≤ ~400ms total, JS-timed); no kinetic lanes, no routes, no sheen, no grid movement ---------- */ html[data-intro="reduced"] .di-grid, html[data-intro="reduced"] .di-svg, html[data-intro="reduced"] .di-lanes, html[data-intro="reduced"] .di-scrim, html[data-intro="reduced"] .di-white, html[data-intro="reduced"] .di-sheen-wrap { display: none; } html[data-intro="reduced"] .di-badge { position: absolute; left: 50%; top: 50%; width: min(46vw, 320px); transform: translate(-50%, -50%); opacity: 1; } /* reduced mode shows the complete official logo; with the white layer hidden, the full-art img must define the badge box itself */ html[data-intro="reduced"] .di-badge-full { opacity: 1; clip-path: none; position: static; display: block; } @media (prefers-reduced-motion: reduce) { html:not([data-motion-proof="force"]) .di-grid { animation: none; opacity: 1; } } /* Whole-overlay exit is driven by WAAPI in intro.js (transform only). */ /* ---------- v4: motto-first + demoted route data ---------- */ .di-motto { position: absolute; top: 0; left: 0; white-space: nowrap; /* regular Archivo (not Expanded): narrower glyphs seat ~30% larger on the arc, matching the badge's condensed motto lettering for a smooth stamp */ font-family: Archivo, "Archivo Expanded", sans-serif; font-weight: 800; font-size: clamp(34px, 6.4vw, 96px); letter-spacing: .03em; color: var(--dcg-p-bone, #F2F1EC); /* stays clearly IN FRONT while the badge forms behind it */ text-shadow: 0 4px 26px rgba(0, 0, 0, .85), 0 1px 3px rgba(0, 0, 0, .6); z-index: 3; text-shadow: 0 2px 26px rgba(0, 0, 0, .55); will-change: transform, opacity; } /* no will-change: forced layerization rasterizes the text at pre-transform size and the seated (scaled-down) letters go soft — letting the browser re-raster keeps every glyph crisp */ .di-motto .di-word { display: inline-block; } .di-motto .di-lt { display: inline-block; } /* (the supporting curved line is the badge's own lower red line, preserved in the motto-less formation layer — no synthetic guide is drawn) */ /* owner Change 01: OWN carries the Delta red; WAY! stays white */ .di-motto .di-word--own { color: var(--dcg-p-red, #E24854); } /* mobile: one unwrapped line (each word still punches in centered), sized to fit */ @media (max-width: 719px) { .di-motto { font-size: clamp(21px, 7.6vw, 40px); white-space: nowrap; } } .di-data { position: absolute; top: 0; left: 0; opacity: 0; font-family: var(--dcg-font-mono, ui-monospace, monospace); font-size: clamp(11px, 1.05vw, 14px); letter-spacing: .2em; color: rgba(242, 241, 236, .5); } html[data-intro="reduced"] .di-motto, html[data-intro="reduced"] .di-data { display: none; }