/* ============================================================ Virtualaw OS -- motion layer (loaded site-wide). Scroll reveals, hero load entrances, homepage 3D-hero layering, and microanimations. All guarded so nothing breaks without JS and everything is disabled under prefers-reduced-motion. ============================================================ */ /* --- reveal guard --------------------------------------------------------- `vlos-anim` is added to in the head before paint (skipped under reduced motion). It hides reveal targets only until motion.js takes over, then motion.js removes the class. No JS / reduced motion -> never added -> everything is visible. */ .vlos-anim .sec-head, .vlos-anim .wedge, .vlos-anim .feature, .vlos-anim .console-shell, .vlos-anim .callout, .vlos-anim .guarantees, .vlos-anim .compare-table, .vlos-anim .price, .vlos-anim .close h2, .vlos-anim .close p, .vlos-anim .close .actions, .vlos-anim .j-card, .vlos-anim [data-reveal], .vlos-anim .system > .mod, .vlos-anim .trust-grid > .trust-card, .vlos-anim .plans > .plan, .vlos-anim .pillars > .pillar, .vlos-anim .whofor > span, .vlos-anim .steps > .step, .vlos-anim .faq > details, .vlos-anim .art-grid > .art-card, .vlos-anim [data-reveal-group] > * { opacity: 0; } /* hero / masthead load entrances */ .vlos-anim .nexus-hero [data-hero] { opacity: 0; transform: translateY(26px); } .vlos-anim .hero:not(.nexus-hero) .eyebrow, .vlos-anim .hero:not(.nexus-hero) h1, .vlos-anim .hero:not(.nexus-hero) .lede, .vlos-anim .hero:not(.nexus-hero) .actions, .vlos-anim .hero:not(.nexus-hero) .reassure, .vlos-anim .hero:not(.nexus-hero) .console-shell, .vlos-anim .page-hero .kicker, .vlos-anim .page-hero h1, .vlos-anim .page-hero .lede { opacity: 0; } /* --- homepage hero: layer a subtle three.js field behind the content ------ */ .hero { position: relative; overflow: hidden; } .hero > #hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; } .hero:not(.nexus-hero) > .hero-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 100% at 22% 34%, transparent 40%, color-mix(in oklch, var(--hero-ink) 58%, transparent) 100%), linear-gradient(0deg, var(--hero-ink) 3%, transparent 42%); } .hero > .wrap { position: relative; z-index: 2; } /* --- microanimations ------------------------------------------------------ */ /* pulsing hero eyebrow dot */ @keyframes vlos-pulse { 0%, 100% { box-shadow: 0 0 0 4px oklch(0.84 0.13 215 / 0.18); } 50% { box-shadow: 0 0 0 8px oklch(0.84 0.13 215 / 0.04); } } .hero .eyebrow .dot, .nexus-hero .eyebrow .dot { animation: vlos-pulse 2.8s var(--ease) infinite; } /* card hover lift (site.css already lifts .pillar) */ .trust-card, .plan, .mod { transition: transform 240ms var(--ease), border-color 240ms var(--ease), background 240ms var(--ease); } .trust-card:hover, .plan:hover { transform: translateY(-3px); } .mod:hover { transform: translateY(-1px); } /* magnetic primary buttons want a compositor hint */ .btn-primary { will-change: transform; } @media (prefers-reduced-motion: reduce) { .hero .eyebrow .dot, .nexus-hero .eyebrow .dot { animation: none; } .trust-card, .plan, .mod { transition: none; } .trust-card:hover, .plan:hover, .mod:hover { transform: none; } } /* ---- responsive nav (hamburger menu under 900px) ---- */ .nav-toggle { display: none; } @media (max-width: 900px) { .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; width: 42px; height: 38px; padding: 0 10px; border: 1px solid var(--rule-strong); border-radius: 7px; background: transparent; cursor: pointer; } .nav-toggle span { display: block; width: 100%; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s var(--ease), opacity 0.2s var(--ease); } header.top.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } header.top.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } header.top.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } nav.links { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 18px 34px -20px oklch(0.2 0.02 250 / 0.4); padding: 6px 22px 18px; } header.top.nav-open nav.links { display: flex; } header.top.nav-open nav.links a:not(.cta) { display: block; font-size: 16px; padding: 13px 2px; border-bottom: 1px solid var(--rule); color: var(--ink); } header.top.nav-open nav.links a:not(.cta)::after { display: none; } header.top.nav-open nav.links .cta { display: flex; width: 100%; justify-content: center; margin-top: 14px; } }