/* CRAZIFY motion layer — playful, physical motion. No fades: things pop, swing, wobble and stamp in. */

/* ---------- hand-drawn button geometry ---------- */
.cta-face-css,
#stage-02a #cta-upload-photo,
#cta-create-my-art,
#stage-case-guide .case-guide-cta,
#stage-02b #cta-love-it,
#stage-02b #cta-try-again {
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; /* marker-drawn pill */
}
#cta-create-my-art { border-radius: 18px 255px 18px 225px / 225px 18px 255px 18px; }
#stage-02b #cta-try-again { border-radius: 18px 225px 18px 255px / 255px 18px 225px 18px; }
#stage-02a #cta-upload-photo { rotate: 2.2deg; }
#cta-create-my-art { rotate: -1.4deg; }
#cta-classic { rotate: -1.2deg; }
#cta-wild { rotate: 0.9deg; }
#cta-insane { rotate: -0.7deg; }
#stage-02b #cta-love-it { rotate: -1deg; }
#stage-02b #cta-try-again { rotate: 1.2deg; }


/* ---------- idle motion (continuous) ---------- */
@keyframes cz-heartbeat {
  0%, 72%, 100% { scale: 1; }
  78% { scale: 1.06; }
  86% { scale: 0.98; }
  92% { scale: 1.03; }
}
@keyframes cz-wobble {
  0%, 100% { rotate: var(--base-rot, 0deg); }
  25% { rotate: calc(var(--base-rot, 0deg) - 1.6deg); }
  75% { rotate: calc(var(--base-rot, 0deg) + 1.6deg); }
}
@keyframes cz-swing {
  0%, 100% { transform: rotate(calc(var(--rot, 0deg) - 1.1deg)); }
  50% { transform: rotate(calc(var(--rot, 0deg) + 1.1deg)); }
}
@keyframes cz-float {
  0%, 100% { translate: 0 0; rotate: -3deg; }
  50% { translate: 0 -2.5cqw; rotate: 3deg; }
}
@keyframes cz-breathe {
  0%, 100% { scale: 1; }
  50% { scale: 1.018; }
}
@keyframes cz-arrow-nudge {
  0%, 100% { translate: 0 0; }
  50% { translate: 6% 0; }
}
@keyframes cz-arrow-nudge-l {
  0%, 100% { translate: 0 0; }
  50% { translate: -6% 0; }
}
@keyframes cz-sway {
  0%, 100% { rotate: -0.6deg; }
  50% { rotate: 0.6deg; }
}

/* painted canvases stay pixel-exact at their edges: no breathe, no parallax (text sits at the edges) */

/* primary CTAs beat, staggered so the page never beats in unison */
#stage-01 .cta-crop { animation: cz-heartbeat 3.4s ease-in-out infinite; }
#stage-02a #cta-upload-photo:not(:disabled) { animation: cz-heartbeat 3.4s 0.6s ease-in-out infinite; }
#cta-create-my-art:not(:disabled) { animation: cz-heartbeat 3.4s 1.1s ease-in-out infinite; }
#stage-02b #cta-love-it:not(:disabled) { animation: cz-heartbeat 3.4s 0.3s ease-in-out infinite; }
#stage-case-guide .case-guide-cta:nth-of-type(1) { animation: cz-heartbeat 3.6s 0s ease-in-out infinite; }
#stage-04 .cta-face { animation: cz-heartbeat 3.4s 0.8s ease-in-out infinite; }
#stage-04 .hit-cta:disabled .cta-face { animation: none; }

/* the uploaded photo hangs from its clip and swings */
#stage-02a .photo-card:not([hidden]) {
  transform-origin: 50% -4%;
  animation: cz-swing 5.2s ease-in-out infinite;
}
/* result artwork sways very slightly, like a print held in hand */
#stage-02b .result-art-wrap { animation: cz-sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
/* little hand-drawn arrows nudge toward the CTA */
#stage-03a .cta-arrow-left svg { animation: cz-arrow-nudge 1.6s ease-in-out infinite; }
#stage-03a .cta-arrow-right svg { animation: cz-arrow-nudge-l 1.6s ease-in-out infinite; }
/* case-guide phones float */
.guide-art-clear .guide-phone { animation: cz-float 4.6s ease-in-out infinite; }
.guide-art-tough .guide-phone { animation: cz-float 5.2s -1.7s ease-in-out infinite; }
.guide-art-magsafe .guide-phone { animation: cz-float 4.9s -3.1s ease-in-out infinite; }
.guide-ring { animation: cz-breathe 2.4s ease-in-out infinite; }

