/* ==========================================================
   TakoshiCA - motion layer
   Additive only. Loaded on top of style.css.
   Effects: pill-pop, scribble, wash, size-card pop,
   CTA punch, page-2 timeline, success celebration.
   ========================================================== */
:root { --tk-spring: cubic-bezier(.34,1.56,.64,1); }

/* [2] Filling / sauce pill pop */
.pill-filling, .pill-btn.sauce{
  transition:transform .35s var(--tk-spring), background .2s ease, color .2s ease, box-shadow .3s ease !important;
}
.pill-filling.selected, .pill-btn.sauce.selected{
  transform:scale(1.09);
  box-shadow:0 8px 20px rgba(194,96,74,.32);
}
.pill-filling.selected{ animation:tk-pop .42s var(--tk-spring); }
@keyframes tk-pop{ 0%{transform:scale(1);} 55%{transform:scale(1.17);} 100%{transform:scale(1.09);} }

/* [3] Hand-drawn circle accent */
.tk-scrib-word{ position:relative; white-space:nowrap; color:var(--terracotta); }
.tk-scrib{
  position:absolute; left:-12px; top:-8px;
  width:calc(100% + 24px); height:calc(100% + 16px);
  overflow:visible; pointer-events:none;
}
.tk-scrib path{
  fill:none; stroke:var(--terracotta); stroke-width:2.6;
  stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1;
}
.tk-scrib.go path{ animation:tk-draw .95s ease-out forwards; }
@keyframes tk-draw{ to{ stroke-dashoffset:0; } }

/* [4] Color-block wash */
.tk-wash{ position:relative; transition:background .9s ease; }
.tk-wash--in{
  background:radial-gradient(130% 95% at 50% 0%, rgba(194,96,74,.12), rgba(192,122,58,.05) 45%, transparent 70%);
}

/* [5] Size cards: hover lift + select pop (page 1) */
.size-card{
  transition:transform .32s var(--tk-spring), box-shadow .3s ease, border-color .2s ease !important;
}
.size-card:hover{ transform:translateY(-3px); }
.size-card.selected{ transform:scale(1.03); animation:tk-pop-sm .42s var(--tk-spring); }
@keyframes tk-pop-sm{ 0%{transform:scale(1);} 55%{transform:scale(1.06);} 100%{transform:scale(1.03);} }

/* [6] CTA punch (page 1 + page 2) */
.cta-btn{
  transition:transform .28s var(--tk-spring), box-shadow .3s ease, background .2s ease !important;
}
.cta-btn:hover{ transform:translateY(-2px) scale(1.02); box-shadow:0 12px 30px rgba(194,96,74,.34); }
.cta-btn:active{ transform:translateY(0) scale(.99); }

/* [7] Page 2 timeline: numbers pop + connector draws */
.tl-item .tl-num{ transition:transform .5s var(--tk-spring), opacity .4s ease; }
.tl-item.reveal-item:not(.revealed) .tl-num{ transform:scale(.55); opacity:0; }
.tl-item.revealed .tl-num{ transform:scale(1); opacity:1; }
.tl-item .tl-line{ transform:scaleY(0); transform-origin:top center; transition:transform .6s ease .15s; }
.tl-item.revealed .tl-line{ transform:scaleY(1); }

/* [8] Success popup celebration */
#successMsg.tk-celebrate > *:not(.check):not(.tk-confetti){
  opacity:0; transform:translateY(12px); animation:tk-rise .5s ease forwards;
}
#successMsg.tk-celebrate > *:nth-child(2){ animation-delay:.16s; }
#successMsg.tk-celebrate > *:nth-child(3){ animation-delay:.23s; }
#successMsg.tk-celebrate > *:nth-child(4){ animation-delay:.30s; }
#successMsg.tk-celebrate > *:nth-child(5){ animation-delay:.37s; }
#successMsg.tk-celebrate > *:nth-child(6){ animation-delay:.44s; }
#successMsg.tk-celebrate > *:nth-child(7){ animation-delay:.51s; }
#successMsg.tk-celebrate > *:nth-child(8){ animation-delay:.58s; }
#successMsg.tk-celebrate > *:nth-child(n+9){ animation-delay:.64s; }
@keyframes tk-rise{ to{ opacity:1; transform:none; } }

#successMsg{ position:relative; }
.check{ position:relative; }
#successMsg.tk-celebrate .check{ width:56px; height:56px; margin:0 auto 16px; animation:tk-check-pop .5s var(--tk-spring) both; }
@keyframes tk-check-pop{ 0%{transform:scale(0);} 60%{transform:scale(1.15);} 100%{transform:scale(1);} }
#successMsg.tk-celebrate .check::before{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid var(--terracotta); opacity:.6; pointer-events:none;
  animation:tk-ring .75s ease-out forwards;
}
@keyframes tk-ring{ from{ transform:scale(.6); opacity:.6; } to{ transform:scale(1.9); opacity:0; } }
.tk-check-svg{ width:100%; height:100%; display:block; }
.tk-check-svg path{
  fill:none; stroke:currentColor; stroke-width:5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:1; stroke-dashoffset:1; animation:tk-draw .5s .12s ease-out forwards;
}
.tk-confetti{
  position:absolute; top:38px; left:50%; width:8px; height:8px; border-radius:2px;
  pointer-events:none; opacity:0; transform:translate(-50%,-50%);
  animation:tk-confetti .85s ease-out forwards;
}
@keyframes tk-confetti{
  0%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.4) rotate(160deg); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .tk-scrib path{ stroke-dashoffset:0; }
  .pill-filling.selected, .size-card.selected{ animation:none; }
  .tl-item .tl-line{ transform:scaleY(1); }
  .tl-item .tl-num{ transform:none; opacity:1; }
  #successMsg.tk-celebrate > *{ opacity:1; transform:none; animation:none; }
  .tk-check-svg path{ stroke-dashoffset:0; animation:none; }
  .tk-confetti{ display:none; }
}