/* ============================================================ ALGOVARO — MOTION Scroll-reveals, staggered entrances, hero load-in, self-drawing charts. Shared by index.html + partner.html. - Driven by js/motion.js (IntersectionObserver adds .in). - Hidden states are SELECTOR-based and apply the instant the stylesheet parses (no flash-then-hide), gated on the .motion-ready class set synchronously in the . - Fully gated on prefers-reduced-motion. - Watchdog: if JS never runs, the head adds .motion-off after 2.6s and everything is forced visible (never stuck hidden). - NOTE: keep the selector list below in sync with REVEAL in js/motion.js. ============================================================ */ :root { --m-ease: var(--ease, cubic-bezier(.22,.61,.36,1)); } /* ---- failsafe: force everything visible if JS bailed ---- */ html.motion-off :is( .sec-head, .card, .fact, .perf-card, .perf-note, .heatmap-block, .block-note, .arch-list li, .arch-side, .interv-copy, .interv-box, .path, .price-shell, .price-callout, .value, .faq-item, .final-inner > *, .partner-inner, .stream-card, .kernsatz-section blockquote, .narrative-text, .narrative-table-wrap, .calc-controls, .calc-output ), html.motion-off .hero-copy > *, html.motion-off .hero-card, html.motion-off .p-hero .container > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } @media (prefers-reduced-motion: no-preference) { /* ---- scroll reveal: hidden by selector at parse time ---- */ html.motion-ready :is( .sec-head, .card, .fact, .perf-card, .perf-note, .heatmap-block, .block-note, .arch-list li, .arch-side, .interv-copy, .interv-box, .path, .price-shell, .price-callout, .value, .faq-item, .final-inner > *, .partner-inner, .stream-card, .kernsatz-section blockquote, .narrative-text, .narrative-table-wrap, .calc-controls, .calc-output ) { opacity: 0; transform: translateY(20px); transition: opacity .62s var(--m-ease), transform .62s var(--m-ease); transition-delay: calc(var(--reveal-i, 0) * 75ms); will-change: opacity, transform; } html.motion-ready :is( .sec-head, .card, .fact, .perf-card, .perf-note, .heatmap-block, .block-note, .arch-list li, .arch-side, .interv-copy, .interv-box, .path, .price-shell, .price-callout, .value, .faq-item, .final-inner > *, .partner-inner, .stream-card, .kernsatz-section blockquote, .narrative-text, .narrative-table-wrap, .calc-controls, .calc-output ).in { opacity: 1; transform: none; } /* ---- hero load-in (above the fold, runs immediately) ---- */ @keyframes m-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } html.motion-ready .hero-copy > *, html.motion-ready .hero-card, html.motion-ready .p-hero .container > * { opacity: 0; animation: m-rise .72s var(--m-ease) both; } html.motion-ready .hero-copy > *:nth-child(1) { animation-delay: .04s; } html.motion-ready .hero-copy > *:nth-child(2) { animation-delay: .12s; } html.motion-ready .hero-copy > *:nth-child(3) { animation-delay: .20s; } html.motion-ready .hero-copy > *:nth-child(4) { animation-delay: .28s; } html.motion-ready .hero-copy > *:nth-child(5) { animation-delay: .36s; } html.motion-ready .hero-card { animation-delay: .22s; } html.motion-ready .p-hero .container > *:nth-child(1) { animation-delay: .04s; } html.motion-ready .p-hero .container > *:nth-child(2) { animation-delay: .12s; } html.motion-ready .p-hero .container > *:nth-child(3) { animation-delay: .20s; } html.motion-ready .p-hero .container > *:nth-child(4) { animation-delay: .28s; } html.motion-ready .p-hero .container > *:nth-child(5) { animation-delay: .36s; } html.motion-ready .p-hero .container > *:nth-child(6) { animation-delay: .44s; } /* ---- self-drawing chart lines (offsets set by motion.js) ---- */ html.motion-ready .spark-line, html.motion-ready .curve-line { will-change: stroke-dashoffset; } /* chart fills fade in just after the line begins drawing ---- */ html.motion-ready .interv-box .dd-fill, html.motion-ready .interv-box .rc-fill { opacity: 0; transition: opacity .7s var(--m-ease) .4s; } html.motion-ready .interv-box.in .dd-fill, html.motion-ready .interv-box.in .rc-fill { opacity: 1; } }