/* css/doodle-animations.css — Doodle Hand & Scroll Animations */

/* ══════════════════════════════════════════
   DOODLE HAND DRAWING ANIMATIONS
══════════════════════════════════════════ */

/* Animated SVG underline that draws itself */
.doodle-underline {
  position: relative;
  display: inline-block;
}
.doodle-underline svg {
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}
.doodle-underline path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.doodle-underline.drawn path {
  stroke-dashoffset: 0;
}

/* Doodle circle around CTA */
.doodle-circle-wrap {
  position: relative;
  display: inline-block;
}
.doodle-circle-wrap svg.doodle-ring {
  position: absolute;
  top: -12px; left: -16px;
  width: calc(100% + 32px);
  height: calc(100% + 24px);
  pointer-events: none;
  overflow: visible;
}
.doodle-ring path, .doodle-ring ellipse {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
.doodle-ring.drawn path,
.doodle-ring.drawn ellipse {
  stroke-dashoffset: 0;
}

/* ══════════════════════════════════════════
   FLOATING DOODLE HAND CURSOR
══════════════════════════════════════════ */
.doodle-hand-container {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: left 0.08s linear, top 0.08s linear;
  display: none;
}
.doodle-hand-container.active {
  display: block;
}
.doodle-hand-container svg {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

/* ══════════════════════════════════════════
   SCROLL-TRIGGERED DOODLE DRAWS
══════════════════════════════════════════ */

/* Section header doodle squiggle */
.section-doodle-line {
  display: block;
  height: 6px;
  margin: 8px auto 0;
  max-width: 180px;
  overflow: visible;
}
.section-doodle-line path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  transition: stroke-dashoffset 1s ease 0.4s;
}
.section-doodle-line.drawn path {
  stroke-dashoffset: 0;
}

/* Doodle arrow that appears on scroll */
.doodle-scroll-arrow {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  display: inline-block;
}
.doodle-scroll-arrow.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Hand-drawing effect for feature cards */
.feature-card-draw {
  position: relative;
}
.feature-card-draw::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.5s ease;
}
.feature-card-draw.drawn::after {
  border-color: rgba(108, 99, 255, 0.3);
}

/* ══════════════════════════════════════════
   ANIMATED DOODLE HAND SVG (scroll-triggered)
══════════════════════════════════════════ */
.doodle-hand-section {
  position: relative;
  overflow: visible;
}
.doodle-hand-draw {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.doodle-hand-draw.show { opacity: 1; }

/* Drawing path animation */
.draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.draw-path.drawing {
  animation: drawLine 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* Wiggle animation for doodle elements */
@keyframes doodleWiggle {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  25% { transform: rotate(2deg) scale(1.02); }
  75% { transform: rotate(-1deg) scale(0.99); }
}
.doodle-wiggle {
  animation: doodleWiggle 4s ease-in-out infinite;
  transform-origin: center;
}

/* Pen/pencil trail effect */
.pen-trail {
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(108, 99, 255, 0.6);
  transform: translate(-50%, -50%);
  display: none;
}

/* Section badge with doodle underline */
.section-label-wrap {
  display: inline-block;
  position: relative;
}

/* Bounce in animation for doodle icons */
@keyframes doodleBounce {
  0% { transform: scale(0) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(5deg); opacity: 1; }
  80% { transform: scale(0.9) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.doodle-bounce-in {
  opacity: 0;
}
.doodle-bounce-in.bounced {
  animation: doodleBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ══════════════════════════════════════════
   DOODLE FLOATING ELEMENTS (scroll parallax)
══════════════════════════════════════════ */
.doodle-parallax {
  position: absolute;
  pointer-events: none;
  will-change: transform;
}

/* Chalk text effect */
.chalk-text {
  font-family: 'Caveat', cursive;
  position: relative;
}
.chalk-text::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 3px rgba(255, 217, 61, 0.15);
  filter: blur(1px);
  pointer-events: none;
}

/* ══════════════════════════════════════════
   DOODLE HAND WRITING ANIMATION (section reveal)
══════════════════════════════════════════ */
.handwrite-line {
  overflow: hidden;
  white-space: nowrap;
}
.handwrite-line.reveal-text {
  animation: typeIn 1.2s steps(30) forwards;
}
@keyframes typeIn {
  from { width: 0; }
  to { width: 100%; }
}

/* Scribble highlight */
.scribble-highlight {
  background: linear-gradient(120deg, rgba(255,217,61,0.25) 0%, rgba(255,217,61,0.25) 100%);
  background-repeat: no-repeat;
  background-size: 0% 60%;
  background-position: 0 90%;
  transition: background-size 0.8s ease 0.3s;
  padding: 0 4px;
  border-radius: 2px;
}
.scribble-highlight.highlighted {
  background-size: 100% 60%;
}
/* ══════════════════════════════════════════
   DOODLE FACE DRAWING & COLORING ANIMATION
══════════════════════════════════════════ */
.doodle-face-anim-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  position: relative;
  width: 100%;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1/1;
}

.doodle-face-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: #fdfdfd; /* Off-white paper color */
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  transform: rotate(2deg); /* Sketchy hand-placed feel */
  transition: transform 0.5s ease;
}
.doodle-face-anim-container:hover .doodle-face-wrap {
  transform: rotate(0deg) scale(1.02);
}

.doodle-face-bw,
.doodle-face-color {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.doodle-face-bw {
  z-index: 2;
  opacity: 1;
  /* Mask for drawing effect */
  clip-path: inset(0 100% 0 0); /* Start hidden */
  transition: opacity 0.5s ease 3s; /* Fade out after coloring starts */
}

.doodle-face-color {
  z-index: 1;
  opacity: 0;
  transition: opacity 1.5s ease-in-out 2.5s; /* Fade in color after sketch */
}

/* The Drawing Hand */
.doodle-drawing-hand {
  position: absolute;
  z-index: 10;
  font-size: 40px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* Animation Classes */
.doodle-face-anim-container.active .doodle-face-bw {
  animation: doodleSketchReveal 2.5s steps(40) forwards;
}

.doodle-face-anim-container.active .doodle-face-color {
  opacity: 1;
}

.doodle-face-anim-container.active .doodle-drawing-hand {
  animation: 
    doodleHandDrawMove 2.5s linear forwards,
    doodleHandWiggle 0.15s infinite alternate;
}

@keyframes doodleSketchReveal {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes doodleHandDrawMove {
  0% { opacity: 1; left: 0%; top: 20%; }
  10% { left: 20%; top: 40%; }
  25% { left: 50%; top: 10%; }
  40% { left: 80%; top: 40%; }
  60% { left: 60%; top: 70%; }
  80% { left: 30%; top: 80%; }
  95% { left: 50%; top: 50%; opacity: 1; }
  100% { left: 100%; top: 100%; opacity: 0; }
}

@keyframes doodleHandWiggle {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -48%) rotate(5deg); }
}