/* ==========================================================================
   Rankora / FindMyAEO — motion layer
   Everything here is progressive: without JS the site still works.
   ========================================================================== */

/* Lenis smooth scroll ---------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Scroll progress -------------------------------------------------------- */
.rk-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; pointer-events: none; }
.rk-progress span { display: block; height: 100%; background: var(--rk-lime); transform-origin: 0 50%; transform: scaleX(0); box-shadow: 0 0 10px rgba(216, 251, 60, .6); }

/* Header hides on scroll down -------------------------------------------- */
.rk-header { transition: transform .5s var(--rk-ease), box-shadow .3s; }
.rk-header.is-hidden { transform: translateY(-110%); }

/* Buttons: text roll + cursor fill + magnetic ---------------------------- */
.rk-fx-on .rk-btn, .rk-fx-on .rk-burger, .rk-fx-on .rk-slide-btn, .rk-fx-on .rk-panel-close {
	transform: translate(var(--mx, 0px), var(--my, 0px));
	transition: transform .5s var(--rk-ease), background .35s, color .35s, border-color .35s;
}
.rk-fx-on .rk-btn { position: relative; overflow: hidden; isolation: isolate; }
.rk-fx-on .rk-btn > * { position: relative; z-index: 1; }
.rk-btn-fill {
	position: absolute !important; z-index: 0 !important; left: var(--fx, 50%); top: var(--fy, 50%);
	width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%);
	transition: width .6s var(--rk-ease), padding-bottom .6s var(--rk-ease); pointer-events: none;
}
.rk-btn.is-hover .rk-btn-fill { width: 260%; height: 0; padding-bottom: 260%; }
.rk-fx-on .rk-btn-lime:hover, .rk-fx-on .rk-btn-ink:hover, .rk-fx-on .rk-btn-line:hover { background: inherit; }
.rk-fx-on .rk-btn-lime:hover { background: var(--rk-lime); }
.rk-fx-on .rk-btn-lime .rk-btn-fill { background: var(--rk-ink); }
.rk-fx-on .rk-btn-ink:hover { background: var(--rk-ink); }
.rk-fx-on .rk-btn-ink .rk-btn-fill { background: var(--rk-lime); }
.rk-fx-on .rk-btn-line:hover { background: transparent; border-color: var(--rk-fg); }
.rk-fx-on .rk-btn-line .rk-btn-fill { background: var(--rk-fg); }
.rk-fx-on .rk-scheme-dark .rk-btn-lime .rk-btn-fill { background: #fff; }
.rk-fx-on .rk-scheme-dark .rk-btn-ink:hover { background: #fff; }
.rk-fx-on .rk-cta .rk-btn-ink:hover { background: var(--rk-ink); }
.rk-fx-on .rk-cta .rk-btn-ink .rk-btn-fill { background: #fff; }
.rk-fx-on .rk-cta .rk-btn-line .rk-btn-fill { background: var(--rk-ink); }
.rk-fx-on .rk-widget-cta .rk-btn .rk-btn-fill { background: #fff; }

.rk-btn-roll { display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2; vertical-align: top; }
.rk-btn-roll > span { display: block; transition: transform .55s var(--rk-ease); }
.rk-btn-roll > span > span { display: block; height: 1.2em; }
.rk-btn.is-hover .rk-btn-roll > span { transform: translateY(-50%); }

.rk-btn.is-hover .rk-icon-arrow { transform: translateX(4px) rotate(-45deg); }

/* Hero waits for the preloader */
.rk-hold .rk-hero .rk-reveal, .rk-hold .rk-hero .rk-reveal.is-in { opacity: 0; transform: translateY(40px); }
.rk-hold .rk-hero-stats { opacity: 0; }
.rk-hero-stats { transition: opacity 1s var(--rk-ease) .6s; }

/* Split text headings --------------------------------------------------- */
.rk-split .rk-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .14em; margin: 0 -.02em -.14em; }
.rk-split .rk-w > .rk-w-in { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: 0 100%; transition: transform 1.1s var(--rk-ease); transition-delay: calc(var(--i, 0) * 60ms); }
.rk-split.is-split-in .rk-w > .rk-w-in { transform: none; }
.rk-split .rk-w-keep { display: inline-block; }
.rk-split .rk-w-keep.rk-pill { transform: rotate(-3deg) scale(0); transition: transform 1s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i, 0) * 60ms + 250ms); }
.rk-split.is-split-in .rk-w-keep.rk-pill { transform: rotate(-3deg) scale(1); }

/* Outline word draws in */
.rk-fx-on .rk-hero-title .rk-outline { background: linear-gradient(90deg, var(--rk-fg) 50%, transparent 50%) 100% 0 / 200% 100% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-position 1.4s var(--rk-ease) .9s; }
.rk-fx-on .rk-hero-title .rk-outline:hover { background-position: 0 0; transition-delay: 0s; transition-duration: .6s; }

/* Media reveals (curtain) ----------------------------------------------- */
.js.rk-fx-on .rk-about-media .rk-about-placeholder,
.js.rk-fx-on .rk-about-media > img,
.js.rk-fx-on .rk-why-media > *,
.js.rk-fx-on .rk-case-media,
.js.rk-fx-on .rk-post-thumb {
	clip-path: inset(100% 0 0 0 round var(--rk-radius));
	transition: clip-path 1.3s var(--rk-ease);
}
.js.rk-fx-on .rk-about-media > img, .js.rk-fx-on .rk-why-media > img, .js.rk-fx-on .rk-case-media img, .js.rk-fx-on .rk-post-thumb img { scale: 1.25; transition: scale 1.6s var(--rk-ease), transform .7s var(--rk-ease); }
.js.rk-fx-on .rk-case-media { clip-path: inset(100% 0 0 0); }
.js.rk-fx-on .is-in .rk-about-placeholder,
.js.rk-fx-on .rk-about-media.is-in > img,
.js.rk-fx-on .rk-why-media.is-in > *,
.js.rk-fx-on .is-in .rk-case-media,
.js.rk-fx-on .is-in .rk-post-thumb,
.js.rk-fx-on .is-in.rk-post-card .rk-post-thumb { clip-path: inset(0 0 0 0 round var(--rk-radius)); }
.js.rk-fx-on .is-in .rk-case-media { clip-path: inset(0); }
.js.rk-fx-on .is-in img { scale: 1; }
.js.rk-fx-on .rk-exp { scale: 0; rotate: -20deg; transition: scale .9s cubic-bezier(.34, 1.56, .64, 1) .7s, rotate .9s var(--rk-ease) .7s; }
.js.rk-fx-on .is-in .rk-exp { scale: 1; rotate: 0deg; }

/* Tilt cards ------------------------------------------------------------ */
.rk-fx-on .rk-tilt { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px)); transform-style: preserve-3d; }
.rk-fx-on .rk-tilt:hover { --ty: -6px; }
.rk-fx-on .rk-service.rk-tilt:hover, .rk-fx-on .rk-case.rk-tilt:hover { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); }
.rk-tilt .rk-tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .16), transparent 55%); opacity: 0; transition: opacity .4s; z-index: 2; }
.rk-tilt:hover .rk-tilt-glare { opacity: 1; }

