/* Cinna-Roller signature motion: "The Swirl".
   Pre-paint cover: the inline head script adds .cr-swirl-pending to <html>
   before first paint on the home path when the intro will play; this cover
   (in the shop's own blue) hides the page until motion.js takes over. */
html.cr-swirl-pending body::before {
  content: ""; position: fixed; inset: 0; z-index: 240; pointer-events: none;
  background: #167AFF;
  animation: cr-precover-failsafe .6s ease 4.6s forwards;
}
@keyframes cr-precover-failsafe { to { opacity: 0; visibility: hidden; } }

.cr-veil {
  position: fixed; inset: 0; z-index: 250; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(70% 55% at 50% 38%, #3B93FF 0%, #167AFF 58%, #0F5CC4 100%);
  transition: opacity .55s ease, visibility .55s;
}
.cr-veil.cr-done { opacity: 0; visibility: hidden; }
.cr-veil .cr-swirl { width: 120px; height: 120px; }
.cr-veil .cr-swirl path {
  stroke: #FFFFFF; stroke-width: 7; fill: none; stroke-linecap: round;
  stroke-dasharray: 640; stroke-dashoffset: 640;
  animation: cr-draw 1.15s ease-out .1s forwards;
}
@keyframes cr-draw { to { stroke-dashoffset: 0; } }
.cr-veil .cr-logo { width: min(420px, 78vw); height: auto; opacity: 0; transform: scale(.86); animation: cr-pop .5s cubic-bezier(.2,1.6,.4,1) .95s forwards; }
@keyframes cr-pop { to { opacity: 1; transform: scale(1); } }
.cr-veil .cr-tag { color: #FFFFFF; font-family: var(--hand, cursive); font-size: 1.5rem; opacity: 0; animation: cr-pop .4s ease 1.35s forwards; }

.cr-spin-btn {
  position: absolute; right: 14px; bottom: 14px; width: 52px; height: 52px; border-radius: 50%;
  border: 3px solid #FFFFFF; background: #167AFF; cursor: pointer; padding: 9px;
  box-shadow: 0 6px 16px rgba(51,36,26,.35); z-index: 3;
}
.cr-spin-btn svg { width: 100%; height: 100%; display: block; }
.cr-spin-btn.cr-spinning svg { animation: cr-spin .8s cubic-bezier(.3,.7,.4,1); }
@keyframes cr-spin { 0% { transform: rotate(0); } 100% { transform: rotate(720deg); } }
.cr-fresh {
  position: fixed; z-index: 260; pointer-events: none; color: #167AFF;
  font-family: var(--hand, cursive); font-size: 1.6rem; font-weight: 700;
  transform: translate(-50%, 0); animation: cr-fresh 1.15s ease-out forwards;
  text-shadow: 0 2px 0 #FFFFFF, 0 0 12px rgba(255,255,255,.8);
}
@keyframes cr-fresh { 0% { opacity: 0; transform: translate(-50%, 8px); } 18% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -46px); } }

.cr-ready {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px;
  background: #167AFF; color: #FFFFFF; font-family: var(--display, sans-serif);
  border-radius: 999px; padding: 6px 16px 8px; font-size: 1.05rem;
  animation: cr-ready-pop .45s cubic-bezier(.2,1.6,.4,1);
}
.cr-ready svg { width: 20px; height: 20px; }
.cr-ready svg path { stroke: #FFFFFF; stroke-width: 8; fill: none; stroke-linecap: round; }
@keyframes cr-ready-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .cr-veil, .cr-spin-btn, .cr-fresh, .cr-ready { display: none !important; }
  html.cr-swirl-pending body::before { display: none !important; }
}