/* Neemow site motion. Everything here only applies once motion.js has added
   `motion` to <html>, so pages still show in full if the script fails, and the
   script never adds it for visitors who ask for reduced motion. */

/* --- Scroll reveals: play once, as an element enters on the way down */
html.motion [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition-property: opacity, transform, box-shadow, background-color, filter;
  transition-duration: .65s, .75s, .3s, .3s, .65s;
  transition-timing-function: cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--d, 0) * 75ms);
}
html.motion [data-reveal="left"] { transform: translate3d(-40px, 0, 0); }
html.motion [data-reveal="right"] { transform: translate3d(40px, 0, 0); }
html.motion [data-reveal="zoom"] { transform: scale(.92); filter: blur(4px); }
html.motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* --- Headings rise in word by word */
.nm-w { display: inline-block; }
html.motion [data-split] .nm-w {
  opacity: 0;
  transform: translate3d(0, .55em, 0) rotate(2deg);
  filter: blur(6px);
  transition: opacity .6s ease, transform .8s cubic-bezier(.2, .7, .2, 1), filter .6s ease;
  transition-delay: calc(var(--i, 0) * 55ms + var(--base, 0ms));
}
html.motion [data-split].is-in .nm-w { opacity: 1; transform: none; filter: none; }

/* --- Hero entrance: plays once on load */
html.motion [data-hero] {
  opacity: 0;
  animation: nm-rise .9s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--d, 0) * 110ms + 80ms);
}
html.motion [data-hero="image"] { animation-name: nm-unveil; animation-duration: 1.2s; }
html.motion [data-hero="pop"] { animation-name: nm-pop; animation-duration: .7s; }
/* a card that pops in and then floats runs both (float uses `translate`, so they don't fight) */
html.motion [data-hero="pop"][data-float] {
  animation-name: nm-pop, nm-float;
  animation-duration: .7s, 6s;
  animation-timing-function: cubic-bezier(.2, .7, .2, 1), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
  animation-delay: calc(var(--d, 0) * 110ms + 80ms), var(--fd, 0s);
}
html.motion [data-hero-bg] { animation: nm-bg 1.6s cubic-bezier(.2, .7, .2, 1) both; }

/* Hand-drawn underline under "easy." */
html.motion [data-underline] path {
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: nm-draw .9s cubic-bezier(.6, 0, .2, 1) .9s forwards;
}

/* Gentle idle float for chips, cards and the mini phone */
[data-float] { animation: nm-float 6s ease-in-out infinite; animation-delay: var(--fd, 0s); }

/* Connector lines draw across as steps appear */
html.motion [data-line] { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.6, 0, .2, 1) .2s; }
html.motion [data-line].is-in { transform: scaleX(1); }

/* Step numbers pulse when they come into view */
html.motion [data-step-dot].is-in { animation: nm-ring 1.6s ease-out calc(var(--d, 0) * 200ms + .4s) 1; }

/* Cover photos drift against the scroll (motion.js sets `translate`) */
.nm-parallax { scale: 1.12; will-change: translate; }

/* Reading-progress bar along the top */
.nm-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70;
  background: linear-gradient(90deg, #4CAF50, #8BD38F);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* --- Hover: cards lift and tilt toward the cursor, buttons rise */
[data-lift] { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, background-color .3s; }
[data-lift]:hover,
html.motion [data-reveal][data-lift].is-in:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(4, 54, 22, .35);
  transition-delay: 0s;
  transition-duration: .2s;
}
[data-btn] { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease; }
[data-btn]:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(4, 54, 22, .45); }
[data-btn]:active { transform: translateY(0) scale(.97); }

/* Header gets a firmer shadow once you scroll */
header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .08) !important; }

@keyframes nm-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes nm-unveil { from { opacity: 0; transform: scale(1.06); clip-path: inset(8% 8% 8% 8% round 28px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 28px); } }
@keyframes nm-pop { 0% { opacity: 0; transform: translate3d(0, 16px, 0) scale(.9); } 70% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes nm-bg { from { filter: saturate(.5) brightness(.85); clip-path: inset(5% 5% 5% 5% round 28px); } to { filter: none; clip-path: inset(0 0 0 0 round 28px); } }
@keyframes nm-draw { to { stroke-dashoffset: 0; } }
@keyframes nm-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes nm-ring { 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, .55); } 100% { box-shadow: 0 0 0 18px rgba(76, 175, 80, 0); } }