/* ============================================================ Hostika-bg.com — motion layer (progressive enhancement) ------------------------------------------------------------ Everything here is gated behind .has-motion, which the inline enabler in header.php adds BEFORE first paint — and only when the visitor has NOT requested reduced motion and the browser supports IntersectionObserver. So: no JS, an old browser, or "reduce motion" turned on => the page renders fully visible and static. Nothing in this file is load-bearing for content. Position is animated with the standalone `translate` property (not `transform`) so it composes with — never clobbers — the component transforms already in style.css (card hover lifts, the popular-tier lift, magnetic CTAs). ============================================================ */ /* The reveal target set is repeated verbatim in motion.js (REVEAL). */ /* ---------- Scroll reveal: hidden initial state ---------- */ .has-motion :is( .section-head, .tier, .enterprise-callout, .free-addon, .dc-card, .compliance-ribbon, .compliance-item, .svc-mini, .feature, .svc-row, .quote, .process-step, .faq, .cta-banner, #why .container > div ) { opacity: 0; translate: 0 24px; transition: opacity .7s var(--t), translate .7s var(--t); transition-delay: calc(var(--reveal-i, 0) * 70ms); } /* Revealed (JS adds .is-visible) — or forced visible by the 3s failsafe */ .has-motion :is( .section-head, .tier, .enterprise-callout, .free-addon, .dc-card, .compliance-ribbon, .compliance-item, .svc-mini, .feature, .svc-row, .quote, .process-step, .faq, .cta-banner, #why .container > div ).is-visible, .has-motion.motion-failsafe :is( .section-head, .tier, .enterprise-callout, .free-addon, .dc-card, .compliance-ribbon, .compliance-item, .svc-mini, .feature, .svc-row, .quote, .process-step, .faq, .cta-banner, #why .container > div ) { opacity: 1; translate: 0 0; } /* ---------- Hero entrance (homepage) ---------- */ /* Pure CSS — auto-plays on load. `both` fill keeps children hidden through their delay, so there is no flash of un-animated content. */ .has-motion .hero-inner > * { animation: hk-rise .8s var(--t) both; } .has-motion .hero-inner > .eyebrow { animation-delay: .05s; } .has-motion .hero-inner > h1 { animation-delay: .16s; } .has-motion .hero-inner > p { animation-delay: .30s; } .has-motion .hero-inner > .hero-ctas { animation-delay: .44s; } @keyframes hk-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } /* ---------- Living hero background (aurora drift) ---------- */ /* Sits between the hero gradient and the grid overlay (.hero::after), below the content (.hero-inner is z-index:1). Clipped by the hero's existing overflow:hidden. */ .has-motion .hero::before { content: ""; position: absolute; inset: -25%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side at 24% 34%, rgba(5, 150, 105, .22), transparent 70%), radial-gradient(closest-side at 78% 20%, rgba(180, 83, 9, .17), transparent 70%); animation: hk-aurora 24s ease-in-out infinite alternate; will-change: transform; } @keyframes hk-aurora { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(4%, 3%, 0) scale(1.12); } 100% { transform: translate3d(-2%, 3%, 0) scale(1.05); } } /* ---------- Shimmer on the serif-italic accent word ---------- */ .has-motion .hero h1 .accent { background-size: 220% auto; animation: hk-shimmer 6s linear infinite; } @keyframes hk-shimmer { to { background-position: 220% center; } } /* ---------- Cursor spotlight on cards ---------- */ /* JS feeds --mx / --my on pointer move (fine pointers only). The glow fades in on hover and tracks the cursor. Default off-card position keeps it invisible until hovered. */ .has-motion :is(.tier, .dc-card, .free-addon, .svc-mini, .feature, .service-card) { position: relative; } .has-motion :is(.tier, .dc-card, .free-addon, .svc-mini, .feature, .service-card)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(240px circle at var(--mx, -20%) var(--my, -20%), rgba(5, 150, 105, .12), transparent 60%); opacity: 0; transition: opacity .35s var(--t); pointer-events: none; } .has-motion :is(.tier, .dc-card, .free-addon, .svc-mini, .feature, .service-card):hover::after { opacity: 1; } /* ---------- Header gains depth once you scroll ---------- */ .has-motion .site-header { transition: box-shadow .25s var(--t), background-color .25s var(--t); } .has-motion .site-header.is-scrolled { box-shadow: 0 8px 30px -16px rgba(10, 13, 20, .30); } /* ---------- Belt-and-suspenders: honour reduced motion ---------- The enabler already withholds .has-motion under reduced motion, but if the preference flips mid-session this guarantees a calm page. */ @media (prefers-reduced-motion: reduce) { .has-motion :is( .section-head, .tier, .enterprise-callout, .free-addon, .dc-card, .compliance-ribbon, .compliance-item, .svc-mini, .feature, .svc-row, .quote, .process-step, .faq, .cta-banner, #why .container > div ) { opacity: 1 !important; translate: none !important; transition: none !important; } .has-motion .hero-inner > * { animation: none !important; opacity: 1 !important; transform: none !important; } .has-motion .hero::before, .has-motion .hero h1 .accent { animation: none !important; } .has-motion :is(.tier, .dc-card, .free-addon, .svc-mini, .feature, .service-card)::after { display: none !important; } }