/* * AH Digital — Motion System * * Brand motion primitives. Motion must remain purposeful, performant * and progressively enhanced. */ /* Generic transition helpers */ .ah-transition { transition: color var(--ah-duration-base) var(--ah-ease-standard), background-color var(--ah-duration-base) var(--ah-ease-standard), border-color var(--ah-duration-base) var(--ah-ease-standard), opacity var(--ah-duration-base) var(--ah-ease-standard), transform var(--ah-duration-base) var(--ah-ease-standard), box-shadow var(--ah-duration-base) var(--ah-ease-standard); } .ah-transition-fast { transition-duration: var(--ah-duration-fast); } .ah-transition-slow { transition-duration: var(--ah-duration-slow); } /* -------------------------------------------------------------------------- */ /* Progressive reveal */ /* -------------------------------------------------------------------------- */ /* * Content remains visible by default. * JS may add .is-motion-ready to only after motion initialization. */ html.is-motion-ready [data-ah-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--ah-duration-medium) var(--ah-ease-enter), transform var(--ah-duration-medium) var(--ah-ease-enter); transition-delay: var(--ah-reveal-delay, 0ms); } html.is-motion-ready [data-ah-reveal="fade"] { transform: none; } html.is-motion-ready [data-ah-reveal="left"] { transform: translateX(-18px); } html.is-motion-ready [data-ah-reveal="right"] { transform: translateX(18px); } html.is-motion-ready [data-ah-reveal].is-in-view { opacity: 1; transform: none; } /* Restrained stagger helpers */ [data-ah-reveal-delay="1"] { --ah-reveal-delay: 50ms; } [data-ah-reveal-delay="2"] { --ah-reveal-delay: 100ms; } [data-ah-reveal-delay="3"] { --ah-reveal-delay: 150ms; } [data-ah-reveal-delay="4"] { --ah-reveal-delay: 200ms; } [data-ah-reveal-delay="5"] { --ah-reveal-delay: 250ms; } /* -------------------------------------------------------------------------- */ /* Hero choreography */ /* -------------------------------------------------------------------------- */ html.is-motion-ready .ah-hero [data-ah-hero-step] { opacity: 0; transform: translateY(16px); transition: opacity var(--ah-duration-medium) var(--ah-ease-enter), transform var(--ah-duration-medium) var(--ah-ease-enter); } html.is-motion-ready .ah-hero.is-in-view [data-ah-hero-step] { opacity: 1; transform: none; } html.is-motion-ready .ah-hero.is-in-view [data-ah-hero-step="1"] { transition-delay: 40ms; } html.is-motion-ready .ah-hero.is-in-view [data-ah-hero-step="2"] { transition-delay: 90ms; } html.is-motion-ready .ah-hero.is-in-view [data-ah-hero-step="3"] { transition-delay: 150ms; } html.is-motion-ready .ah-hero.is-in-view [data-ah-hero-step="4"] { transition-delay: 210ms; } html.is-motion-ready .ah-hero.is-in-view [data-ah-hero-step="5"] { transition-delay: 280ms; } /* -------------------------------------------------------------------------- */ /* Node activation */ /* -------------------------------------------------------------------------- */ [data-ah-motion="node"] { transition: background-color var(--ah-duration-base) var(--ah-ease-standard), border-color var(--ah-duration-base) var(--ah-ease-standard), box-shadow var(--ah-duration-base) var(--ah-ease-standard), transform var(--ah-duration-base) var(--ah-ease-emphasis); } [data-ah-motion="node"].is-active { border-color: var(--ah-color-brand); background: var(--ah-color-brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ah-color-brand) 13%, transparent); transform: scale(1.05); } [data-ah-motion="node"].is-signal { border-color: var(--ah-color-signal); background: var(--ah-color-signal); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ah-color-signal) 12%, transparent); } [data-ah-motion="node"].is-intelligence { border-color: var(--ah-color-intelligence); background: var(--ah-color-intelligence); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ah-color-intelligence) 12%, transparent); } /* Connection line */ .ah-motion-line { position: relative; overflow: hidden; background: var(--ah-color-border); } .ah-motion-line::after { position: absolute; inset: 0; background: linear-gradient( 90deg, var(--ah-color-brand), var(--ah-color-intelligence) ); content: ""; transform: scaleX(0); transform-origin: left center; transition: transform var(--ah-duration-slow) var(--ah-ease-emphasis); } .ah-motion-line.is-active::after { transform: scaleX(1); } /* -------------------------------------------------------------------------- */ /* Signal sweep */ /* -------------------------------------------------------------------------- */ .ah-signal-sweep { position: relative; overflow: hidden; } .ah-signal-sweep::after { position: absolute; inset: -40% auto -40% -45%; width: 34%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.34), transparent ); content: ""; pointer-events: none; transform: skewX(-18deg); transition: left var(--ah-duration-medium) var(--ah-ease-emphasis); } .ah-signal-sweep:hover::after, .ah-signal-sweep:focus-visible::after, .ah-signal-sweep.is-active::after { left: 115%; } /* -------------------------------------------------------------------------- */ /* Interface state transitions */ /* -------------------------------------------------------------------------- */ .ah-state-panel { transition: opacity var(--ah-duration-base) var(--ah-ease-standard), transform var(--ah-duration-base) var(--ah-ease-standard); } .ah-state-panel[hidden] { display: block !important; height: 0; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(8px); visibility: hidden; } .ah-state-panel.is-active { height: auto; opacity: 1; pointer-events: auto; transform: none; visibility: visible; } /* -------------------------------------------------------------------------- */ /* Progress / process */ /* -------------------------------------------------------------------------- */ .ah-progress-track { position: relative; overflow: hidden; background: var(--ah-color-border); } .ah-progress-track__fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--ah-progress, 0%); background: linear-gradient( 90deg, var(--ah-color-brand), var(--ah-color-intelligence) ); transition: width var(--ah-duration-base) var(--ah-ease-standard); } .ah-process-step { transition: opacity var(--ah-duration-base) var(--ah-ease-standard), transform var(--ah-duration-base) var(--ah-ease-standard); } .ah-process-step:not(.is-active) { opacity: 0.6; } .ah-process-step.is-active { opacity: 1; transform: translateY(-1px); } /* -------------------------------------------------------------------------- */ /* Project / tab preview */ /* -------------------------------------------------------------------------- */ .ah-preview { transition: opacity var(--ah-duration-base) var(--ah-ease-standard), transform var(--ah-duration-base) var(--ah-ease-standard); } .ah-preview.is-entering { opacity: 0; transform: translateY(8px); } .ah-preview.is-active { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- */ /* Theme switch */ /* -------------------------------------------------------------------------- */ html, body, .ah-site, .ah-card, .ah-browser-frame, .ah-theme-toggle, .ah-tab, input, textarea, select { transition: background-color var(--ah-duration-base) var(--ah-ease-standard), border-color var(--ah-duration-base) var(--ah-ease-standard), color var(--ah-duration-base) var(--ah-ease-standard); } /* -------------------------------------------------------------------------- */ /* Utility motion */ /* -------------------------------------------------------------------------- */ .ah-hover-lift { transition: transform var(--ah-duration-base) var(--ah-ease-standard), box-shadow var(--ah-duration-base) var(--ah-ease-standard); } .ah-hover-lift:hover { transform: translateY(-2px); } .ah-hover-scale-media img { transition: transform var(--ah-duration-medium) var(--ah-ease-standard); } .ah-hover-scale-media:hover img { transform: scale(1.02); } /* -------------------------------------------------------------------------- */ /* Reduced motion */ /* -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.is-motion-ready [data-ah-reveal], html.is-motion-ready .ah-hero [data-ah-hero-step] { opacity: 1; transform: none; transition: none; } [data-ah-motion="node"], .ah-motion-line::after, .ah-state-panel, .ah-progress-track__fill, .ah-process-step, .ah-preview, .ah-hover-lift, .ah-hover-scale-media img, html, body, .ah-site, .ah-card, .ah-browser-frame, .ah-theme-toggle, .ah-tab, input, textarea, select { transition: none; } .ah-signal-sweep::after { display: none; } .ah-hover-lift:hover, .ah-hover-scale-media:hover img, .ah-process-step.is-active { transform: none; } } /* -------------------------------------------------------------------------- */ /* Fallbacks */ /* -------------------------------------------------------------------------- */ @supports not (color: color-mix(in srgb, black, white)) { [data-ah-motion="node"].is-active, [data-ah-motion="node"].is-signal, [data-ah-motion="node"].is-intelligence { box-shadow: none; } }