/* ============================================
   motion.css — scroll reveal + micro-interactions
   ============================================ */

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-pop {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .float-bob, .float-bob-slow, .float-spin {
    animation: none !important;
  }
}

/* ----- scroll reveal (set by motion.js) ----- */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-pop {
  opacity: 0;
  transition:
    opacity 700ms cubic-bezier(.2,.7,.2,1),
    transform 800ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal-up    { transform: translateY(28px); }
.reveal-left  { transform: translateX(-28px); }
.reveal-right { transform: translateX(28px); }
.reveal-pop   { transform: scale(.92) rotate(-1.5deg); }

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-pop.is-visible {
  opacity: 1;
  transform: none;
}

/* small staggered delays for children */
.stagger > *           { transition-delay: 0ms; }
.stagger > *:nth-child(2)  { transition-delay: 80ms; }
.stagger > *:nth-child(3)  { transition-delay: 160ms; }
.stagger > *:nth-child(4)  { transition-delay: 240ms; }
.stagger > *:nth-child(5)  { transition-delay: 320ms; }
.stagger > *:nth-child(6)  { transition-delay: 400ms; }
.stagger > *:nth-child(7)  { transition-delay: 480ms; }
.stagger > *:nth-child(8)  { transition-delay: 560ms; }

/* ----- floating ambient motion ----- */
@keyframes bob {
  0%,100% { transform: translateY(0) rotate(var(--bob-rot, 0deg)); }
  50%     { transform: translateY(-6px) rotate(var(--bob-rot, 0deg)); }
}
@keyframes bob-slow {
  0%,100% { transform: translateY(0) rotate(var(--bob-rot, 0deg)); }
  50%     { transform: translateY(-10px) rotate(var(--bob-rot, 0deg)); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.float-bob       { animation: bob 4.2s ease-in-out infinite; }
.float-bob-slow  { animation: bob-slow 6.5s ease-in-out infinite; }
.float-spin      { animation: spin-slow 18s linear infinite; }

/* ----- card hover micro-interaction ----- */
.service-card {
  transition: transform 240ms cubic-bezier(.2,.7,.2,1),
              box-shadow 240ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
  cursor: pointer;
}
.service-card:hover {
  transform: translateY(-6px) rotate(0deg) !important;
  box-shadow: 6px 8px 0 var(--ink) !important;
}
.service-card:hover .card-cta {
  color: var(--accent-1);
}
.service-card .card-cta {
  transition: color 200ms ease, transform 200ms ease;
}
.service-card:hover .card-cta {
  transform: translateX(4px);
}

/* ----- handdrawn buttons / stickers hover ----- */
[data-hover="sticker"] {
  transition: transform 180ms cubic-bezier(.2,.7,.2,1),
              box-shadow 180ms cubic-bezier(.2,.7,.2,1);
  cursor: pointer;
}
[data-hover="sticker"]:hover {
  transform: translate(-1px, -2px) rotate(-1deg);
  box-shadow: 4px 5px 0 var(--ink);
}
[data-hover="sticker"]:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}

/* ----- focus visibility (a11y) ----- */
a:focus-visible,
button:focus-visible,
.service-card:focus-visible,
[data-hover="sticker"]:focus-visible {
  outline: 3px dashed var(--accent-2);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ----- scroll progress bar ----- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-3), var(--accent-2));
  z-index: 9999;
  transition: width 80ms linear;
  pointer-events: none;
}

/* ----- "back to top" handdrawn button ----- */
.back-to-top {
  position: fixed;
  bottom: 24px; right: 24px;
  width: 52px; height: 52px;
  background: var(--accent-3, #ffd84a);
  border: 2.5px solid var(--ink);
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  box-shadow: 3px 3px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: "Caveat", cursive;
  font-size: 26px; font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) rotate(-4deg);
  transition: opacity 280ms ease, transform 280ms cubic-bezier(.2,.7,.2,1), box-shadow 200ms ease;
  z-index: 200;
  user-select: none;
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0) rotate(-4deg);
}
.back-to-top:hover {
  transform: translateY(-3px) rotate(-2deg);
  box-shadow: 5px 6px 0 var(--ink);
}

/* ----- underline-on-scroll for hero h1 ----- */
.hand-underline {
  background-image: linear-gradient(transparent 60%, rgba(255,92,58,.32) 60%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 1.4s cubic-bezier(.2,.7,.2,1);
}
.hand-underline.is-visible {
  background-size: 100% 100%;
}

/* ----- in-section parallax (very subtle) ----- */
.parallax-slow { transform: translateY(var(--py, 0px)); transition: transform 60ms linear; }

/* ============================================
   ADDITIONAL: characters, typography, drawing,
   counters, sparkles, FAQ, CTA underline, paper
   ============================================ */

/* ----- character (Blob) ambient -----
   The shared .float-bob already gives vertical bob.
   Add a "blink" overlay and a "wobble" hover. */
@keyframes blob-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.05); }
}
.blob-eyes::after {
  /* invisible blink layer; activated by data-blob */
}
[data-blob] {
  position: relative;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1);
}
[data-blob]:hover {
  transform: translateY(-4px) rotate(var(--blob-rot, 0deg)) scale(1.05) !important;
  z-index: 2;
}

