/* ========================================================================== ICHOM VISTA — motion layer Purely decorative, loaded after vista.css and entirely optional: with this file (or vista-motion.js) removed the site renders exactly as before. Everything here is inside `prefers-reduced-motion: no-preference`, so a visitor who asks for less motion gets the static page. Entrance states are additionally scoped to `.js-motion` (set by the script) so content is never left invisible when JavaScript doesn't run. ========================================================================== */ /* The ambient canvas paints behind all content. Hoisting the page field from to is what makes that possible: a fixed, z-index:-1 element paints above the root background but below every in-flow block. */ html { background: var(--navy); } body { background: transparent; } #signal-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* Text inputs are translucent, which would let the field drift visibly behind whatever the visitor is typing. Same colour, but opaque. */ .form-field input[type="text"], .form-field input[type="email"], .form-field textarea { background: #0D426C; } /* Interpolatable custom property for the card spotlight. Browsers without @property simply snap the value instead of fading it. */ @property --glow { syntax: ""; inherits: false; initial-value: 0; } @media (prefers-reduced-motion: no-preference) { /* ------------------------------------------------------------------------ Reveal on scroll — content rises into place once, then the hooks are removed by the script so hover transitions aren't left slowed down. ------------------------------------------------------------------------ */ .js-motion [data-reveal] { opacity: 0; transform: translateY(16px); } .js-motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .75s cubic-bezier(.22,.61,.36,1) var(--rd, 0ms), transform .75s cubic-bezier(.22,.61,.36,1) var(--rd, 0ms); } /* ------------------------------------------------------------------------ Hero aura — two very soft brand-coloured blobs drifting on long, mismatched cycles. Slow enough that it reads as light, not animation. ------------------------------------------------------------------------ */ .hero { position: relative; overflow: hidden; } .hero > .wrap { position: relative; z-index: 1; } .hero::before, .hero::after { content: ""; position: absolute; z-index: 0; border-radius: 50%; filter: blur(90px); pointer-events: none; } .hero::before { width: 540px; height: 540px; left: 2%; top: 24px; background: rgba(54, 188, 69, 0.105); animation: aura-drift-a 28s ease-in-out infinite; } .hero::after { width: 400px; height: 400px; right: -40px; bottom: 30px; background: rgba(253, 80, 0, 0.072); animation: aura-drift-b 37s ease-in-out infinite; } @keyframes aura-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 34px) scale(1.12); } } @keyframes aura-drift-b { 0%, 100% { transform: translate(0, 0) scale(1.06); } 50% { transform: translate(-52px, -30px) scale(0.94); } } /* On a narrow viewport a blob this size stops being a hint and starts tinting the whole hero — scale it back. */ @media (max-width: 700px) { .hero::before { width: 300px; height: 300px; left: -30px; top: 60px; background: rgba(54, 188, 69, 0.08); filter: blur(70px); } .hero::after { width: 220px; height: 220px; background: rgba(253, 80, 0, 0.05); filter: blur(70px); } } /* ------------------------------------------------------------------------ Hero shape marks — every page's `.shapes` block breathes on independent cycles and leans very slightly toward the pointer. ------------------------------------------------------------------------ */ .shapes { transform: translate3d(calc(var(--px, 0) * 9px), calc(var(--py, 0) * 9px), 0); transition: transform .9s cubic-bezier(.22,.61,.36,1); } .shapes svg { transform-origin: 50% 50%; animation: breathe 9s ease-in-out infinite; } .shapes svg:nth-child(1) { animation-duration: 8.5s; animation-delay: -1.2s; } .shapes svg:nth-child(2) { animation-duration: 11s; animation-delay: -4.0s; } .shapes svg:nth-child(3) { animation-duration: 9.5s; animation-delay: -6.5s; } .shapes svg:nth-child(4) { animation-duration: 12.5s; animation-delay: -2.6s; } @keyframes breathe { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-10px) scale(1.025); } } /* ------------------------------------------------------------------------ Stack diagram — a pulse travels up the arrows, because that is what the diagram says happens: definitions flow down, values flow up. ------------------------------------------------------------------------ */ .stack .arrow { animation: flow-up 4.4s ease-in-out infinite; animation-delay: calc(var(--flow-i, 0) * -0.5s); } @keyframes flow-up { 0%, 55%, 100% { color: var(--mist-dim); transform: translateY(0); } 22% { color: var(--green); transform: translateY(-3px); } } /* ------------------------------------------------------------------------ Component cards — the brand mark tips as you arrive, over a whisper of sage that follows the cursor. The card is 96% transparent, so the canvas lens is already visible THROUGH it. This gradient composites on top of that, which is why it has to stay near the lens wash's own alpha (0.030): any brighter and hovering a card reads as the lens flaring, which happens nowhere else on the site. Wide radius, no hotspot — the lift and the green border are the real hover affordances. ------------------------------------------------------------------------ */ .comp-card { background-image: radial-gradient( 340px circle at var(--mx, 50%) var(--my, 0%), rgba(194, 228, 186, var(--glow)), transparent 76%); transition: transform .18s ease, border-color .18s ease, --glow .35s ease; } .comp-card:hover { --glow: 0.055; } .comp-card .mark svg { transition: transform .35s cubic-bezier(.22,.61,.36,1); } .comp-card:hover .mark svg { transform: rotate(-7deg) scale(1.07); } }