/* Custom cursor --------------------------------------------------------- */
.rk-cursor, .rk-cursor-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 2000; border-radius: 50%; opacity: 0; transition: opacity .3s; }
.rk-cursor { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--rk-lime); mix-blend-mode: normal; }
.rk-cursor-ring {
	width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 1.5px solid var(--rk-fg); display: grid; place-items: center;
	transition: width .35s var(--rk-ease), height .35s var(--rk-ease), margin .35s var(--rk-ease), background .35s, border-color .35s, opacity .3s;
	font-size: 13px; font-weight: 800; color: var(--rk-ink); text-transform: uppercase; letter-spacing: .06em;
}
.rk-cursor-on .rk-cursor, .rk-cursor-on .rk-cursor-ring { opacity: 1; }
.rk-cursor-ring.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(216, 251, 60, .25); border-color: transparent; }
.rk-cursor-ring.is-view { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--rk-lime); border-color: var(--rk-lime); }
.rk-cursor-ring.is-down { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
.rk-cursor-ring span { opacity: 0; transition: opacity .2s; }
.rk-cursor-ring.is-view span { opacity: 1; }
.rk-dark .rk-cursor-ring, .rk-footer .rk-cursor-ring { border-color: #fff; }

/* Preloader ------------------------------------------------------------- */
.rk-loader {
	position: fixed; inset: 0; z-index: 3000; background: var(--rk-ink); color: #fff; display: grid; place-items: center;
	transition: clip-path 1s var(--rk-ease); clip-path: inset(0 0 0 0);
	animation: rk-loader-fallback .01s 4s forwards;
}
.rk-loader.is-done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.rk-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.rk-loader-mark { width: 72px; height: 72px; border-radius: 50%; background: var(--rk-lime); color: var(--rk-ink); display: grid; place-items: center; font-family: var(--rk-display); font-weight: 800; font-size: 38px; animation: rk-loader-pulse 1.2s var(--rk-ease) infinite; }
.rk-loader-count { font-family: var(--rk-display); font-weight: 800; font-size: 20px; letter-spacing: .1em; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; }
.rk-loader-bar { width: 180px; height: 2px; background: rgba(255, 255, 255, .15); overflow: hidden; border-radius: 2px; }
.rk-loader-bar i { display: block; height: 100%; width: 100%; background: var(--rk-lime); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .2s linear; }
@keyframes rk-loader-pulse { 50% { transform: scale(.88); } }
@keyframes rk-loader-fallback { to { visibility: hidden; opacity: 0; } }

/* Magnetic icon circles ------------------------------------------------- */
.rk-fx-on .rk-arrow-circle { transform: translate(var(--mx, 0px), var(--my, 0px)); }

/* Marquee reacts to scroll ---------------------------------------------- */
.rk-fx-on .rk-marquee-track { animation: none; will-change: transform; }

/* Reduced motion: switch it all off ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rk-loader, .rk-cursor, .rk-cursor-ring { display: none !important; }
	.rk-split .rk-w > .rk-w-in, .rk-split .rk-w-keep.rk-pill { transform: none !important; }
	.js.rk-fx-on .rk-about-media .rk-about-placeholder, .js.rk-fx-on .rk-about-media > img, .js.rk-fx-on .rk-why-media > *, .js.rk-fx-on .rk-case-media, .js.rk-fx-on .rk-post-thumb { clip-path: none !important; }
	.js.rk-fx-on img { scale: 1 !important; }
	.js.rk-fx-on .rk-exp { scale: 1 !important; rotate: 0deg !important; }
}

@media (hover: none), (pointer: coarse) {
	.rk-cursor, .rk-cursor-ring { display: none !important; }
}