/* * Welcome hero: entrance choreography, docking rig, live ciphertext readout * and the scroll handoff into the deck. * * This must load in (not inline at the end of the section): the * entrance animations use backwards fill, so if the rules arrive after the * hero has painted, elements flash fully visible, snap to hidden, then * animate in. */ /* ---------- Entrance: content rises, the rig docks, the form powers on ---------- */ @keyframes hero-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } } /* fill backwards, not forwards: after the entrance ends the elements release their transform to the scroll handoff rules below */ .hero-enter { animation: hero-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards; } .hero-dock { position: absolute; inset: -18px -14px; pointer-events: none; } @media (min-width: 768px) { .hero-dock { inset: -20px -52px; } } .hero-pin { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(34, 211, 238, 0.75); filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.45)); opacity: 0; animation: hero-pin-dock 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } .hero-pin-tl { top: 0; left: 0; border-right: 0; border-bottom: 0; animation-delay: 0.85s; } .hero-pin-tr { top: 0; right: 0; border-left: 0; border-bottom: 0; animation-delay: 0.95s; } .hero-pin-br { bottom: 0; right: 0; border-left: 0; border-top: 0; animation-delay: 1.05s; } .hero-pin-bl { bottom: 0; left: 0; border-right: 0; border-top: 0; animation-delay: 1.15s; } @keyframes hero-pin-dock { from { opacity: 0; transform: scale(1.7); } to { opacity: 0.85; transform: scale(1); } } .hero-feed { position: absolute; top: 50%; width: 74px; height: 2px; opacity: 0; animation: hero-feed-in 0.7s ease-out forwards; } .hero-feed-l { left: -74px; background: linear-gradient(90deg, transparent, #22d3ee); transform-origin: left center; animation-delay: 0.7s; } .hero-feed-r { right: -74px; background: linear-gradient(270deg, transparent, #22d3ee); transform-origin: right center; animation-delay: 0.7s; } @keyframes hero-feed-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 0.55; transform: scaleX(1); } } /* The terminal wakes up as the rig connects */ #secretFormContainer { animation: hero-ignite 1.6s ease-out 0.45s backwards; } @keyframes hero-ignite { 0% { filter: brightness(0.6) saturate(0.75); } 55% { filter: brightness(0.85) saturate(0.9); } 80% { filter: brightness(1.15) saturate(1.1); } 100% { filter: none; } } /* ---------- Live ciphertext readout under the form ---------- */ /* the hidden attribute must win over the flex display below, otherwise the empty strip renders as a stray outline */ .hero-cipher[hidden] { display: none; } .hero-cipher { display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.95rem; border: 1px solid rgba(34, 211, 238, 0.18); border-radius: 0.75rem; background: rgba(10, 10, 20, 0.55); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; overflow: hidden; text-align: left; } .hero-cipher-label { flex-shrink: 0; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(148, 163, 184, 0.85); } .hero-cipher-glyphs { font-size: 12px; letter-spacing: 0.12em; color: #67e8f9; text-shadow: 0 0 8px rgba(34, 211, 238, 0.35); overflow: hidden; } .hero-cipher-caret { flex-shrink: 0; width: 7px; height: 14px; background: #22d3ee; animation: hero-caret 1.1s steps(1) infinite; } @keyframes hero-caret { 50% { opacity: 0; } } /* ---------- Scroll handoff: the hero transmits the form to the deck ---------- */ /* Headline and subtitle lift away faster than the deck recedes while the form sinks toward the incoming panel: the section reads as handing its payload to the wire rather than just being covered. */ html.story-on [data-deck-hero] .hero-headline { transform: translate3d(0, calc(var(--cover, 0) * -70px), 0); opacity: calc(1 - var(--cover, 0) * 1.6); } html.story-on [data-deck-hero] .hero-sub { transform: translate3d(0, calc(var(--cover, 0) * -46px), 0); opacity: calc(1 - var(--cover, 0) * 1.45); } html.story-on [data-deck-hero] .hero-form-wrap { transform: translate3d(0, calc(var(--cover, 0) * 34px), 0) scale(calc(1 - var(--cover, 0) * 0.045)); } /* Fully gone before the incoming panel can geometrically reach it (contact happens near cover 0.23 with the current bottom padding), so the seam never overlaps a half-faded ghost of the pill */ html.story-on [data-deck-hero] .hero-trust { opacity: calc(1 - var(--cover, 0) * 4.5); } /* Wire measurement must read resting geometry, never a mid-entrance frame. Only transform/opacity are forced: important author declarations outrank animations in the cascade, so the entrance keeps running underneath. Setting animation:none here instead would restart the entrance on every re-measure, which reads as the hero flashing at load. */ html.story-measure .hero-enter, html.story-measure #secretFormContainer { transform: none !important; opacity: 1 !important; } @media (prefers-reduced-motion: reduce) { .hero-enter, .hero-pin, .hero-feed, #secretFormContainer, .hero-cipher-caret { animation: none !important; } .hero-pin, .hero-feed { opacity: 0.55; transform: none; } }