/* ========================================================================== AWCompany ApS — Motion design Scroll reveals, staggered entrances, hover choreography. All effects are opt-out via prefers-reduced-motion (see style.css base). ========================================================================== */ /* Generic scroll-reveal: elements start hidden, JS toggles .is-visible when they enter the viewport (see js/animations.js). If JS fails to load, .no-js on keeps everything visible — content is never gated behind motion. */ [data-reveal]{ opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-premium), transform 900ms var(--ease-premium); will-change: opacity, transform; } [data-reveal].is-visible{ opacity: 1; transform: translateY(0); } [data-reveal="fade"]{ transform: none; } [data-reveal="mask"]{ transform: none; opacity: 1; } [data-reveal="mask"] .mask-inner{ transform: translateY(110%); transition: transform 900ms var(--ease-premium); } [data-reveal="mask"].is-visible .mask-inner{ transform: translateY(0); } [data-reveal-group] [data-reveal]{ transition-delay: calc(var(--i, 0) * 90ms); } .no-js [data-reveal]{ opacity: 1 !important; transform: none !important; } /* Hero title line-mask entrance */ .hero-title .line span{ transform: translateY(100%); transition: transform 1000ms var(--ease-premium); } .hero-loaded .hero-title .line:nth-child(1) span{ transition-delay: 120ms; } .hero-loaded .hero-title .line:nth-child(2) span{ transition-delay: 230ms; } .hero-loaded .hero-title .line span{ transform: translateY(0); } .hero-loaded .hero-kicker, .hero-loaded .hero-foot, .hero-loaded .scroll-cue{ opacity: 1; transform: none; } .hero-kicker, .hero-foot, .scroll-cue{ opacity: 0; transform: translateY(14px); transition: opacity 800ms var(--ease-premium) 420ms, transform 800ms var(--ease-premium) 420ms; } .hero-foot{ transition-delay: 520ms; } .scroll-cue{ transition-delay: 640ms; } /* Gentle cinematic drift on hero media (Ken Burns) */ @media (prefers-reduced-motion: no-preference){ .hero-media img, .cta-band .hero-media img{ animation: kenburns 18s ease-in-out infinite alternate; } } @keyframes kenburns{ from{ transform: scale(1.04) translate3d(0,0,0); } to{ transform: scale(1.12) translate3d(-1%,-1%,0); } } /* Marquee-style eyebrow underline draw */ .eyebrow::before{ transform-origin: left center; animation: none; } [data-reveal].is-visible .eyebrow::before{ animation: draw-line 700ms var(--ease-premium) 120ms both; } @keyframes draw-line{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } } /* Counter number pop (JS drives the digits themselves) */ .stat-num{ font-variant-numeric: tabular-nums; } /* Accordion open state height handled inline by JS; icon rotation above */ /* Button micro-interaction ripple-free press */ .btn:active{ transform: translateY(0) scale(0.98); } /* Page load fade-in to avoid FOUC jump */ body{ animation: page-in 500ms var(--ease-premium) both; } @keyframes page-in{ from{ opacity: 0; } to{ opacity: 1; } }