/* Motion graphics — landing page. Loaded only on the landing layout. All motion uses transform/opacity (compositor-friendly) and honours prefers-reduced-motion via the global override in main.css plus explicit guards below. */ /* Chord: the one easing the whole page moves on. Arrives fast, settles slowly — no bounce, no wobble. */ :root { --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.3, 1.38, 0.5, 1); } @keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ── Hero entrance choreography ───────────────────────────── Copy rises in beats of 90ms; the chart frame lifts last and hands over to the curve draw. `backwards` fill keeps the pre-animation state applied during each delay. */ .hero .eyebrow { animation: rise-in 0.6s var(--ease-out-soft) 0.05s backwards; } .hero .hero-title { animation: rise-in 0.7s var(--ease-out-soft) 0.14s backwards; } .hero .hero-sub { animation: rise-in 0.7s var(--ease-out-soft) 0.23s backwards; } .hero .hero-actions { animation: rise-in 0.7s var(--ease-out-soft) 0.32s backwards; } .hero .hero-chart .chart-frame { animation: rise-in 0.8s var(--ease-out-soft) 0.45s backwards; } /* ── Chart draw-on ────────────────────────────────────────── The frame assembles (grid, axes), the price curve sweeps left to right, amber bars pop as the curve tip passes their hour, the area and the peak label settle behind it. */ .hero .chart-grid, .hero .chart-axis { animation: fade-in 0.6s ease 0.55s backwards; } .hero .chart-curve { stroke-dasharray: 1; stroke-dashoffset: 0; animation: curve-draw 1.1s cubic-bezier(0.45, 0.05, 0.35, 1) 0.6s backwards; } /* Draws from fully hidden to the resting state (offset 0). The hidden value lives only in `from`, so when the animation ends the line is exactly the static SVG — no snap-back (Firefox renders that snap). */ @keyframes curve-draw { from { stroke-dashoffset: 1.001; opacity: 0; } 1% { opacity: 1; } to { stroke-dashoffset: 0; } } .hero .chart-bars rect { transform-box: fill-box; transform-origin: 50% 100%; animation: bar-grow 0.5s var(--ease-spring) backwards, ember-breathe 7s ease-in-out infinite; animation-delay: var(--grow-delay, 0s), calc(2.6s + var(--ember-i, 0) * 0.35s); } /* Delays put each bar's pop where the curve tip passes its hour: the curve runs 0.6s–1.7s across x = 44…536. --ember-i spaces the breathing wave one bar at a time, left to right. */ .hero .chart-bars rect:nth-child(1) { --grow-delay: 0.70s; --ember-i: 0; } .hero .chart-bars rect:nth-child(2) { --grow-delay: 0.75s; --ember-i: 1; } .hero .chart-bars rect:nth-child(3) { --grow-delay: 0.80s; --ember-i: 2; } .hero .chart-bars rect:nth-child(4) { --grow-delay: 0.85s; --ember-i: 3; } .hero .chart-bars rect:nth-child(5) { --grow-delay: 1.20s; --ember-i: 4; } .hero .chart-bars rect:nth-child(6) { --grow-delay: 1.25s; --ember-i: 5; } .hero .chart-bars rect:nth-child(7) { --grow-delay: 1.30s; --ember-i: 6; } .hero .chart-bars rect:nth-child(8) { --grow-delay: 1.70s; --ember-i: 7; } @keyframes bar-grow { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } } /* One soft dim travels through the heater bars, once every 7s. */ @keyframes ember-breathe { 0%, 12%, 100% { opacity: 1; } 6% { opacity: 0.78; } } .hero .chart-area { animation: fade-in 0.6s ease 1.35s backwards; } .hero .chart-peak { animation: rise-in 0.5s var(--ease-out-soft) 1.6s backwards; } .hero .chart-caption { animation: fade-in 0.7s ease 1.9s backwards; } /* ── Scroll reveals ───────────────────────────────────────── Hidden state exists only once motion.js tags with `motion-js`, so content is never blank without JavaScript. motion.js moves revealed elements to `reveal-done`, which hands transitions back to hover styles. */ html.motion-js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out-soft), transform 0.7s var(--ease-out-soft); transition-delay: var(--reveal-delay, 0ms); } html.motion-js .reveal.in-view { opacity: 1; transform: translateY(0); } html.motion-js .reveal.reveal-done { transition: none; transition-delay: 0ms; } /* ── Card micro-interaction ───────────────────────────────── Cards here are not links, so no lift: the border warms and a soft shadow gathers instead. */ .steps li, .need li { transition: border-color 0.25s ease, box-shadow 0.25s ease; } .steps li:hover, .need li:hover { border-color: var(--heat-soft); box-shadow: 0 14px 34px -22px rgba(15, 27, 42, 0.45); } .steps li:hover .step-no { border-color: var(--heat); background: rgba(242, 163, 60, 0.16); } .steps .step-no { transition: border-color 0.25s ease, background-color 0.25s ease; } /* ── Ambient hero glow ────────────────────────────────────── A faint ember drifts through the night sky over ~26s. At the edge of perception; you notice it more when it stops. */ .hero { position: relative; } .hero::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(600px 320px at 30% 40%, rgba(242, 163, 60, 0.07), transparent 65%); animation: glow-drift 26s ease-in-out infinite alternate; pointer-events: none; } .hero > .wrapper { position: relative; } @keyframes glow-drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.08); } } /* ── Reduced motion: land on the final frame immediately ──── */ @media (prefers-reduced-motion: reduce) { .hero .eyebrow, .hero .hero-title, .hero .hero-sub, .hero .hero-actions, .hero .hero-chart .chart-frame, .hero .chart-grid, .hero .chart-axis, .hero .chart-curve, .hero .chart-bars rect, .hero .chart-area, .hero .chart-peak, .hero .chart-caption { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; } html.motion-js .reveal { opacity: 1; transform: none; transition: none; } .hero::before { animation: none; } .hero .chart-bars rect { animation: none; } }