/** * Intentional motion — entrance, hover hierarchy. * Applied only when JS adds `.ah-motion` on . * Disabled under prefers-reduced-motion. */ /* ── Reveal (scroll entrance) ── */ .ah-motion .ah-reveal { opacity: 0; transform: translateY(1.15rem); transition: opacity 700ms var(--ah-ease), transform 700ms var(--ah-ease); will-change: opacity, transform; } .ah-motion .ah-reveal.is-visible { opacity: 1; transform: none; will-change: auto; } .ah-motion .ah-reveal-stagger > .ah-reveal:nth-child(1) { transition-delay: 0ms; } .ah-motion .ah-reveal-stagger > .ah-reveal:nth-child(2) { transition-delay: 70ms; } .ah-motion .ah-reveal-stagger > .ah-reveal:nth-child(3) { transition-delay: 140ms; } .ah-motion .ah-reveal-stagger > .ah-reveal:nth-child(4) { transition-delay: 210ms; } .ah-motion .ah-reveal-stagger > .ah-reveal:nth-child(5) { transition-delay: 280ms; } .ah-motion .ah-reveal-stagger > .ah-reveal:nth-child(6) { transition-delay: 350ms; } /* ── Hero staggered entrance ── */ .ah-motion .ah-hero__content > * { opacity: 0; transform: translateY(1rem); transition: opacity 650ms var(--ah-ease), transform 650ms var(--ah-ease); } .ah-motion .ah-hero.is-ready .ah-hero__content > * { opacity: 1; transform: none; } .ah-motion .ah-hero.is-ready .ah-hero__content > *:nth-child(1) { transition-delay: 40ms; } .ah-motion .ah-hero.is-ready .ah-hero__content > *:nth-child(2) { transition-delay: 140ms; } .ah-motion .ah-hero.is-ready .ah-hero__content > *:nth-child(3) { transition-delay: 240ms; } .ah-motion .ah-hero.is-ready .ah-hero__content > *:nth-child(4) { transition-delay: 340ms; } .ah-motion .ah-hero__visual, .ah-motion .ah-hero__media { opacity: 0; transform: translateX(1.25rem); transition: opacity 900ms var(--ah-ease) 180ms, transform 900ms var(--ah-ease) 180ms; } .ah-motion .ah-hero.is-ready .ah-hero__visual, .ah-motion .ah-hero.is-ready .ah-hero__media { opacity: 1; transform: none; } /* ── Hover hierarchy (beyond image zoom) ── */ .ah-btn:hover { transform: translateY(-1px); } .ah-btn:active { transform: translateY(0); } .ah-card, .ah-focus-card, .ah-holdings-ops__card, .ah-insight-card, .ah-about-principle { transition: border-color var(--ah-duration) var(--ah-ease), transform 320ms var(--ah-ease), box-shadow 320ms var(--ah-ease), background var(--ah-duration) var(--ah-ease); } .ah-card:hover, .ah-focus-card:hover, .ah-holdings-ops__card:hover, .ah-insight-card:hover, .ah-about-principle:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35); border-color: var(--ah-border-strong); } .ah-nav a { position: relative; transition: color var(--ah-duration) var(--ah-ease); } .ah-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.35rem; height: 1px; background: var(--ah-gold); transform: scaleX(0); transform-origin: left; transition: transform 280ms var(--ah-ease); } .ah-nav a:hover::after, .ah-nav a.is-active::after, .ah-nav a:focus-visible::after { transform: scaleX(1); } .ah-cta-discord { transition: border-color var(--ah-duration) var(--ah-ease), transform 320ms var(--ah-ease), box-shadow 320ms var(--ah-ease); } .ah-cta-discord:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); } /* ── Reduced motion ── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ah-motion .ah-reveal, .ah-motion .ah-hero__content > *, .ah-motion .ah-hero__visual, .ah-motion .ah-hero__media, .ah-btn, .ah-btn svg, .ah-card, .ah-focus-card, .ah-holdings-ops__card, .ah-insight-card, .ah-about-principle, .ah-focus-card__media img, .ah-insight-card__media img, .ah-holdings-ops__media img, .ah-nav a::after, .ah-cta-discord, .ah-header { transition: none !important; animation: none !important; } .ah-motion .ah-reveal, .ah-motion .ah-hero__content > *, .ah-motion .ah-hero__visual, .ah-motion .ah-hero__media { opacity: 1 !important; transform: none !important; } .ah-card:hover, .ah-focus-card:hover, .ah-holdings-ops__card:hover, .ah-insight-card:hover, .ah-about-principle:hover, .ah-btn:hover, .ah-cta-discord:hover { transform: none; box-shadow: none; } }