/* ==========================================================================
   motion.css — Scroll-reveal + micro-interactions + signature animations
   for the dotts.se homepage.

   Pairs with /js/motion.js. Loaded AFTER dotts-se.webflow.css so equal-
   specificity rules win, and after webflow.js/faq.js at runtime.

   Golden rule: never style elements that Webflow's IX2 engine drives
   (anything with [data-w-id] or inline opacity:0). Stagger child selectors
   below explicitly exclude :not([data-w-id]) so IX2 keeps full control of
   those nodes (e.g. the .features-item.is-big card).

   Everything animates only transform / opacity / box-shadow / clip-path /
   background-position -> GPU friendly, no layout shift.
   ========================================================================== */

:root {
  --mo-ease: cubic-bezier(.165, .84, .44, 1); /* matches existing site easing */
  --mo-dur: .7s;
  --mo-dist: 24px;
  --mo-stagger: 90ms;
}

/* --------------------------------------------------------------------------
   Accessibility: honour "reduce motion". Show every final state instantly
   and kill all decorative animation. This is mandatory and wins via !important.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* keep the Why cards' playful tilt even with motion disabled */
  .why_component > .why_item {
    transform: rotate(var(--mo-rot, 0deg)) !important;
  }
  .mo-checkdraw .check-item-icon {
    clip-path: none !important;
  }
  .header-dott {
    animation: none !important;
    opacity: 1 !important;
  }
  .header-dott::after,
  .mo-shimmer::after {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Scroll reveal — single element. JS adds .is-visible when it scrolls in,
   then .is-done to release will-change.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--mo-dist), 0);
  transition: opacity var(--mo-dur) var(--mo-ease),
              transform var(--mo-dur) var(--mo-ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-reveal].is-done {
  will-change: auto;
}
[data-reveal="left"]  { transform: translate3d(calc(-1 * var(--mo-dist)), 0, 0); }
[data-reveal="right"] { transform: translate3d(var(--mo-dist), 0, 0); }
[data-reveal="scale"] { transform: scale(.96); }
[data-reveal="scale"].is-visible { transform: scale(1); }

/* --------------------------------------------------------------------------
   Scroll reveal — staggered children. JS sets --mo-i (0,1,2…, capped) on each
   visible child; IX2-driven children are skipped via :not([data-w-id]).
   --mo-i cascades to descendants, so the checkmark draw below can reuse it.
   -------------------------------------------------------------------------- */
[data-reveal-stagger] > *:not([data-w-id]) {
  opacity: 0;
  transform: translate3d(0, var(--mo-dist), 0);
  transition: opacity var(--mo-dur) var(--mo-ease),
              transform var(--mo-dur) var(--mo-ease);
  transition-delay: calc(var(--mo-i, 0) * var(--mo-stagger));
  will-change: opacity, transform;
}
[data-reveal-stagger].is-visible > *:not([data-w-id]) {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-reveal-stagger].is-done > *:not([data-w-id]) {
  will-change: auto;
}

/* Why section: each card has its own playful tilt (set below). Reveal by
   scaling up from that tilt instead of sliding, so the rotation is kept.
   Higher specificity than the generic stagger rule above, so this transform
   wins; opacity / transition / delay still come from the generic rule. */
.why_item.is1 { --mo-rot: -2deg; }
.why_item.is2 { --mo-rot:  2deg; }
.why_item.is3 { --mo-rot:  5deg; }
.why_item.is4 { --mo-rot:  2deg; }
.why_item.is5 { --mo-rot: -1deg; }

[data-reveal-stagger].why_component > .why_item {
  transform: rotate(var(--mo-rot, 0deg)) scale(.8);
}
[data-reveal-stagger].why_component.is-visible > .why_item {
  transform: rotate(var(--mo-rot, 0deg)) scale(1);
}

/* --------------------------------------------------------------------------
   Micro-interactions
   -------------------------------------------------------------------------- */

/* Buttons: keep the original colour transitions, add a lift + soft shadow. */
.button {
  transition: border-color .3s cubic-bezier(.215, .61, .355, 1),
              background-color .3s var(--mo-ease),
              transform .25s var(--mo-ease),
              box-shadow .25s var(--mo-ease);
}
.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(3, 71, 57, .18);
}
.button:active {
  transform: translateY(0);
}

/* Cards: gentle hover lift (no transform transition existed before). */
.pricing-item,
.features-item,
.testimonials-item,
.why_item {
  transition: transform .3s var(--mo-ease), box-shadow .3s var(--mo-ease);
}
.pricing-item:hover,
.features-item:hover,
.testimonials-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(12, 15, 24, .10);
}

/* Brand pins: a soft pulsing ring. Uses ::after + box-shadow only, so it
   never collides with IX2's transform/opacity keyframes on .header-dott. */
.header-dott::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(210, 255, 199, .55);
  animation: mo-pulse 2.4s var(--mo-ease) infinite;
  pointer-events: none;
}
.header-dott:hover::after {
  animation-play-state: paused;
}
@keyframes mo-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(210, 255, 199, .55); }
  70%  { box-shadow: 0 0 0 12px rgba(210, 255, 199, 0); }
  100% { box-shadow: 0 0 0 0 rgba(210, 255, 199, 0); }
}

/* Hero pins drop in one after another on load, then settle into the pulse.
   Uses fill-mode "backwards" so the pin is hidden during its delay, and after
   it finishes control returns to normal styles — leaving IX2's hover free. */
.header-dott.is1,
.header-dott.is2,
.header-dott.is3 {
  animation: mo-dott-drop .6s var(--mo-ease) backwards;
}
.header-dott.is1 { animation-delay: .5s; }
.header-dott.is2 { animation-delay: .7s; }
.header-dott.is3 { animation-delay: .9s; }
@keyframes mo-dott-drop {
  0%   { opacity: 0; transform: translate3d(0, -14px, 0) scale(.4); }
  70%  { opacity: 1; transform: translate3d(0, 0, 0) scale(1.12); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* --------------------------------------------------------------------------
   Signature 1 — checkmarks "draw" themselves.
   The check icons are filled paths (not strokes), so we reveal them with a
   left-to-right clip-path wipe, keyed off the stagger reveal + inherited --mo-i
   (fires just after each row's card has appeared). Pure CSS, no extra JS.
   -------------------------------------------------------------------------- */
.mo-checkdraw .check-item-icon {
  clip-path: inset(0 100% 0 0);
}
.mo-checkdraw.is-visible .check-item-icon {
  clip-path: inset(0 0 0 0);
  transition: clip-path .55s var(--mo-ease);
  transition-delay: calc(var(--mo-i, 0) * var(--mo-stagger) + .18s);
}

/* --------------------------------------------------------------------------
   Signature 3 — shimmer on the highlighted Early-Bird price card.
   A soft lime gradient sweeps across the card to draw the eye to conversion.
   -------------------------------------------------------------------------- */
.mo-shimmer {
  position: relative;
  overflow: hidden;
}
.mo-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(110deg,
              transparent 35%,
              rgba(210, 255, 199, .45) 50%,
              transparent 65%);
  background-size: 250% 100%;
  animation: mo-shimmer 4.5s var(--mo-ease) infinite;
}
@keyframes mo-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}

/* The "cursor drops a dott" cinematic was removed — it read as interactive
   but wasn't. Its energy moved to the hero pin drop-in above. */