/* ============================================================================
mk-fx.css — motion and depth primitives for the marketing surface
----------------------------------------------------------------------------
Vanilla ports of the four techniques the 21st.dev / Magic UI / Aceternity
templates are built on. No framework. Scoped under .snr-mk. Every animation
is gated by prefers-reduced-motion at the bottom of this file.
1 Animated beam .mk-beam (SVG path that draws in, then carries a light)
2 Border beam .mk-border-beam (a light travelling a card's border)
3 Dots .mk-dots (background texture). The .mk-grid variant
that sat here was removed: 0 markup and 0 JS
references, i.e. it never shipped.
4 Aurora .mk-aurora (CSS-only gradient mesh, the "shader" feel)
5 Spotlight .mk-spot (radial hover highlight on light cards)
Load after senera-marketing.css. Pair with mk-fx.js for 1 and 5.
========================================================================= */
/* ── 1. Animated beam ───────────────────────────────────────────────────── */
/* Markup produced by mkBeam() in mk-fx.js:
The svg is absolutely positioned over the .mk-fig and sized to it. */
.snr-mk .mk-beam { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.snr-mk .mk-beam path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.snr-mk .mk-beam-track { stroke: var(--mk-on-3); stroke-opacity: .45; stroke-width: 1.5; }
.snr-mk .mk-beam-draw {
stroke: var(--mk-teal-br); stroke-width: 1.5;
stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len);
transition: stroke-dashoffset .9s var(--mk-ease);
}
.snr-mk .is-in .mk-beam-draw, .snr-mk .mk-beam.is-in .mk-beam-draw { stroke-dashoffset: 0; }
.snr-mk .mk-beam-light {
stroke: #fff; stroke-width: 2; stroke-opacity: 0;
stroke-dasharray: 40 calc(var(--len) + 40); stroke-dashoffset: 40;
filter: drop-shadow(0 0 6px var(--mk-teal-br)) drop-shadow(0 0 2px #fff);
}
.snr-mk .is-in .mk-beam-light, .snr-mk .mk-beam.is-in .mk-beam-light {
animation: mk-beam-travel 3s cubic-bezier(.4,0,.2,1) 1s infinite;
}
@keyframes mk-beam-travel {
0% { stroke-dashoffset: 40; stroke-opacity: 0; }
8% { stroke-opacity: .95; }
70% { stroke-opacity: .95; }
80%, 100% { stroke-dashoffset: calc(-1 * var(--len)); stroke-opacity: 0; }
}
/* arrowhead: a marker the JS attaches to the track's end */
.snr-mk .mk-beam-head { fill: var(--mk-teal-br); }
/* ── 2. Border beam ─────────────────────────────────────────────────────── */
/* Add .mk-border-beam to any rounded element with position:relative.
A 1px ring is masked out of a rotating conic gradient. */
@property --mk-angle { syntax: ''; inherits: false; initial-value: 0deg; }
.snr-mk .mk-border-beam { position: relative; isolation: isolate; }
.snr-mk .mk-border-beam::after {
content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; z-index: 2;
padding: 1px;
background: conic-gradient(from var(--mk-angle), transparent 0 72%, var(--mk-teal-br) 86%, #fff 90%, transparent 100%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
animation: mk-border-spin 6s linear infinite;
}
@keyframes mk-border-spin { to { --mk-angle: 360deg; } }
/* ── 3. Dot and grid textures ───────────────────────────────────────────── */
/* Sit these on .mk-frost / .mk-fig backgrounds at low opacity. */
.snr-mk .mk-dots {
background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.2px);
background-size: 22px 22px;
background-position: 11px 11px;
}
/* A standalone divider band. .mk-dots was in this selector list by accident —
almost certainly a paste, since the "hatch divider band" comment sits on the
.mk-dots line — and it is the single cause of every broken figure on this
site. .mk-dots is a TEXTURE applied to panels that hold content; this rule
pinned every one of them to height:40px and repainted them with diagonal
hatching. That produced, on ten pages at once:
· wrappers 40-66px tall holding 334-751px of content
· the content rendering OUTSIDE its own panel, sliced by the section's
overflow:hidden
· the "empty hatched bar" visible where a populated panel should be
· figure captions printing through the cards they belong to
Removing .mk-dots here restores it to what it was written to be, two rules
above: a dot texture, no geometry. */
.snr-mk .mk-hatch {
height: 40px; border-top: 1px solid var(--mk-rule-n); border-bottom: 1px solid var(--mk-rule-n);
background: repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7px);
}
/* ── 4. Aurora ──────────────────────────────────────────────────────────── */
/* CSS-only gradient mesh. Two heroes per site maximum (DESIGN-LANGUAGE §9). */
.snr-mk .mk-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.snr-mk .mk-aurora::before, .snr-mk .mk-aurora::after {
content: ""; position: absolute; inset: -30%;
background:
radial-gradient(40% 55% at 30% 40%, rgba(25,169,146,.28), transparent 70%),
radial-gradient(35% 50% at 70% 60%, rgba(14,125,108,.22), transparent 70%),
radial-gradient(30% 40% at 55% 25%, rgba(94,150,188,.16), transparent 70%);
filter: blur(60px) saturate(130%);
animation: mk-aurora-drift 26s ease-in-out infinite alternate;
will-change: transform;
}
.snr-mk .mk-aurora::after {
background:
radial-gradient(45% 45% at 65% 35%, rgba(25,169,146,.18), transparent 70%),
radial-gradient(35% 55% at 25% 70%, rgba(11,18,23,.0), transparent 70%);
animation-duration: 34s; animation-direction: alternate-reverse;
}
@keyframes mk-aurora-drift {
0% { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
50% { transform: translate3d( 3%, 4%, 0) rotate(6deg) scale(1.08); }
100% { transform: translate3d(-2%, 5%, 0) rotate(-4deg) scale(1.03); }
}
/* grain on top keeps it from looking like a gradient tool default */
.snr-mk .mk-aurora-grain { position: absolute; inset: 0; background: var(--mk-grain); opacity: .5; mix-blend-mode: overlay; pointer-events: none; z-index: 0; }
/* ── 5. Spotlight (light-band cards) ────────────────────────────────────── */
.snr-mk .mk-spot { position: relative; overflow: hidden; }
.snr-mk .mk-spot::before {
content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
color-mix(in srgb, var(--pn-accent, #0e7d6c) 14%, transparent), transparent 60%);
}
.snr-mk .mk-spot:hover::before { opacity: 1; }
/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.snr-mk .mk-beam-draw { transition: none; stroke-dashoffset: 0; }
.snr-mk .mk-beam-light, .snr-mk .mk-border-beam::after, .snr-mk .mk-aurora::before, .snr-mk .mk-aurora::after { animation: none; }
.snr-mk .mk-beam-light { stroke-opacity: 0; }
}