/* =========================================================
   SEA GRAPE LABS MOTION KIT 1.0: structure and motion only.
   Colors, fonts and spacing come from the client's theme. Override the variables below.
   ========================================================= */
:root {
  --mk-ease: cubic-bezier(.22, 1, .36, 1);
  --mk-ease-io: cubic-bezier(.77, 0, .18, 1);
  --mk-dur: .7s;
  --mk-dist: 28px;
  --mk-stack-top: 12vh;
  --mk-stack-step: 14px;
  --mk-loader-bg: #14110e;
  --mk-loader-ink: #f3ede2;
  --mk-loader-accent: #c98a3b;
}
html[data-motion="calm"] { --mk-dur: .95s; --mk-dist: 18px; --mk-ease: cubic-bezier(.25, .9, .3, 1); }
html[data-motion="bold"] { --mk-dur: .55s; --mk-dist: 44px; --mk-ease: cubic-bezier(.16, 1, .3, 1); }

.mk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* pinned scenes: the section is tall, its .mk-sticky child stays on screen */
[data-assemble], [data-takeover] { position: relative; height: calc(var(--mk-len, 3) * 100svh + 100svh); }
[data-assemble] > .mk-sticky, [data-takeover] > .mk-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.mk-still [data-assemble], .mk-still [data-takeover] { height: auto; }
.mk-still [data-assemble] > .mk-sticky, .mk-still [data-takeover] > .mk-sticky { position: relative; height: auto; min-height: 100svh; }

/* 1. assemble */
[data-assemble] [data-piece]:not([data-mode="draw"]) { opacity: 0; will-change: transform, opacity; }
.mk-still [data-assemble] [data-piece] { opacity: 1 !important; transform: none !important; }
.mk-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mk-steps [data-step] { position: relative; padding-bottom: 8px; opacity: .45; }
.mk-still .mk-steps [data-step] { opacity: 1; }
.mk-steps .mk-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; }
.mk-still .mk-steps .mk-fill { transform: scaleX(1); }

/* 2. takeover */
[data-takeover] > .mk-sticky { transition: none; }
[data-takeover] [data-item] { cursor: pointer; opacity: .6; transition: opacity .4s var(--mk-ease); }
[data-takeover] [data-item].is-on { opacity: 1; }
[data-takeover] [data-media] { opacity: 0; will-change: transform, opacity; }
[data-takeover] [data-media]:first-of-type { opacity: 1; }
.mk-still [data-takeover] [data-media] { transition: opacity .3s; transform: none; }
.mk-still [data-takeover] [data-media].is-on { opacity: 1; }
.mk-still [data-takeover] [data-media]:not(.is-on) { opacity: 0; }

/* 3. draw */
[data-draw] path, [data-draw] line, [data-draw] polyline, [data-draw] polygon, [data-draw] circle, [data-draw] rect, [data-draw] ellipse,
[data-mode="draw"] path, [data-mode="draw"] line, [data-mode="draw"] polyline, [data-mode="draw"] rect { vector-effect: non-scaling-stroke; }
.mk-drawn path, .mk-drawn line, .mk-drawn polyline, .mk-drawn polygon, .mk-drawn circle, .mk-drawn rect, .mk-drawn ellipse { transition: stroke-dashoffset 1.4s var(--mk-ease); }
.mk-draw-loop path, .mk-draw-loop line, .mk-draw-loop polyline, .mk-draw-loop polygon, .mk-draw-loop circle, .mk-draw-loop rect, .mk-draw-loop ellipse {
  animation: mkDrawLoop 7s cubic-bezier(.65, 0, .35, 1) infinite; animation-delay: calc(var(--mk-i, 0) * .12s);
}
.mk-draw-loop.is-paused * { animation-play-state: paused; }
@keyframes mkDrawLoop { 0% { stroke-dashoffset: 1; } 38% { stroke-dashoffset: 0; } 72% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }

/* 4. loader */
[data-loader] { display: none; }
.mk-loading [data-loader] {
  display: grid; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  background: var(--mk-loader-bg); color: var(--mk-loader-ink); clip-path: inset(0 0 0 0);
  transition: clip-path .85s var(--mk-ease-io);
  animation: mkLoaderBail 0s 2.6s forwards;
}
.mk-loading [data-loader].is-out { clip-path: inset(0 0 100% 0); }
/* the page underneath stays usable: the loader never blocks scrolling, clicks or reading */
@keyframes mkLoaderBail { to { visibility: hidden; } }
[data-loader] [data-loader-bar] { display: block; height: 2px; background: var(--mk-loader-accent); transform: scaleX(0); transform-origin: 0 50%; }
[data-loader] [data-loader-count] { display: inline-block; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }

