/* Candy Doodle motion layer — hero3d, preloader, SVG sugar-line draws */

/* ── Hero 3D mount ─────────────────────────────────────────────── */
.hero3d {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 220px;
  max-height: 72vh;
  overflow: hidden;
  border-radius: 1.25rem;
  background: linear-gradient(160deg, #fdf2f8 0%, #f3e8ff 45%, #ede9fe 100%);
}

.hero3d__fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  z-index: 1;
}

.hero3d canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
  z-index: 2;
}

.hero3d[data-state="ready"] canvas {
  opacity: 1;
}

.hero3d[data-state="ready"] .hero3d__fallback {
  display: none;
}

/* ── Preloader ───────────────────────────────────────────────────── */
.cd-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #fdf2f8 0%, #f3e8ff 100%);
  pointer-events: auto;
  transition: opacity 0.35s ease;
}

.cd-preloader.is-fading {
  opacity: 0;
  pointer-events: none;
}

.cd-preloader.is-done {
  display: none;
}

.cd-preloader__svg {
  width: min(72px, 18vw);
  height: min(72px, 18vw);
}

.cd-preloader__path {
  fill: none;
  stroke: #e8b563;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#cd-sugar-glow);
}

/* ── Inline SVG sugar-line draw ──────────────────────────────────── */
.sugar-line {
  fill: none;
  stroke: #e8b563;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sugar-line--glow {
  filter: url(#cd-sugar-glow);
}

[data-doodle-draw] path,
[data-doodle-draw] line,
[data-doodle-draw] polyline,
[data-doodle-draw] circle {
  fill: none;
  stroke: #e8b563;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-doodle-draw].is-drawn path,
[data-doodle-draw].is-drawn line,
[data-doodle-draw].is-drawn polyline,
[data-doodle-draw].is-drawn circle {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hero3d canvas,
  .hero3d__fallback,
  .cd-preloader {
    transition: none;
  }
}