/* eye-tracking pupils inject by motion.js */
.eye-pupil {
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
}

/* ----- handwriting reveal for headings (h1.hand, h2.hand) ----- */
.handwrite-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px) rotate(-4deg) scale(.9);
  transition: opacity 320ms cubic-bezier(.2,.7,.2,1), transform 420ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.handwrite-char.is-on {
  opacity: 1;
  transform: none;
}
/* fallback: if JS hasn't kicked in within ~2s (e.g. background tab), still show */
.handwrite-char.fallback-show {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .handwrite-char { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ----- "drawn" underline / circle (set via motion.js) ----- */
.drawn-line {
  stroke-dasharray: var(--draw-len, 600);
  stroke-dashoffset: var(--draw-len, 600);
  transition: stroke-dashoffset 1400ms cubic-bezier(.2,.7,.2,1);
}
.drawn-line.is-drawing {
  stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .drawn-line { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* ----- count-up numbers ----- */
[data-count-up] {
  font-variant-numeric: tabular-nums;
}

/* ----- sparkles (✦) twinkle ----- */
@keyframes sparkle-twinkle {
  0%, 100% { transform: scale(.4) rotate(0deg); opacity: 0; }
  10%      { transform: scale(1.2) rotate(15deg); opacity: 1; }
  35%      { transform: scale(1) rotate(-10deg); opacity: .9; }
  70%      { transform: scale(.6) rotate(8deg); opacity: .3; }
}
.sparkle {
  display: inline-block;
  transform-origin: center;
  animation: sparkle-twinkle 3.2s ease-in-out infinite;
  animation-delay: var(--spk-delay, 0s);
  color: var(--accent-1);
  font-family: "Caveat", cursive;
  font-weight: 700;
}
.sparkle--y { color: #ffb547; }
.sparkle--b { color: var(--accent-2); }
.sparkle--p { color: #c36bff; }
@media (prefers-reduced-motion: reduce) {
  .sparkle { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* ----- arrow note auto-draw (ArrowNote svg paths) ----- */
.arrow-draw path {
  stroke-dasharray: var(--arr-len, 400);
  stroke-dashoffset: var(--arr-len, 400);
  transition: stroke-dashoffset 1100ms cubic-bezier(.2,.7,.2,1) 200ms;
}
.arrow-draw.is-on path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .arrow-draw path { stroke-dashoffset: 0 !important; }
}

/* ----- paper texture (very subtle) ----- */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(0,0,0,.04) 1px, transparent 1.5px),
    radial-gradient(rgba(0,0,0,.025) 1px, transparent 1.2px);
  background-size: 7px 7px, 13px 13px;
  background-position: 0 0, 3px 4px;
  mix-blend-mode: multiply;
  z-index: 9998;
  opacity: .5;
}
@media (prefers-reduced-motion: reduce) {
  body::before { opacity: .3; }
}

/* ----- service-card illustration wobble on hover ----- */
.service-card .service-illust,
.service-card > div:first-child {
  transition: transform 380ms cubic-bezier(.2,.7,.2,1);
  transform-origin: center;
}
.service-card:hover .service-illust,
.service-card:hover > div:first-child {
  animation: card-illust-wobble 600ms ease-in-out;
}
@keyframes card-illust-wobble {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(-4deg) scale(1.06); }
  50%  { transform: rotate(3deg) scale(1.08); }
  75%  { transform: rotate(-2deg) scale(1.05); }
  100% { transform: rotate(0deg) scale(1.04); }
}

/* ----- FAQ accordion ----- */
.faq-item {
  cursor: pointer;
  user-select: none;
}
.faq-item .faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 360ms cubic-bezier(.2,.7,.2,1);
}
.faq-item .faq-a > div {
  overflow: hidden;
  min-height: 0;
}
.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}
.faq-item .faq-toggle {
  display: inline-block;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1);
}
.faq-item.is-open .faq-toggle {
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .faq-item .faq-a, .faq-item .faq-toggle { transition: none !important; }
}

/* ----- CTA button: animated handwritten underline ----- */
.cta-underline {
  position: relative;
  display: inline-block;
}
.cta-underline::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%;
  bottom: -2px;
  height: 5px;
  background:
    radial-gradient(circle at 4px 50%, var(--accent-1) 1.5px, transparent 2px) repeat-x;
  background-size: 8px 5px;
  opacity: .85;
  animation: cta-undulate 2.4s ease-in-out infinite;
  transform-origin: left;
}
@keyframes cta-undulate {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50%      { transform: translateY(2px) scaleX(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-underline::after { animation: none !important; }
}

/* ----- walking character along scroll ----- */
.walker {
  position: fixed;
  bottom: 14px;
  left: var(--walker-x, -80px);
  width: 56px; height: 56px;
  pointer-events: none;
  z-index: 50;
  transition: left 120ms linear;
  opacity: .8;
}
.walker .walker-body {
  animation: walker-bob .55s ease-in-out infinite;
  transform-origin: 50% 80%;
}
@keyframes walker-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-3px) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .walker { display: none; }
}