/* ─────────────────────────────────────────────────────────────────
* DroidFleet — concept design system.
*
* The visual metaphor: a fleet of phones, alive, streaming data.
* Every effect maps to that idea:
* - dot grid = the fleet (devices laid out)
* - aurora gradient mesh = ambient compute light
* - heartbeat pulses = real-time activity
* - gradient borders = "lit edge" — physical-feeling cards
* - tilt screenshot = a real product, not a poster
*
* Authored as a single low-spec stylesheet so any landing or app
* page can opt-in by linking it. No JS framework, no external deps.
*
* Total weight target: <40KB. Honors prefers-reduced-motion.
* ───────────────────────────────────────────────────────────────── */
/* ── Type tokens ─────────────────────────────────────────────────── */
:root {
--c-ink: #0a0a0f;
--c-ink-2: #0d0d14;
--c-text: #e5e7eb;
--c-muted: #9ca3af;
--c-line: #1f2937;
--c-emerald: #22c55e;
--c-cyan: #22d3ee;
--c-violet: #a78bfa;
--c-indigo: #6366f1;
--grad-brand: linear-gradient(120deg, #a78bfa 0%, #22d3ee 50%, #34d399 100%);
}
/* Tighten headlines; balance wrapping; opt into stylistic ligatures
the Inter family ships (more visible "a", real italic "f", etc.). */
h1, h2, h3 {
letter-spacing: -0.028em;
text-wrap: balance;
font-feature-settings: "ss01" 1, "cv11" 1, "cv05" 1;
}
/* The single-word gradient highlight. Use as live
inside a headline — never on the whole sentence (saturates contrast). */
.grad {
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
/* Falling back to plain emerald in browsers that drop background-clip. */
-webkit-text-fill-color: transparent;
}
/* ── Backgrounds ─────────────────────────────────────────────────── */
/* Engineered dot-grid with a soft radial fade toward the focal point.
Apply on a wrapper that contains your hero. */
.bg-grid {
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 24px 24px;
-webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 35%, #000 35%, transparent 100%);
mask-image: radial-gradient(ellipse 60% 50% at 50% 35%, #000 35%, transparent 100%);
}
/* Aurora — two slow-drifting blurred gradient circles. Place absolutely
inside a position:relative container behind your content, with overflow
hidden on the parent (otherwise the blur escapes layout). */
.aurora {
position: absolute;
inset: -20%;
filter: blur(90px);
opacity: 0.5;
pointer-events: none;
z-index: 0;
}
.aurora::before,
.aurora::after {
content: "";
position: absolute;
width: 60vmax;
height: 60vmax;
border-radius: 50%;
background: radial-gradient(circle, var(--c-indigo) 0%, transparent 60%);
animation: aurora-drift 24s ease-in-out infinite alternate;
will-change: transform;
}
.aurora::after {
background: radial-gradient(circle, var(--c-cyan) 0%, transparent 60%);
animation-duration: 32s;
left: 40%;
top: 30%;
}
@keyframes aurora-drift {
0% { transform: translate3d(0, 0, 0) scale(1); }
100% { transform: translate3d(15%, -10%, 0) scale(1.15); }
}
/* Film-grain noise overlay — fixes banding on aurora gradients and adds
the tactile texture every premium dev-tool site ships in 2026. */
.noise {
position: fixed;
inset: 0;
pointer-events: none;
opacity: 0.035;
mix-blend-mode: overlay;
z-index: 1;
background-image: url("data:image/svg+xml;utf8,");
}
/* ── Cards ───────────────────────────────────────────────────────── */
/* Gradient-border via mask-composite. Single class, no wrapper needed.
The 1px "lit edge" reads as a physical surface under raking light. */
.card-glow {
position: relative;
border-radius: 16px;
background: rgba(20, 20, 28, 0.55);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
isolation: isolate; /* keep ::before from leaking through .lift shadows */
}
.card-glow::before {
content: "";
position: absolute;
inset: 0;
padding: 1px;
border-radius: inherit;
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.20) 0%,
rgba(255, 255, 255, 0.04) 35%,
rgba(99, 102, 241, 0.45) 100%
);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: -1;
}
/* Multi-step shadow that mimics real-world penumbras. The biggest
"premium vs. amateur" tell — a single box-shadow always reads flat. */
.lift {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.10),
0 4px 12px rgba(0, 0, 0, 0.12),
0 16px 40px rgba(0, 0, 0, 0.16),
0 40px 80px -20px rgba(99, 102, 241, 0.20);
transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
box-shadow 0.25s ease;
}
.lift:hover {
transform: translateY(-3px);
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 6px 18px rgba(0, 0, 0, 0.18),
0 24px 56px rgba(0, 0, 0, 0.22),
0 50px 96px -16px rgba(99, 102, 241, 0.32);
}
/* Cursor-tracked spotlight. Uses CSS custom properties set by concept.js
on pointermove — single delegated listener handles all .spotlight cards.
On touch the effect stays dormant (pointer: coarse media query). */
.spotlight {
position: relative;
overflow: hidden;
}
.spotlight::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
background: radial-gradient(
320px circle at var(--mx, 50%) var(--my, 50%),
rgba(99, 102, 241, 0.18),
transparent 60%
);
border-radius: inherit;
}
.spotlight:hover::after { opacity: 1; }
@media (pointer: coarse) {
.spotlight::after { display: none; }
}
/* ── Live activity — the signature DroidFleet effect ─────────────── */
/* A pulsing dot. Wrap one in any "online phone" indicator. The two
concentric ripples scale outward and fade — your brain reads this
as a heartbeat, not animation. */
.pulse-dot {
position: relative;
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--c-emerald);
box-shadow: 0 0 10px rgba(34, 197, 94, 0.6);
}
.pulse-dot::before,
.pulse-dot::after {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid var(--c-emerald);
animation: pulse-ring 1.8s cubic-bezier(0.2, 0.6, 0.4, 1) infinite;
}
.pulse-dot::after { animation-delay: 0.9s; }
@keyframes pulse-ring {
0% { transform: scale(1); opacity: 0.85; }
100% { transform: scale(2.8); opacity: 0; }
}
/* A monospace metadata strip. Stripe / Resend / Vercel all show one
somewhere near the hero — "build 2026.04 · 99.98% uptime". Free
"we are engineers" credibility. */
.meta-strip {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;
font-size: 11px;
color: rgba(229, 231, 235, 0.55);
letter-spacing: 0.02em;
text-transform: lowercase;
}
/* ── CTAs ────────────────────────────────────────────────────────── */
/* The magnetic CTA. Add `data-magnet` and concept.js will wire the
pointer translation. CSS handles the smoothing on leave. */
.cta-magnet {
transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
box-shadow 0.3s ease,
background 0.2s ease;
will-change: transform;
}
/* Primary "start free" / "pair device" — a glow pulse on the gradient
that communicates "this is the next step" without arrow-spam. */
.cta-primary {
background: linear-gradient(120deg, #16a34a 0%, #22c55e 50%, #06b6d4 100%);
background-size: 200% 100%;
animation: cta-shift 6s ease-in-out infinite;
box-shadow:
0 4px 18px rgba(34, 197, 94, 0.35),
inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.cta-primary:hover {
box-shadow:
0 6px 28px rgba(34, 197, 94, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
@keyframes cta-shift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* ── Scroll reveal ───────────────────────────────────────────────── */
/* Add `data-reveal` to any element. Children with `data-reveal-stagger`
get sequential delay — set CSS var --i on each child to control order. */
[data-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal].in {
opacity: 1;
transform: none;
}
/* ── 3D tilt on the hero product shot ────────────────────────────── */
.tilt {
transform-style: preserve-3d;
transition: transform 0.4s ease-out;
will-change: transform;
}
/* Soft inner border glow on container — like the device is glowing
from within. Pair with .lift on the same element. */
.screen-glow {
border-radius: 18px;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.06),
inset 0 0 60px rgba(34, 211, 238, 0.05);
}
/* ─────────────────────────────────────────────────────────────────
* Android-themed ambient layer.
*
* A site-wide fixed-position div holds 4 floating droid silhouettes,
* a slow vertical scan beam, and a few rising signal dots. Injected
* once by concept.js on DOMContentLoaded — no HTML changes needed.
*
* Total opacity stays under 6% across the whole layer so body copy
* remains the visual focus. Honors prefers-reduced-motion.
* ───────────────────────────────────────────────────────────────── */
.droid-ambient {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
/* The droid silhouettes — small SVG copies positioned at 4 corners
of the viewport. Very slow drift + gentle rotation give the page
peripheral motion without competing with content. */
.droid-ambient svg.droid {
position: absolute;
width: clamp(48px, 6vw, 96px);
height: auto;
opacity: 0.045;
filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.35));
animation: droid-drift 28s ease-in-out infinite alternate;
will-change: transform;
}
.droid-ambient svg.droid:nth-child(1) { top: 8%; left: 4%; animation-delay: 0s; }
.droid-ambient svg.droid:nth-child(2) { top: 18%; right: 6%; animation-delay: -7s; animation-duration: 34s; }
.droid-ambient svg.droid:nth-child(3) { bottom: 12%; left: 8%; animation-delay: -14s; animation-duration: 38s; }
.droid-ambient svg.droid:nth-child(4) { bottom: 22%; right: 4%; animation-delay: -21s; animation-duration: 30s; }
@keyframes droid-drift {
0% { transform: translate3d(0, 0, 0) rotate(-3deg); }
100% { transform: translate3d(20px, -16px, 0) rotate(3deg); }
}
/* Slow scanning beam — a thin horizontal gradient that travels top
to bottom over 14s. Reads as "the system is awake, sweeping." */
.droid-ambient .scan-beam {
position: absolute;
inset: 0;
pointer-events: none;
}
.droid-ambient .scan-beam::before {
content: "";
position: absolute;
left: 0;
right: 0;
height: 240px;
top: -240px;
background: linear-gradient(
180deg,
transparent 0%,
rgba(34, 197, 94, 0.025) 40%,
rgba(34, 197, 94, 0.05) 50%,
rgba(34, 197, 94, 0.025) 60%,
transparent 100%
);
animation: scan-sweep 14s linear infinite;
}
@keyframes scan-sweep {
0% { top: -240px; }
100% { top: 100vh; }
}
/* Signal particles — tiny rising dots representing data packets
from phones to server. CSS-only, 6 of them at staggered offsets. */
.droid-ambient .signal {
position: absolute;
bottom: -20px;
width: 3px;
height: 3px;
border-radius: 50%;
background: rgba(34, 211, 238, 0.55);
box-shadow: 0 0 6px rgba(34, 211, 238, 0.7);
animation: signal-rise 9s linear infinite;
opacity: 0;
}
.droid-ambient .signal:nth-child(2) { left: 12%; animation-delay: 0s; }
.droid-ambient .signal:nth-child(3) { left: 28%; animation-delay: -2s; }
.droid-ambient .signal:nth-child(4) { left: 47%; animation-delay: -4s; }
.droid-ambient .signal:nth-child(5) { left: 63%; animation-delay: -6s; }
.droid-ambient .signal:nth-child(6) { left: 81%; animation-delay: -1s; background: rgba(167, 139, 250, 0.55); box-shadow: 0 0 6px rgba(167, 139, 250, 0.7); }
.droid-ambient .signal:nth-child(7) { left: 92%; animation-delay: -5s; background: rgba(34, 197, 94, 0.55); box-shadow: 0 0 6px rgba(34, 197, 94, 0.7); }
@keyframes signal-rise {
0% { transform: translateY(0) scale(0.5); opacity: 0; }
10% { opacity: 0.9; }
90% { opacity: 0.4; }
100% { transform: translateY(-110vh) scale(1.2); opacity: 0; }
}
/* ─────────────────────────────────────────────────────────────────
* Custom cursor — droid scanner aesthetic.
*
* Two layers:
* #df-cursor-ring — a 30px ring, lerps smoothly toward the cursor
* #df-cursor-dot — a 6px solid dot, snaps 1:1 to cursor position
*
* On hovering interactive elements (a, button, [role=button],
* .spotlight, .cta-magnet) the ring scales up and gains a green
* glow — reads as "this is targetable" the way a viewfinder does.
*
* Hidden on touch (pointer: coarse) and reduced-motion users get
* native cursor back. The default cursor stays visible too — we
* don't `cursor: none` body, because that would break accessibility
* for users who rely on cursor visibility.
* ───────────────────────────────────────────────────────────────── */
/* The cursor reticle is built as 4 corner brackets + a center crosshair,
not a circle. Reads as "device scanner" — same visual language the
card decorations use. Two layers:
#df-cursor-ring — outer reticle frame (4 corners), lerps with trail
#df-cursor-dot — center crosshair + dot, snaps 1:1 to cursor
The corners gently rotate (8s loop) when idle; lock-in on hover. */
#df-cursor-ring,
#df-cursor-dot {
position: fixed;
top: 0;
left: 0;
pointer-events: none;
z-index: 9999;
will-change: transform;
}
#df-cursor-ring {
width: 36px;
height: 36px;
/* Translate set in JS for X/Y lerp; this transform is the rotation only,
written via CSS variable so JS can compose them without fighting. */
transform: translate3d(-50%, -50%, 0) rotate(var(--ring-rot, 0deg));
transition:
width 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
height 0.22s cubic-bezier(0.2, 0.7, 0.3, 1),
--ring-rot 0.4s ease;
animation: reticle-spin 12s linear infinite;
}
@property --ring-rot { syntax: ""; inherits: false; initial-value: 0deg; }
@keyframes reticle-spin {
to { transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}
/* Four corner brackets — rendered as 4 absolute child boxes via a single
conic-gradient mask. Cheaper than 4 separate elements + matches the
card-decor brackets visually. */
#df-cursor-ring::before,
#df-cursor-ring::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
border: 1.5px solid rgba(34, 197, 94, 0.7);
}
/* Top-left + bottom-right brackets */
#df-cursor-ring::before {
top: -1px; left: -1px;
border-right: none; border-bottom: none;
border-radius: 2px 0 0 0;
box-shadow:
calc(36px - 6px) calc(36px - 6px) 0 -1.5px rgba(34, 197, 94, 0.7),
inset 0 0 0 0 transparent;
}
/* Top-right + bottom-left brackets, achieved with a single offset trick.
Box-shadow lets us draw the second corner at the diagonal opposite. */
#df-cursor-ring::after {
top: -1px; right: -1px;
border-left: none; border-bottom: none;
border-radius: 0 2px 0 0;
box-shadow:
calc(-36px + 6px) calc(36px - 6px) 0 -1.5px rgba(34, 197, 94, 0.7);
}
#df-cursor-dot {
width: 18px;
height: 18px;
transform: translate3d(-50%, -50%, 0);
}
/* Center: a 4px dot wrapped in a tiny crosshair (4 ticks pointing inward).
Drawn with two SVG-style strokes via gradients to keep it 1 element. */
#df-cursor-dot::before,
#df-cursor-dot::after {
content: "";
position: absolute;
background: rgba(34, 197, 94, 0.55);
top: 50%; left: 50%;
border-radius: 1px;
}
/* Horizontal crosshair line with a gap in the middle for the dot. */
#df-cursor-dot::before {
width: 16px; height: 1px;
transform: translate(-50%, -50%);
background: linear-gradient(to right,
rgba(34, 197, 94, 0.55) 0,
rgba(34, 197, 94, 0.55) 5px,
transparent 5px,
transparent 11px,
rgba(34, 197, 94, 0.55) 11px,
rgba(34, 197, 94, 0.55) 16px);
}
/* Vertical crosshair (rotated horizontal). */
#df-cursor-dot::after {
width: 16px; height: 1px;
transform: translate(-50%, -50%) rotate(90deg);
background: linear-gradient(to right,
rgba(34, 197, 94, 0.55) 0,
rgba(34, 197, 94, 0.55) 5px,
transparent 5px,
transparent 11px,
rgba(34, 197, 94, 0.55) 11px,
rgba(34, 197, 94, 0.55) 16px);
}
/* Center dot itself, drawn as a third absolutely-positioned span via the
element's own background. The element has no box-shadow when idle so
only the crosshair shows; the solid dot appears on .df-active. */
#df-cursor-dot {
background: radial-gradient(circle 2.5px at 50% 50%, #22c55e 0, #22c55e 2px, transparent 2.5px);
filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.7));
}
/* Active state — applied by concept.js when the cursor is over an
interactive element. Ring grows + fills + glows brighter, and the
spinning animation pauses ("locked on target"). */
#df-cursor-ring.df-active {
width: 52px;
height: 52px;
animation-play-state: paused;
background: rgba(34, 197, 94, 0.08);
box-shadow:
0 0 20px rgba(34, 197, 94, 0.4),
inset 0 0 10px rgba(34, 197, 94, 0.15);
}
#df-cursor-ring.df-pressed {
width: 22px;
height: 22px;
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
#df-cursor-ring,
#df-cursor-dot { display: none !important; }
}
/* ─────────────────────────────────────────────────────────────────
* Card decorations — viewfinder corners + status LED.
*
* Add `data-decor` to any card to get the small green corner brackets
* top-right + bottom-left, plus a tiny pulsing LED in the top-left.
* Reads as "this card is a device readout / scanner panel."
*
* Pure CSS via ::before / ::after on a wrapper inserted by JS so
* existing card-glow ::before (the gradient border) isn't displaced.
* ───────────────────────────────────────────────────────────────── */
[data-decor] { position: relative; }
[data-decor] > .df-decor {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: inherit;
overflow: hidden;
}
/* Top-right viewfinder bracket. */
[data-decor] > .df-decor::before {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 14px;
height: 14px;
border-top: 1.5px solid rgba(34, 197, 94, 0.55);
border-right: 1.5px solid rgba(34, 197, 94, 0.55);
border-radius: 2px 4px 0 0;
opacity: 0.7;
}
/* Bottom-left viewfinder bracket. */
[data-decor] > .df-decor::after {
content: "";
position: absolute;
bottom: 8px;
left: 8px;
width: 14px;
height: 14px;
border-bottom: 1.5px solid rgba(34, 211, 238, 0.45);
border-left: 1.5px solid rgba(34, 211, 238, 0.45);
border-radius: 0 0 0 4px;
opacity: 0.7;
}
/* Status LED — pulses softly, top-left corner. */
[data-decor] > .df-led {
position: absolute;
top: 10px;
left: 10px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px rgba(34, 197, 94, 0.7);
animation: led-blink 2.4s ease-in-out infinite;
pointer-events: none;
}
@keyframes led-blink {
0%, 100% { opacity: 0.55; transform: scale(1); }
50% { opacity: 1; transform: scale(1.2); }
}
/* ─────────────────────────────────────────────────────────────────
* Scan-line hover effect for cards (.spotlight + .scan-on-hover)
*
* A 1px emerald gradient line sweeps top→bottom inside the card the
* first ~600ms after pointer-enter. Reads as "system reading this
* panel." Light, ~60fps, GPU-accelerated transform only.
* ───────────────────────────────────────────────────────────────── */
.scan-on-hover { position: relative; overflow: hidden; }
.scan-on-hover::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -2px;
height: 2px;
background: linear-gradient(
to bottom,
transparent,
rgba(34, 197, 94, 0.6),
transparent);
transform: translateY(-100%);
pointer-events: none;
border-radius: inherit;
z-index: 1;
}
.scan-on-hover:hover::before { animation: scan-card 0.65s ease-out; }
@keyframes scan-card {
0% { transform: translateY(-4px); opacity: 0; }
20% { opacity: 1; }
100% { transform: translateY(calc(var(--scan-h, 320px) - 4px)); opacity: 0; }
}
/* ─────────────────────────────────────────────────────────────────
* Click ripple — emerald scan pulse
*
* Single span injected by concept-v4.js at click coordinates inside
* any [data-magnet] or .cta-primary. Expands 0→160px, fades out, then
* removes itself. ~12 lines of JS, no listeners stuck around.
* ───────────────────────────────────────────────────────────────── */
.df-ripple {
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(34, 197, 94, 0.45);
pointer-events: none;
transform: translate(-50%, -50%) scale(0);
animation: df-ripple-out 0.55s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
mix-blend-mode: screen;
z-index: 2;
}
@keyframes df-ripple-out {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0.65; }
100% { transform: translate(-50%, -50%) scale(14); opacity: 0; }
}
/* ─────────────────────────────────────────────────────────────────
* Tiny droid corner badge — adds a 12px droid head silhouette to the
* top-right of any card with [data-droid-badge]. Pulses once on
* card-hover. Tiny enough to feel like a watermark, not a decoration.
* ───────────────────────────────────────────────────────────────── */
[data-droid-badge] { position: relative; }
[data-droid-badge]::before {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 14px;
height: 14px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
opacity: 0.4;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 2;
}
[data-droid-badge]:hover::before {
opacity: 0.85;
transform: scale(1.15);
}
/* ─────────────────────────────────────────────────────────────────
* Boot animation for primary CTAs
*
* On click the cta-primary briefly flashes a "BOOT…" label sliding
* in from the right, then back. Adds personality without delaying
* the actual action (the button's onclick still fires immediately).
* ───────────────────────────────────────────────────────────────── */
.cta-primary {
position: relative;
overflow: hidden;
}
.cta-primary.df-boot::after {
content: "▸ booting";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.85);
color: #86efac;
font-family: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;
font-size: 12px;
letter-spacing: 0.05em;
animation: cta-boot 0.9s ease-out forwards;
}
@keyframes cta-boot {
0% { opacity: 0; transform: translateX(40%); }
20% { opacity: 1; transform: translateX(0); }
80% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(-40%); }
}
/* ── Reduced motion: kill all ambient animation, keep transitions ─ */
@media (prefers-reduced-motion: reduce) {
.aurora::before,
.aurora::after,
.pulse-dot::before,
.pulse-dot::after,
.cta-primary,
.droid-ambient svg.droid,
.droid-ambient .scan-beam::before,
.droid-ambient .signal,
[data-decor] > .df-led {
animation: none !important;
}
[data-reveal] {
opacity: 1 !important;
transform: none !important;
}
.tilt {
transform: none !important;
}
}