/* motion-kit.css : the motion and transition layer from the simpliSELF site, with no brand colours.
   One accent colour comes from --mk-accent (default: the text colour). Everything is scoped to .mk-root.
   Order of use: this file, then your own CSS. Needs <html class="mk-js"> (set by the one-line script in the demo head)
   so that content is fully visible when JavaScript is off. */

.mk-root{--mk-accent:currentColor;--mk-ease:cubic-bezier(.2,.6,.2,1);--mk-line:rgba(127,127,127,.25)}

/* 1. REVEAL on scroll (CSS transition + IntersectionObserver adds .mk-in) */
.mk-js .mk-reveal{opacity:0;transform:translateY(18px);transition:opacity .9s var(--mk-ease),transform .9s var(--mk-ease)}
.mk-reveal.mk-d1{transition-delay:.1s}.mk-reveal.mk-d2{transition-delay:.2s}.mk-reveal.mk-d3{transition-delay:.3s}
.mk-reveal.mk-in{opacity:1;transform:none}

/* 2. BUTTON: colour change + the arrow nudges 3px */
.mk-btn{display:inline-flex;align-items:center;gap:12px;padding:18px 28px;border:0;border-radius:2px;cursor:pointer;font:600 15px/1 inherit;text-decoration:none;background:var(--mk-accent);color:#fff;transition:background .2s ease,filter .2s ease}
.mk-btn:hover{filter:brightness(.92)}
.mk-btn svg{width:16px;height:16px;transition:transform .2s ease}
.mk-btn:hover svg{transform:translateX(3px)}

/* 3. OPTION / CARD hover: border and background change fast (.2s), icon slides */
.mk-opt{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;padding:18px;border:1.5px solid var(--mk-line);border-radius:2px;background:transparent;color:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.mk-opt:hover{border-color:var(--mk-accent);background:rgba(127,127,127,.07)}
.mk-opt svg{transition:transform .2s,color .2s}.mk-opt:hover svg{transform:translateX(3px);color:var(--mk-accent)}
.mk-opt[aria-pressed="true"]{border-color:var(--mk-accent)}

/* 4. SCROLL PROGRESS bar (scaleX scrubbed by ScrollTrigger) */
.mk-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:90;pointer-events:none}
.mk-progress i{display:block;height:100%;background:var(--mk-accent);transform-origin:0 50%;transform:scaleX(0)}

/* 5. HEADER: solid with blur; transparent while it sits over the hero (.mk-nav--over toggled on scroll) */
.mk-nav{position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--mk-line);transition:background .35s ease,border-color .35s ease}
.mk-nav a{color:inherit;transition:color .35s}.mk-nav a:hover{color:var(--mk-accent)}
.mk-nav--over{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.mk-nav--over,.mk-nav--over a{color:#fff}

/* 6. STICKY CTA BAR: slides up after the hero, hides again at the final CTA (.on toggled) */
.mk-sticky{position:fixed;left:0;right:0;bottom:0;z-index:75;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--mk-line);transform:translateY(110%);transition:transform .35s ease}
.mk-sticky.on{transform:none}
@media(min-width:900px){.mk-sticky{display:none}}

/* 7. MARK: a highlighter draws under a phrase (background-size 0 -> 100%) */
.mk-mark{background:linear-gradient(transparent 60%,color-mix(in srgb,var(--mk-accent) 40%,transparent) 60%) no-repeat 0 0/100% 100%;transition:background-size 1.2s cubic-bezier(.6,.1,.2,1)}
.mk-motion .mk-mark{background-size:0% 100%}.mk-motion .mk-mark.on{background-size:100% 100%}

/* 8. SCROLL CUE: a thin line travels down */
.mk-cue{position:relative;display:block;width:1px;height:48px;background:var(--mk-line);overflow:hidden}
.mk-cue::after{content:'';position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--mk-accent);animation:mkCue 1.8s ease-in-out infinite}
@keyframes mkCue{0%{top:-40%}100%{top:100%}}

/* 9. MARQUEE: duplicated track slides left forever, pauses on hover */
.mk-marquee{overflow:hidden}
.mk-marquee-track{display:flex;gap:16px;width:max-content;animation:mkMarquee 70s linear infinite}
.mk-marquee:hover .mk-marquee-track{animation-play-state:paused}
@keyframes mkMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 10. MASKED LINES: each line is a clipped box; the inner span rises (JS: data-mk="lines") */
.mk-lines .ln{display:block;overflow:hidden;padding-bottom:.06em}
.mk-lines .ln>span{display:inline-block}

/* 11. WORDS read-along: words start faint (JS: data-mk="words") */
.mk-words .w{display:inline}

/* 12. CROSS-OUT: a line draws through a word (scaleX 0 -> 1, scrubbed) */
.mk-x{position:relative;display:inline-block}
.mk-x i{position:absolute;left:-2%;right:-2%;top:55%;height:.07em;min-height:3px;background:var(--mk-accent);transform-origin:0 50%}

/* 13. ACCORDION: <details> with a plus that rotates to a minus */
.mk-acc summary{display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;list-style:none;padding:20px 0}
.mk-acc summary::-webkit-details-marker{display:none}
.mk-acc summary i{position:relative;width:28px;height:28px;border:1.5px solid var(--mk-line);border-radius:50%;transition:background .2s}
.mk-acc summary i::before,.mk-acc summary i::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:currentColor}
.mk-acc summary i::after{transform:rotate(90deg);transition:transform .3s ease}
.mk-acc[open] summary i::after{transform:rotate(0)}

/* 14. PINNED CHAPTERS (JS: data-mk="pin-steps"): steps stacked in one box, crossfaded while pinned */
.mk-motion .mk-steps{position:relative;min-height:200px}
.mk-motion .mk-step{position:absolute;left:0;right:0;top:0}

/* 15. WIPE (JS: data-mk="wipe"): panel B reveals over panel A by clip-path while pinned */
.mk-motion .mk-wipe{position:relative;height:100vh;height:100svh;overflow:hidden}
.mk-motion .mk-wipe>.mk-pane{position:absolute;inset:0}

/* 16. HORIZONTAL JOURNEY (JS: data-mk="hscroll"): vertical scroll moves a wide track sideways (desktop);
      on phones it is a normal swipe row */
.mk-hs-viewport{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.mk-hs-track{display:flex;gap:24px;width:max-content;padding:0 24px}
.mk-motion .mk-hs-viewport{overflow:hidden}

/* 17. FRAME that opens to full screen (JS: data-mk="open-frame") */
.mk-frame{overflow:hidden}

/* reduced motion: all CSS motion stops; the JS also skips every GSAP scene */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  .mk-js .mk-reveal{opacity:1;transform:none;transition:none}
  .mk-root *,.mk-root *::before,.mk-root *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .mk-marquee-track{animation:none}
}