/* Fikika homepage motion — restrained, scroll-driven, reduced-motion safe */
:root {
  --fk-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fk-motion-dur: 0.72s;
}

/* Prevent motion layers from creating horizontal page scroll */
html.fk-motion-ready,
html.fk-motion-ready body {
  overflow-x: clip;
  max-width: 100%;
}

/* Soft ambient wash behind intro (decorative only — kept inside the box) */
.fk-motion-ready section.intro {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
.fk-motion-ready section.intro::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: min(420px, 58vh);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 18% 30%, rgba(8, 104, 222, 0.09), transparent 70%),
    radial-gradient(ellipse 45% 45% at 82% 20%, rgba(24, 142, 61, 0.07), transparent 72%),
    radial-gradient(ellipse 40% 40% at 50% 85%, rgba(229, 45, 54, 0.04), transparent 70%);
  animation: fkAmbientDrift 14s ease-in-out infinite alternate;
}

@keyframes fkAmbientDrift {
  from { opacity: 0.85; }
  to { opacity: 1; }
}

/* Hero entrance */
@keyframes fkHeroIn {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fk-motion-ready section.intro > .kicker,
.fk-motion-ready section.intro > h1,
.fk-motion-ready section.intro > .intro-lead,
.fk-motion-ready section.intro > .intro-actions {
  animation: fkHeroIn 0.8s var(--fk-motion-ease) both;
}
.fk-motion-ready section.intro > .kicker { animation-delay: 0.04s; }
.fk-motion-ready section.intro > h1 { animation-delay: 0.14s; }
.fk-motion-ready section.intro > .intro-lead { animation-delay: 0.26s; }
.fk-motion-ready section.intro > .intro-actions { animation-delay: 0.38s; }

/* Scroll reveal */
.fk-motion-ready .fk-reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition:
    opacity var(--fk-motion-dur) var(--fk-motion-ease),
    transform var(--fk-motion-dur) var(--fk-motion-ease);
}
.fk-motion-ready .fk-reveal.is-inview {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.fk-motion-ready .fk-reveal-d1 { transition-delay: 0.05s; }
.fk-motion-ready .fk-reveal-d2 { transition-delay: 0.1s; }
.fk-motion-ready .fk-reveal-d3 { transition-delay: 0.16s; }
.fk-motion-ready .fk-reveal-d4 { transition-delay: 0.22s; }
.fk-motion-ready .fk-reveal-d5 { transition-delay: 0.28s; }
.fk-motion-ready .fk-reveal-d6 { transition-delay: 0.34s; }

/* Goal cards: opacity only so hover translate stays snappy */
.fk-motion-ready .goal-card.fk-reveal {
  transform: none;
}
.fk-motion-ready .goal-card.fk-reveal.is-inview {
  transform: none;
}

/* Accent underline grows when section title enters */
.fk-motion-ready .slider-title h2::after,
.fk-motion-ready .slider-title::after {
  transform-origin: center;
  transition: transform 0.9s var(--fk-motion-ease);
}
.fk-motion-ready .slider-title:not(.is-inview) h2::after,
.fk-motion-ready .slider-title:not(.is-inview)::after {
  transform: scaleX(0.35);
}
.fk-motion-ready .slider-title.is-inview h2::after,
.fk-motion-ready .slider-title.is-inview::after {
  transform: scaleX(1);
}

/* Product / visual cards — image lift */
.fk-motion-ready .product-screen,
.fk-motion-ready .visual-card {
  transition: transform 0.35s var(--fk-motion-ease), box-shadow 0.35s var(--fk-motion-ease);
}
.fk-motion-ready .product-screen .ps-media img,
.fk-motion-ready .product-screen > img,
.fk-motion-ready .visual-card img {
  transition: transform 0.55s var(--fk-motion-ease);
}
.fk-motion-ready .product-screen:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(16, 57, 59, 0.12);
}
.fk-motion-ready .product-screen:hover .ps-media img,
.fk-motion-ready .product-screen:hover > img {
  transform: scale(1.04);
}
.fk-motion-ready .visual-card:hover {
  transform: translateY(-3px);
}
.fk-motion-ready .visual-card:hover img {
  transform: scale(1.04);
}

/* Steps — soft lift on hover */
.fk-motion-ready .step {
  transition: transform 0.3s var(--fk-motion-ease), box-shadow 0.3s var(--fk-motion-ease);
}
.fk-motion-ready .step:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(16, 57, 59, 0.08);
}

/* Proof / partner cards */
.fk-motion-ready .proof-card,
.fk-motion-ready .client-logo {
  transition: transform 0.3s var(--fk-motion-ease), box-shadow 0.3s var(--fk-motion-ease);
}
.fk-motion-ready .proof-card:hover,
.fk-motion-ready .client-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(16, 57, 59, 0.08);
}

/* Help band entrance */
.fk-motion-ready .help-band .help-inner {
  transition: opacity var(--fk-motion-dur) var(--fk-motion-ease), transform var(--fk-motion-dur) var(--fk-motion-ease);
}

/* Primary CTA sheen (once visible) */
@keyframes fkCtaSheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
.fk-motion-ready #defineGoalsHero.btn:not(.outline):not(.text) {
  background-image: linear-gradient(110deg, #0868de 0%, #0868de 40%, #2f8df0 50%, #0868de 60%, #0868de 100%);
  background-size: 220% 100%;
  animation: fkCtaSheen 4.5s ease-in-out infinite;
}
.fk-motion-ready #defineGoalsHero.btn:hover {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .fk-motion-ready section.intro::before,
  .fk-motion-ready section.intro > .kicker,
  .fk-motion-ready section.intro > h1,
  .fk-motion-ready section.intro > .intro-lead,
  .fk-motion-ready section.intro > .intro-actions,
  .fk-motion-ready #defineGoalsHero.btn:not(.outline):not(.text) {
    animation: none !important;
  }
  .fk-motion-ready .fk-reveal,
  .fk-motion-ready .fk-reveal.is-inview {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .fk-motion-ready .product-screen,
  .fk-motion-ready .product-screen img,
  .fk-motion-ready .visual-card,
  .fk-motion-ready .visual-card img,
  .fk-motion-ready .step,
  .fk-motion-ready .proof-card,
  .fk-motion-ready .client-logo {
    transition: none !important;
    transform: none !important;
  }
}