/*
  Factory motion kit v2: light, dependency-free effects for preview sites. See README.md.
  Brand colors: --m-a, --m-b, --m-c (official colors or tints). Defaults are neutral.
  Every effect is decorative: content stays visible without JavaScript and with reduced motion.
*/

/* ---------- 1. Reveal on scroll (hidden only once motion.js marks the page with .m-js) ---------- */
.m-js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--m-reveal-shift, 24px));
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.7s ease, clip-path 0.9s cubic-bezier(0.7, 0, 0.2, 1);
  transition-delay: var(--m-delay, 0s);
}
.m-js [data-reveal="left"] { transform: translateX(calc(-1 * var(--m-reveal-shift, 24px))); }
.m-js [data-reveal="right"] { transform: translateX(var(--m-reveal-shift, 24px)); }
.m-js [data-reveal="scale"] { transform: scale(0.94); }
.m-js [data-reveal="blur"] { transform: none; filter: blur(12px); }
.m-js [data-reveal="rise"] { transform: translateY(80px); }
.m-js [data-reveal="tilt"] { transform: perspective(800px) rotateX(18deg) translateY(30px); transform-origin: 50% 100%; }
.m-js [data-reveal="wipe"] { transform: none; opacity: 1; clip-path: inset(0 100% 0 0); }
.m-js [data-reveal].m-in { opacity: 1; transform: none; filter: none; clip-path: inset(0 0 0 0); }

/* ---------- 2. Split headline: words (default) or letters rise in sequence ---------- */
.m-split-part { display: inline-block; white-space: pre; }
.m-js [data-split] .m-split-part {
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--m-i, 0) * var(--m-step, 70ms));
}
.m-js [data-split="letters"] .m-split-part { --m-step: 28ms; }
.m-js [data-split="fade"] .m-split-part { transform: none; }
.m-js [data-split].m-in .m-split-part { opacity: 1; transform: none; }

/* ---------- 3. Count up: handled in motion.js (prefix and suffix via data attributes) ---------- */

/* ---------- 4. Drifting pattern: slowly moves a background pattern ---------- */
.m-drift { background-repeat: repeat; animation: m-drift var(--m-drift-time, 60s) linear infinite; }
.m-drift--horizontal { --m-drift-y: 0px; }
.m-drift--vertical { --m-drift-x: 0px; }
.m-drift--reverse { animation-direction: reverse; }
@keyframes m-drift { to { background-position: var(--m-drift-x, 240px) var(--m-drift-y, 120px); } }

