/* ============================================================================ * Syna Motion — Core Stylesheet (framework-free) * ============================================================================ * The agnostic CSS surface for the suite. Works in PHP/Bootstrap sites, the * Unity→React Bridge-HUD, plain HTML, and React alike — no framework required. * Pair with core/runtime.ts (the vanilla scanner that wires pointer/scroll * variables and toggles reveal state). * * Class contract: every effect's class is `syna-fx-` (asserted by * scripts/validate-manifest.mjs). Per-effect tunables are CSS custom properties * (the `cssVar` field in the registry); set them inline or via runtime. * * Token dependency: reads --motion-* / --ease-* (see tokens/motion-tokens.ts; * call applyMotionTokens() if your app doesn't already define them). Falls back * to sensible literals so the stylesheet is usable standalone. * * Absorbs (now the SSOT for): www-theme-kit _sparkle-effects / _scroll-reveal / * _card-hover / _animated-gradient-bg / _spotlight-follow, and * syna-theme-kit effects/spotlight.css. * ============================================================================ */ /* Timing tokens are NOT redeclared on effect elements. A declaration such as * `--motion-slow: var(--motion-slow, 400ms)` is a self-reference cycle: CSS makes * the property guaranteed-invalid on that element AND every descendant, so any * host rule reading it without a fallback silently computes to `none`. Every * rule below reads the tokens with a literal fallback instead, and inherits a * host's --motion-* / --ease-* values when the host defines them. * Guarded by test/css-contract.test.ts. */ /* ── Tier 1: Physics ───────────────────────────────────────────────────────*/ .syna-fx-spring-in { /* backwards, not both: the last keyframe equals the element's own style, and a `both` fill would pin transform after the entrance, disabling hover/press. */ animation: syna-spring-in var(--motion-slow, 400ms) var(--ease-emphasized, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards; } @keyframes syna-spring-in { 0% { opacity: 0; transform: scale(0.92) translateY(8px); } 60% { opacity: 1; transform: scale(1.02) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } /* `stagger` is an orchestration modifier: runtime sets --fx-i (child index) and * --fx-stagger (ms step); we offset animation-delay by their product. */ .syna-fx-stagger > * { animation-delay: calc(var(--fx-i, 0) * var(--fx-stagger, 80ms)); } /* spring-in + stagger: the entrance must play on each indexed CHILD, not the * parent — animating the parent moves the whole group as one block and no * stagger is visible. The per-child delay lives inside the shorthand (second * time value) because a shorthand would otherwise reset animation-delay. */ .syna-fx-stagger.syna-fx-spring-in { animation: none; } .syna-fx-stagger.syna-fx-spring-in > * { animation: syna-spring-in var(--motion-slow, 400ms) var(--ease-emphasized, cubic-bezier(0.34, 1.56, 0.64, 1)) calc(var(--fx-i, 0) * var(--fx-stagger, 80ms)) backwards; } /* ── Tier 2: Cursor & ambient ──────────────────────────────────────────────*/ /* --mx/--my registered as typed so they INTERPOLATE — the spotlight then eases toward the cursor (smooth follow) instead of snapping to each pointer sample. --spot-prox drives the fade (0 far → 1 near) and also interpolates so a card lights/dims smoothly as the cursor sweeps the row. Guarded in @supports so browsers without @property still get an instant (but working) follow. */ @supports (background: paint(x)) { @property --mx { syntax: ''; inherits: true; initial-value: 50%; } @property --my { syntax: ''; inherits: true; initial-value: 50%; } @property --spot-prox { syntax: ''; inherits: true; initial-value: 0; } } /* Spotlight — a PERIMETER EDGE-LIGHT. A bright glow rides the card's border nearest the cursor and spills ADDITIVELY onto the surface and into the gutter between cards. The runtime writes --mx/--my (cursor position relative to THIS card — may fall outside 0–100% when the cursor is in the gutter/over a sibling, which is what pulls the light toward that edge) and --spot-prox (0 far → 1 near) so a shared row of cards hands the light off card-to-card as the cursor travels. Colored by the active --accent-* palette. Three additive layers, all mix-blend-mode:screen (light ADDS, never darkens): ::before the bright edge line — a radial at (mx,my) masked to the border band, so only the perimeter lights and it's hottest nearest the cursor. Plus a hot near-white core at the closest point. ::after the SPILL — a big blurred colored radial that bleeds off the edge onto the dark surface + into the gutter (the reference bloom). */ .syna-fx-spotlight { position: relative; isolation: isolate; --spotlight-size: 460px; /* spill radius */ --spotlight-edge: 190px; /* edge-light reach along the border */ --spotlight-intensity: 1; /* master multiplier for the glow */ --spotlight-color: var(--accent-cyan, #4de8ff); /* screen ADDS light, which vanishes on a near-white surface. Light themes set `normal` so the edge-light reads as a colored rim instead. */ --spotlight-blend: screen; --spot-prox: 0; --mx: 50%; --my: 50%; } /* Edge line — bright accent along the border nearest the cursor, hottest at the closest point (a near-white core), masked to the border band so the interior stays clear. */ .syna-fx-spotlight::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: var(--spot-prox, 0); transition: opacity var(--motion-normal, 300ms) var(--ease-standard, ease); mix-blend-mode: var(--spotlight-blend, screen); padding: 2px; /* border band thickness for the xor mask */ background: /* hot near-white core — tight + bright so the lit border reads as a crisp stroke right at the closest point on the edge */ radial-gradient(calc(var(--spotlight-edge) * 0.32) circle at var(--mx) var(--my), #ffffff 0%, color-mix(in srgb, #fff 88%, var(--spotlight-color)) 18%, color-mix(in srgb, var(--spotlight-color) 82%, transparent) 42%, transparent 72%), /* wider saturated accent wash along the border */ radial-gradient(var(--spotlight-edge) circle at var(--mx) var(--my), color-mix(in srgb, var(--spotlight-color) calc(100% * var(--spotlight-intensity)), transparent) 0%, color-mix(in srgb, var(--spotlight-color) calc(55% * var(--spotlight-intensity)), transparent) 40%, transparent 78%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; } /* Spill — the big blurred colored bloom that bleeds off the edge onto the surface and into the gutter. Overflows the card (no clip) so it fills the gap between siblings; additive so overlapping spills from two cards sum. */ .syna-fx-spotlight::after { content: ''; position: absolute; inset: -40%; /* extend past the card so spill reaches the gutter */ border-radius: inherit; pointer-events: none; z-index: 0; opacity: calc(var(--spot-prox, 0) * 0.9); transition: opacity var(--motion-normal, 300ms) var(--ease-standard, ease); mix-blend-mode: var(--spotlight-blend, screen); background: radial-gradient(var(--spotlight-size) circle at var(--mx) var(--my), color-mix(in srgb, var(--spotlight-color) calc(60% * var(--spotlight-intensity)), transparent) 0%, color-mix(in srgb, var(--spotlight-color) calc(26% * var(--spotlight-intensity)), transparent) 32%, transparent 60%); filter: blur(16px); } .syna-fx-spotlight > * { position: relative; z-index: 1; } /* Spotlight group — the shared-light container. Its children (the .syna-fx- spotlight cards) are tracked from ONE pointer listener at the group, so the light travels across the whole row and through the gutters as one sweep. The group establishes stacking + lets sibling spills overlap additively. */ .syna-fx-spotlight-group { position: relative; isolation: isolate; } /* Cards inside a group must let their spill overflow into the gutter. */ .syna-fx-spotlight-group .syna-fx-spotlight { overflow: visible; } /* 3D tilt — the runtime drives it with a SPRING (rAF-integrated), writing the settled --rx/--ry each frame, so the surface has weight: it accelerates toward the cursor, overshoots slightly, and settles. No CSS transition on transform (the spring already smooths it; a transition would double-smooth into lag). */ .syna-fx-tilt-3d { --fx-tilt-max: 12; position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; will-change: transform; } /* PBR specular highlight — a physically-based Blinn-Phong lobe, NOT a soft reflection blotch. The runtime computes the half-vector between the fixed key light and the view direction against the tilted surface normal and writes: --spec-x / --spec-y the lobe center (where N·H peaks on the surface) --spec-i lobe intensity = (N·H)^shininess (tight, hard) --fresnel Schlick rim term = F0 + (1-F0)(1-N·V)^5 (edge glint) The lobe is a SMALL, high-exponent radial (tight falloff = high shininess); Fresnel adds a thin grazing-edge brighten. Reads as polished coated plastic, not a smeared gradient. */ .syna-fx-tilt-3d::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity var(--motion-normal, 300ms) var(--ease-standard, ease); mix-blend-mode: screen; background: /* Specular lobe — tight (11% radius) with a hard core→transparent ramp so the highlight reads as a crisp glint that slides with the surface, not a soft blob. */ radial-gradient(11% 14% at var(--spec-x, 50%) var(--spec-y, 40%), rgba(255, 255, 255, calc(0.95 * var(--spec-i, 0))) 0%, rgba(255, 255, 255, calc(0.28 * var(--spec-i, 0))) 40%, transparent 66%), /* Fresnel edge — a thin bright rim that intensifies at grazing view angles (a coated-surface hallmark), masked to the border band. */ linear-gradient(var(--fresnel-angle, 145deg), rgba(214, 232, 255, calc(0.5 * var(--fresnel, 0))) 0%, transparent 18%); } .syna-fx-tilt-3d:hover::after { opacity: 1; } /* Magnetic — runtime sets --tx/--ty px pull. */ .syna-fx-magnetic { --fx-magnetic-strength: 0.3; transform: translate(var(--tx, 0px), var(--ty, 0px)); transition: transform var(--motion-normal, 300ms) var(--ease-emphasized, ease); will-change: transform; } /* Rim glow — a pixel-thin rim light with bloom that orbits the element border, tracking the pointer angle from the element center (runtime sets --fx-rim-angle / --fx-rim-prox). The ring is a conic-gradient arc masked to the border band (xor mask); ::after is the same arc blurred = the bloom. */ .syna-fx-rim-glow { position: relative; --fx-rim-color: var(--accent-cyan, #4de8ff); --fx-rim-width: 2px; } .syna-fx-rim-glow::before, .syna-fx-rim-glow::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; padding: var(--fx-rim-width, 2px); background: conic-gradient(from calc(var(--fx-rim-angle, 0deg) - 35deg), transparent 0deg, color-mix(in srgb, var(--fx-rim-color) 85%, transparent) 25deg, #fff 35deg, color-mix(in srgb, var(--fx-rim-color) 85%, transparent) 45deg, transparent 70deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: var(--fx-rim-prox, 0.6); transition: opacity var(--motion-fast, 150ms) linear; } /* Bloom — the same rim arc, fattened and blurred, layered under the crisp rim so the light spills outward (a hint of bloom). A second, wider+softer pass (::after has its own duplicate via the ::before/::after share) reads as the halo; the drop-shadow adds the colored spill beyond the border. */ .syna-fx-rim-glow::after { padding: calc(var(--fx-rim-width, 2px) * 3.2); filter: blur(9px) drop-shadow(0 0 6px color-mix(in srgb, var(--fx-rim-color) 70%, transparent)); opacity: calc(var(--fx-rim-prox, 0.6) * 0.85); } /* Cursor ripple — runtime appends a span.syna-ripple at click point AND fires a true screen-space displacement wave (core/waterRipple.ts: an SVG feDisplacementMap ring warps the element's actual pixels outward like a tap on water). The span is the specular crest: a thin ring with bloom, not a filled 2D disc. */ .syna-fx-cursor-ripple { position: relative; overflow: hidden; --fx-ripple-color: currentColor; } .syna-fx-cursor-ripple .syna-ripple { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, transparent 52%, color-mix(in srgb, #fff 40%, transparent) 66%, color-mix(in srgb, var(--fx-ripple-color, currentColor) 35%, transparent) 74%, transparent 82%); filter: drop-shadow(0 0 8px color-mix(in srgb, var(--fx-ripple-color, currentColor) 55%, transparent)); animation: syna-ripple 700ms var(--ease-decelerate, cubic-bezier(0, 0, 0.2, 1)) forwards; } @keyframes syna-ripple { to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } } /* Particle burst — a confetti blast (React surface; keyframes live here so the sprite-sheet twirl + two-stage ballistics are GPU-composited, not JS-ticked). The React component sizes/colors/masks each piece and sets the per-piece vars (--bx/--by blast vector, --fall gravity depth, --sway flutter, --frame-* the sprite-sheet walk); these three tracks drive them. Outer element = ballistics + fade; inner element = flutter + sprite twirl (kept apart so no two tracks fight over `transform`). */ @keyframes syna-confetti-fly { 0% { transform: translate3d(0, 0, 0); } /* Explosive outward impulse — reaches the blast apex fast (eased-out). */ 32% { transform: translate3d(var(--bx, 0), var(--by, 0), 0); } /* Gravity takes over: continue the horizontal drift a little further while falling --fall px past the apex (the rain-down). */ 100% { transform: translate3d(calc(var(--bx, 0) * 1.25), calc(var(--by, 0) + var(--fall, 160px)), 0); } } /* Flutter — the paper-in-air horizontal wobble (inner element). alternate + phase desync (per-piece delay) so the cloud shimmers, not sways as a block. */ @keyframes syna-confetti-sway { from { transform: translateX(var(--sway-neg, -20px)); } to { transform: translateX(var(--sway, 20px)); } } /* Sprite-sheet twirl — steps() walk across the 8-frame confetti sheet's mask-position, so the flip is crisp frame-by-frame like an engine flipbook, not a smoothly-interpolated rotate. */ @keyframes syna-confetti-twirl { from { -webkit-mask-position: var(--frame-start, 0%) 0; mask-position: var(--frame-start, 0%) 0; } to { -webkit-mask-position: var(--frame-end, -100%) 0; mask-position: var(--frame-end, -100%) 0; } } /* Fade — hold full opacity through the blast, fade during the fall. */ @keyframes syna-confetti-fade { 0%, 55% { opacity: 1; } 100% { opacity: 0; } } /* Toggle — a themed on/off switch whose knob squash-and-stretches as it crosses the track. React drives the squash via motion v12 keyframes; the vanilla runtime toggles data-checked and this CSS runs the squash keyframe + slides the knob. The knob is a glossy 3D accent orb (radial sphere + top specular + inner shadow); the track fills accent when ON, neutral when OFF. Geometry is PARAMETRIC: the knob diameter and travel derive from the track box, so the knob always conforms exactly to the capsule — resize by overriding --fx-toggle-width/height/pad and everything follows. Capsule identity: knob = inner height ⇒ travel = inner width − knob = width − height. */ .syna-fx-toggle { --fx-toggle-accent: var(--accent-cyan, #4de8ff); --fx-toggle-width: 60px; --fx-toggle-height: 28px; --fx-toggle-pad: 3px; /* gap between knob and capsule wall */ --fx-toggle-border: 1px; /* 28 − 2×(3+1) = 20px knob; 60 − 28 = 32px travel (defaults). */ --fx-toggle-knob: calc(var(--fx-toggle-height) - 2 * (var(--fx-toggle-pad) + var(--fx-toggle-border))); --fx-toggle-travel: calc(var(--fx-toggle-width) - var(--fx-toggle-height)); display: inline-flex; align-items: center; gap: 0.75rem; cursor: pointer; user-select: none; /* Reset so a bare