/* 5. stack */
[data-stack] { display: grid; gap: 6vh; }
[data-stack] > .mk-card { position: sticky; top: calc(var(--mk-stack-top) + var(--mk-i, 0) * var(--mk-stack-step)); transform-origin: 50% 0; will-change: transform; overflow: hidden; }
.mk-card-shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; border-radius: inherit; }
.mk-still [data-stack] > .mk-card { position: relative; top: auto; }

/* 6. marquee */
[data-marquee] { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
[data-marquee].is-dragging { cursor: grabbing; }
[data-marquee] > * { display: flex; width: max-content; will-change: transform; }
[data-marquee] img { -webkit-user-drag: none; user-select: none; }
[data-marquee].mk-mq-static { overflow-x: auto; scrollbar-width: thin; cursor: auto; touch-action: auto; }
[data-marquee]:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* 7. circle menu */
[data-circle-menu] {
  position: fixed; inset: 0; z-index: 900; overflow-y: auto;
  clip-path: circle(0px at var(--mk-cx, 90%) var(--mk-cy, 40px));
  transition: clip-path .75s var(--mk-ease-io);
}
[data-circle-menu].is-open { clip-path: circle(150vmax at var(--mk-cx, 90%) var(--mk-cy, 40px)); }
[data-circle-menu] a, [data-circle-menu] button { opacity: 0; transform: translate3d(0, var(--mk-dist), 0); transition: opacity .5s var(--mk-ease), transform .6s var(--mk-ease); }
[data-circle-menu].is-open a, [data-circle-menu].is-open button { opacity: 1; transform: none; transition-delay: calc(.22s + var(--mk-i, 0) * .05s); }
.mk-menu-open { overflow: hidden; }
.mk-still [data-circle-menu] { transition: opacity .2s; clip-path: none; opacity: 0; }
.mk-still [data-circle-menu].is-open { opacity: 1; }
.mk-still [data-circle-menu] a, .mk-still [data-circle-menu] button { opacity: 1; transform: none; transition: none; }

/* 8. chapter */
[data-chapter] { position: relative; min-height: 100svh; overflow: hidden; display: grid; place-items: center; isolation: isolate; }
[data-chapter] .mk-ch-img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; z-index: -2; will-change: transform; }
[data-chapter]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.05) 40%, rgba(0,0,0,.45)); }
[data-chapter] .mk-ch-word { margin: 0; line-height: .9; will-change: transform, opacity; }
.mk-ready:not(.mk-still) [data-chapter] .mk-ch-word, .mk-ready:not(.mk-still) [data-chapter] .mk-ch-cap { opacity: 0; }

/* 9. rotator */
[data-rotator] { position: relative; overflow: hidden; }
[data-rotate-item] { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s var(--mk-ease); }
[data-rotate-item].is-on { opacity: 1; z-index: 1; }
[data-rotate-item] img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); }
[data-rotate-item].is-on img { animation: mkKen calc(var(--mk-every, 5500ms) + 1200ms) linear forwards; }
@keyframes mkKen { from { transform: scale(1.1); } to { transform: scale(1); } }
[data-rotate-bar] { display: block; height: 100%; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; }
.mk-still [data-rotate-item] img { animation: none; transform: none; }
.mk-still [data-rotate-item] { transition: opacity .3s; }

/* 10. cycle */
.mk-cycle { display: inline-block; vertical-align: bottom; }
.mk-cycle-stack { display: inline-grid; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.mk-cycle-stack > span { grid-area: 1 / 1; transform: translate3d(0, 105%, 0); opacity: 0; transition: transform .65s var(--mk-ease), opacity .45s var(--mk-ease); white-space: nowrap; }
.mk-cycle-stack > span.is-on { transform: none; opacity: 1; }
.mk-cycle-stack > span.is-out { transform: translate3d(0, -105%, 0); opacity: 0; }
.mk-still .mk-cycle-stack > span { transition: none; }