/* ---------- 5. Aurora: soft moving color fields ---------- */
.m-aurora { position: relative; isolation: isolate; overflow: hidden; }
.m-aurora::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background:
    radial-gradient(40% 35% at 25% 30%, var(--m-a, #d9d9d9) 0%, transparent 70%),
    radial-gradient(35% 40% at 75% 60%, var(--m-b, #bfbfbf) 0%, transparent 70%),
    radial-gradient(30% 30% at 50% 85%, var(--m-c, #e6e6e6) 0%, transparent 70%);
  opacity: var(--m-aurora-strength, 0.55);
  filter: blur(40px);
  animation: m-aurora var(--m-aurora-time, 24s) ease-in-out infinite alternate;
}
.m-aurora--conic::before {
  background: conic-gradient(from 0deg at 50% 50%, var(--m-a, #d9d9d9), var(--m-b, #bfbfbf), var(--m-c, #e6e6e6), var(--m-a, #d9d9d9));
  filter: blur(60px);
  animation: m-spin var(--m-aurora-time, 40s) linear infinite;
}
.m-aurora--corner::before { inset: -10% -10% auto auto; width: 70%; height: 80%; }
@keyframes m-aurora {
  50% { transform: translate(4%, -3%) rotate(6deg) scale(1.05); }
  to { transform: translate(-3%, 4%) rotate(-4deg) scale(1); }
}
@keyframes m-spin { to { transform: rotate(1turn); } }

/* ---------- 6. Magnetic: element follows the pointer slightly ---------- */
[data-magnetic] { transition: transform 0.25s ease; }

/* ---------- 7. Marquee: endless ticker; repeat the content twice inside the track ---------- */
.m-marquee { overflow: hidden; white-space: nowrap; }
.m-marquee-track {
  display: inline-flex;
  gap: var(--m-marquee-gap, 3rem);
  padding-right: var(--m-marquee-gap, 3rem);
  animation: m-marquee var(--m-marquee-time, 30s) linear infinite;
}
.m-marquee--reverse .m-marquee-track { animation-direction: reverse; }
.m-marquee--tilted { transform: rotate(-2deg); margin-block: 1.5rem; }
.m-marquee:hover .m-marquee-track { animation-play-state: paused; }
@keyframes m-marquee { to { transform: translateX(-50%); } }

/* ---------- 8. Spotlight: a soft glow that follows the pointer (fill or border) ---------- */
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--m-x, 50%) var(--m-y, 50%), var(--m-a, rgba(255, 255, 255, 0.35)), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
[data-spotlight="border"]::after {
  z-index: 0;
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
[data-spotlight]:hover::after { opacity: 0.7; }

/* ---------- 9. Draw: SVG strokes draw themselves in view; loop variant redraws continuously ---------- */
.m-js [data-draw] :is(path, line, circle, polyline, polygon, rect, ellipse) {
  stroke-dasharray: var(--m-len, 1000);
  stroke-dashoffset: var(--m-len, 1000);
  transition: stroke-dashoffset var(--m-draw-time, 1.8s) ease;
}
.m-js [data-draw].m-in :is(path, line, circle, polyline, polygon, rect, ellipse) { stroke-dashoffset: 0; }
.m-js [data-draw="loop"].m-in :is(path, line, circle, polyline, polygon, rect, ellipse) {
  animation: m-draw-loop var(--m-draw-time, 6s) ease-in-out infinite;
}
@keyframes m-draw-loop {
  0% { stroke-dashoffset: var(--m-len, 1000); }
  45%, 70% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: calc(-1 * var(--m-len, 1000)); }
}

/* ---------- 10. Parallax: offset applied by motion.js ---------- */

/* ================= Second batch ================= */

/* 11. Particles: canvas inserted by motion.js behind the content */
[data-particles] { position: relative; isolation: isolate; }
.m-particles-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }

/* 12. Scramble text: handled in motion.js */

/* 13. Mask reveal: the element appears through a growing shape */
.m-js [data-mask] { transition: clip-path var(--m-mask-time, 1.1s) cubic-bezier(0.7, 0, 0.2, 1); transition-delay: var(--m-delay, 0s); }
.m-js [data-mask="circle"] { clip-path: circle(0% at 50% 50%); }
.m-js [data-mask="wipe"] { clip-path: inset(0 100% 0 0); }
.m-js [data-mask="wipe-up"] { clip-path: inset(100% 0 0 0); }
.m-js [data-mask="diagonal"] { clip-path: polygon(0 0, 0 0, 0 0, 0 0); }
.m-js [data-mask="diamond"] { clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%); }
.m-js [data-mask="circle"].m-in { clip-path: circle(75% at 50% 50%); }
.m-js [data-mask="wipe"].m-in, .m-js [data-mask="wipe-up"].m-in { clip-path: inset(0 0 0 0); }
.m-js [data-mask="diagonal"].m-in { clip-path: polygon(0 0, 200% 0, 0 200%, 0 0); }
.m-js [data-mask="diamond"].m-in { clip-path: polygon(50% -50%, 150% 50%, 50% 150%, -50% 50%); }

/* 14. Tilt cards: 3D tilt with an optional glare (angles set by motion.js) */
[data-tilt] { transform: perspective(900px) rotateX(var(--m-rx, 0deg)) rotateY(var(--m-ry, 0deg)); transition: transform 0.2s ease; transform-style: preserve-3d; position: relative; }
[data-tilt="glare"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(var(--m-glare-angle, 135deg), rgba(255, 255, 255, 0.35), transparent 55%);
  opacity: var(--m-glare, 0);
  transition: opacity 0.2s ease;
  z-index: 1;
}

/* 15. Blob: an organic shape that slowly changes form (pure CSS) */
.m-blob {
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation: m-blob var(--m-blob-time, 14s) ease-in-out infinite;
  background: var(--m-a, #d9d9d9);
}
.m-blob--soft { filter: blur(30px); opacity: 0.6; }
@keyframes m-blob {
  25% { border-radius: 58% 42% 38% 62% / 52% 61% 39% 48%; transform: rotate(8deg) scale(1.03); }
  50% { border-radius: 38% 62% 54% 46% / 63% 38% 62% 37%; transform: rotate(-4deg) scale(0.98); }
  75% { border-radius: 62% 38% 46% 54% / 39% 57% 43% 61%; transform: rotate(5deg) scale(1.02); }
}

/* 16. Scroll story: steps scroll past a sticky media column; the active step shows its media */
[data-story] { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
[data-story] .m-story-media { position: sticky; top: var(--m-story-top, 15vh); align-self: start; display: grid; }
[data-story] [data-story-media] { transition: opacity 0.5s ease, transform 0.5s ease; }
.m-js [data-story] [data-story-media] { grid-area: 1 / 1; }
.m-js [data-story] [data-story-media]:not(.m-active) { opacity: 0; transform: scale(0.98); }
[data-story] [data-story-step] { min-height: var(--m-step-height, 60vh); opacity: 0.45; transition: opacity 0.4s ease; }
[data-story] [data-story-step].m-active, html:not(.m-js) [data-story] [data-story-step] { opacity: 1; }
@media (max-width: 760px) {
  [data-story] { grid-template-columns: 1fr; }
  [data-story] .m-story-media { position: relative; top: 0; }
  .m-js [data-story] [data-story-media]:not(.m-active) { opacity: 1; transform: none; }
  .m-js [data-story] [data-story-media] { grid-area: auto; }
  [data-story] [data-story-step] { min-height: 0; opacity: 1; }
}

/* 17. Reading progress: a thin bar showing how far the page has been read */
.m-progress { position: fixed; inset: 0 0 auto 0; height: var(--m-progress-height, 3px); z-index: 1000; background: var(--m-a, currentColor); transform-origin: 0 50%; transform: scaleX(var(--m-progress, 0)); pointer-events: none; }

/* 18. Cursor trail: dots or a brand symbol following the pointer (created by motion.js) */
.m-trail-dot { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 999; width: var(--m-trail-size, 10px); height: var(--m-trail-size, 10px); margin: calc(var(--m-trail-size, 10px) / -2); border-radius: 50%; background: var(--m-a, currentColor); opacity: 0.6; animation: m-trail 0.8s ease-out forwards; }
.m-trail-dot svg { width: 100%; height: 100%; display: block; }
.m-trail-dot.m-trail-symbol { border-radius: 0; background: none; }
@keyframes m-trail { to { opacity: 0; transform: translate(var(--m-tx, 0), var(--m-ty, 0)) scale(0.3); } }

/* 19. Grain: film grain over a color field (pure CSS, animated variant) */
.m-grain { position: relative; isolation: isolate; }
.m-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--m-grain-strength, 0.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
.m-grain--animated::after { inset: -50%; animation: m-grain 1.2s steps(6) infinite; }
@keyframes m-grain {
  20% { transform: translate(-5%, 3%); }
  40% { transform: translate(4%, -6%); }
  60% { transform: translate(-3%, 5%); }
  80% { transform: translate(6%, 2%); }
}

/* 20. Drag gallery: horizontal strip, native scroll on touch, drag with inertia on desktop */
[data-drag] { display: flex; gap: var(--m-drag-gap, 16px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain; }
[data-drag]::-webkit-scrollbar { display: none; }
[data-drag] > * { flex: 0 0 auto; scroll-snap-align: start; }
[data-drag].m-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
[data-drag].m-dragging * { pointer-events: none; }

/* ---------- Reduced motion: everything visible and still ---------- */
@media (prefers-reduced-motion: reduce) {
  .m-js [data-reveal], .m-js [data-split] .m-split-part, .m-js [data-mask] { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }
  .m-drift, .m-aurora::before, .m-marquee-track, .m-blob, .m-grain--animated::after { animation: none; }
  .m-js [data-draw] :is(path, line, circle, polyline, polygon, rect, ellipse) { stroke-dashoffset: 0; transition: none; animation: none; }
  [data-magnetic], [data-tilt] { transition: none; transform: none; }
  [data-story] [data-story-media], [data-story] [data-story-step] { transition: none; }
  .m-progress, .m-particles-canvas, .m-trail-dot { display: none; }
}