/* ACDZ Creations — "Pastel Thread" signature motion.
   Sites animate regardless of OS reduced-motion settings — no
   prefers-reduced-motion opt-outs here on purpose. */

/* ---------------------------------------------------------------------
   Intro — cream linen curtain, her real wordmark on a stitched plaque,
   a pink thread that flows underneath, then the curtain lifts. Covers
   the site from the very first frame (markup + base styles are in the
   page, this file adds the keyframes once it loads).
--------------------------------------------------------------------- */
#acdz-intro {
  position: fixed;
  top: 0; left: 0; right: 0; height: 100svh;
  z-index: 9999;
  background:
    radial-gradient(circle at 15% 20%, rgba(217,79,112,.10) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(110,151,174,.10) 0, transparent 45%),
    repeating-linear-gradient(0deg, rgba(122,106,95,.05) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(122,106,95,.05) 0 1px, transparent 1px 5px),
    #FBF6EE;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: intro-curtain 0.7s cubic-bezier(.65,0,.35,1) 2.3s forwards;
}
#acdz-intro.intro-done { display: none; }
#acdz-intro .intro-frame {
  position: absolute;
  inset: 18px;
  border: 3px dashed rgba(217,79,112,.55);
  border-radius: 18px;
  opacity: 0;
  animation: intro-frame-in 0.6s ease-out 0.15s forwards;
}
#acdz-intro .intro-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  animation: intro-stage-in 0.5s ease-out 0.05s forwards;
}
#acdz-intro .intro-plaque {
  background: #fff;
  border-radius: 16px;
  padding: 14px 22px;
  box-shadow: 0 14px 40px rgba(56,50,46,.22);
  border: 1px dashed rgba(217,79,112,.4);
  opacity: 0;
  animation: intro-logo-in 0.9s cubic-bezier(.3,1.3,.4,1) 0.2s forwards;
}
#acdz-intro .intro-plaque img { display: block; width: min(340px, 72vw); height: auto; }
#acdz-intro .intro-thread { width: min(300px, 64vw); height: 24px; opacity: 0; animation: intro-stage-in 0.5s ease-out 0.8s forwards; }
#acdz-intro .intro-thread path { animation: thread-march 1.1s linear infinite; }
#acdz-intro .intro-tag {
  font-family: 'Homemade Apple', cursive;
  font-size: 15px;
  color: #B93A5C;
  opacity: 0;
  animation: intro-stage-in 0.5s ease-out 1.05s forwards;
}
@keyframes intro-logo-in {
  from { opacity: 0; transform: translateY(14px) scale(0.92) rotate(-1.5deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}
@keyframes thread-march { to { stroke-dashoffset: -17; } }
@keyframes intro-frame-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@keyframes intro-stage-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-curtain {
  to { transform: translateY(-100%); visibility: hidden; }
}

/* ---------------------------------------------------------------------
   Hero photo gentle float
--------------------------------------------------------------------- */
.hero-float { animation: hero-float 5.5s ease-in-out infinite; }
@keyframes hero-float {
  0%, 100% { transform: translateY(0) rotate(-0.4deg); }
  50% { transform: translateY(-10px) rotate(0.4deg); }
}

/* ---------------------------------------------------------------------
   Hero stitch frame — a needle rides the dashed frame line around the
   hero photo, bobbing like a real machine needle while the pastel
   stitches appear behind it (mask reveal synced to the needle's 11s
   circuit by the sew-sync script: sews 0-78%, rests complete, fades,
   restarts). A faint dotted guide line shows the full frame throughout.
--------------------------------------------------------------------- */
.hero-photo-frame { position: relative; display: inline-block; }
.stitch-machine-svg {
  position: absolute; inset: -16px; width: calc(100% + 32px); height: calc(100% + 32px);
  pointer-events: none; overflow: visible;
}
.stitch-machine-svg .frame-guide {
  fill: none; stroke: var(--pink); stroke-width: 4.2; opacity: .22;
  stroke-linecap: round;
}
.stitch-machine-svg .frame-stitches {
  fill: none; stroke: var(--pink); stroke-width: 4.2; stroke-linecap: round;
  stroke-dasharray: 0.7 0.5;
}
.stitch-machine-svg .frame-mask-draw {
  stroke-dasharray: 100; stroke-dashoffset: 100;
}
.stitch-machine-svg .needle-bob { animation: needle-bob .1s ease-in-out infinite; }
@keyframes needle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3.6px); }
}

/* ---------------------------------------------------------------------
   Product card hover: lift + shadow + shine sweep
--------------------------------------------------------------------- */
.product-card { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover, .product-card:focus-within { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(56,50,46,.26); }
.product-card .shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  background-size: 250% 250%;
  background-position: -120% -120%;
  transition: background-position .65s ease;
}
.product-card:hover .shine, .product-card:focus-within .shine { background-position: 120% 120%; }

/* ---------------------------------------------------------------------
   Cart bubble bounce + drawer slide
--------------------------------------------------------------------- */
@keyframes cart-bounce {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(1.28); }
  55% { transform: scale(0.92); }
  75% { transform: scale(1.08); }
}
.cart-bump { animation: cart-bounce 0.5s ease; }

#cart-drawer {
  position: fixed;
  top: 0; right: 0; height: 100svh;
  width: min(420px, 100vw);
  background: var(--cream);
  box-shadow: -14px 0 40px rgba(56,50,46,.35);
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.3,.9,.3,1);
  z-index: 500;
  display: flex;
  flex-direction: column;
}
#cart-drawer.open { transform: translateX(0); }
#cart-backdrop {
  position: fixed; inset: 0; background: rgba(56,50,46,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  z-index: 499;
}
#cart-backdrop.open { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------------
   Order success — stitched heart pops in
--------------------------------------------------------------------- */
.success-heart { width: 86px; height: 80px; animation: success-pop 0.9s cubic-bezier(.3,1.5,.4,1) both; }
@keyframes success-pop {
  0% { transform: scale(0.5) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ---------------------------------------------------------------------
   Floating mobile cart bubble
--------------------------------------------------------------------- */
#cart-bubble-mobile {
  position: fixed;
  bottom: 18px; right: 18px;
  z-index: 480;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  font-size: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(217,79,112,.5);
  border: none;
  cursor: pointer;
}
@media (max-width: 760px) { #cart-bubble-mobile { display: flex; } }