/* ---------- hover / press feel ---------- */
@media (hover: hover) and (pointer: fine) {
  #stage-02a .hit:hover:not(:disabled),
  #stage-02b .hit:hover:not(:disabled),
  #stage-03a .hit:hover:not(:disabled),
  #stage-03b .hit:hover:not(:disabled),
  #stage-case-guide .case-guide-cta:hover:not(:disabled) {
    translate: 0 -3px;
    filter: brightness(1.08) drop-shadow(0 8px 10px rgba(40, 24, 16, 0.22));
  }
  #stage-01:has(#cta-create-mine:hover) .cta-crop { translate: 0 -3px; }
}
#stage-02a .hit:active:not(:disabled),
#stage-02b .hit:active:not(:disabled),
#stage-03a .hit:active:not(:disabled),
#stage-03b .hit:active:not(:disabled),
#stage-case-guide .case-guide-cta:active:not(:disabled) {
  transform: translateY(2px) scale(0.96, 0.93);
  transition-duration: 60ms;
}

/* ---------- scroll reveal (pop / stamp / slide — never fade) ---------- */
@keyframes cz-stamp {
  0% { transform: scale(1.08) rotate(0.8deg); }
  60% { transform: scale(0.992) rotate(-0.2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes cz-pop {
  0% { scale: 0.001; }
  60% { scale: 1.12; }
  80% { scale: 0.96; }
  100% { scale: 1; }
}
@keyframes cz-slide-left {
  0% { translate: -120% 0; rotate: -8deg; }
  70% { translate: 3% 0; rotate: 1deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
@keyframes cz-slide-right {
  0% { translate: 120% 0; rotate: 8deg; }
  70% { translate: -3% 0; rotate: -1deg; }
  100% { translate: 0 0; rotate: 0deg; }
}
@keyframes cz-drop {
  0% { translate: 0 -140%; }
  55% { translate: 0 6%; }
  75% { translate: 0 -3%; }
  100% { translate: 0 0; }
}
@keyframes cz-rise {
  0% { translate: 0 60%; }
  70% { translate: 0 -3%; }
  100% { translate: 0 0; }
}

/* before reveal: hidden by geometry (clip + offset), never by opacity */
.cz-reveal:not(.cz-in) { clip-path: inset(50% round 999px); }
.cz-reveal.cz-in { clip-path: none; animation: cz-pop 0.7s cubic-bezier(.2,.9,.3,1.2) both; }
.cz-reveal.cz-rise:not(.cz-in) { clip-path: inset(100% 0 0 0); translate: 0 40%; }
.cz-reveal.cz-rise.cz-in { animation: cz-rise 0.65s cubic-bezier(.2,.8,.2,1) both; }
.cz-reveal.cz-left:not(.cz-in) { clip-path: inset(0 100% 0 0); translate: -40% 0; }
.cz-reveal.cz-left.cz-in { animation: cz-slide-left 0.7s cubic-bezier(.2,.8,.2,1) both; }
.cz-reveal.cz-right:not(.cz-in) { clip-path: inset(0 0 0 100%); translate: 40% 0; }
.cz-reveal.cz-right.cz-in { animation: cz-slide-right 0.7s cubic-bezier(.2,.8,.2,1) both; }
.cz-reveal.cz-drop:not(.cz-in) { clip-path: inset(0 0 100% 0); translate: 0 -60%; }
.cz-reveal.cz-drop.cz-in { animation: cz-drop 0.7s cubic-bezier(.3,.7,.3,1) both; }
.cz-stamp.cz-in .clean-canvas { animation: cz-stamp 0.9s cubic-bezier(.2,.8,.2,1) both; }

/* elements that also beat: reveal + idle in one declaration (id selectors would otherwise win) */
#stage-01 .cta-crop.cz-in { animation: cz-drop 0.7s cubic-bezier(.3,.7,.3,1) both, cz-heartbeat 3.4s 1s ease-in-out infinite; }
#stage-02a #cta-upload-photo.cz-in:not(:disabled) { animation: cz-drop 0.7s cubic-bezier(.3,.7,.3,1) both, cz-heartbeat 3.4s 1.4s ease-in-out infinite; }
#cta-create-my-art.cz-in:not(:disabled) { animation: cz-rise 0.65s cubic-bezier(.2,.8,.2,1) both, cz-heartbeat 3.4s 1.6s ease-in-out infinite; }
#cta-create-my-art.cz-in:disabled { animation: cz-rise 0.65s cubic-bezier(.2,.8,.2,1) both; }
#stage-02a .photo-card.cz-in:not([hidden]) { animation: cz-drop 0.8s cubic-bezier(.3,.7,.3,1) both, cz-swing 5.2s 0.8s ease-in-out infinite; }

/* the reveal classes stagger through a CSS variable set by motion.js */
.cz-reveal { animation-delay: calc(var(--cz-i, 0) * 90ms) !important; }

/* parallax on painted canvases (motion.js sets --cz-par) */


/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .cz-reveal:not(.cz-in), .cz-reveal.cz-rise:not(.cz-in), .cz-reveal.cz-left:not(.cz-in), .cz-reveal.cz-right:not(.cz-in), .cz-reveal.cz-drop:not(.cz-in) { scale: 1; translate: 0 0; clip-path: none; }
  .stage.cz-parallax .clean-canvas { translate: 0 0; }
}