/* simply alice candle co. — "Candle Glow" signature motion. */

/* ---------------------------------------------------------------------
   Intro — deep plum curtain, a flame lights and flickers over the
   wordmark, then the curtain lifts. Covers the site from the first
   frame (markup is inlined by the layout; keyframes live here).
--------------------------------------------------------------------- */
#flame-intro {
  position: fixed;
  top: 0; left: 0; right: 0; height: 100svh;
  z-index: 9999;
  background:
    radial-gradient(ellipse 55% 40% at 50% 42%, rgba(227,154,45,.22) 0, transparent 70%),
    linear-gradient(160deg, #452A40, var(--plum) 55%, var(--plum-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  animation: intro-curtain 0.7s cubic-bezier(.65,0,.35,1) 2.15s forwards;
}
#flame-intro.intro-done { display: none; }
#flame-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;
}
#flame-intro .intro-flame {
  width: 54px; height: 76px;
  filter: drop-shadow(0 0 26px rgba(227,154,45,.65));
  opacity: 0;
  animation: intro-flame-in 0.7s ease-out 0.25s forwards;
}
#flame-intro .intro-wordmark {
  font-family: 'Trirong', Georgia, serif;
  font-size: 30px;
  color: var(--cream);
  letter-spacing: .01em;
}
#flame-intro .intro-wordmark .script-word {
  font-family: 'Pinyon Script', cursive;
  font-size: 42px;
  color: var(--flame);
}
#flame-intro .intro-tag {
  font-size: 13.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--tan);
}
@keyframes intro-flame-in {
  from { opacity: 0; transform: scale(0.4) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@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; }
}

/* ---------------------------------------------------------------------
   Product card hover: gentle lift + warm glow
--------------------------------------------------------------------- */
.product-card { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
.product-card:hover, .product-card:focus-within { transform: translateY(-5px); box-shadow: 0 18px 34px rgba(57,31,54,.22); }

/* ---------------------------------------------------------------------
   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(42,21,38,.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(42,21,38,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  z-index: 499;
}
#cart-backdrop.open { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------------
   Order success — the flame lights up once
--------------------------------------------------------------------- */
.success-flame { width: 64px; height: 90px; animation: success-light 0.9s cubic-bezier(.3,1.5,.4,1) both; }
@keyframes success-light {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); 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(--plum);
  color: #fff;
  font-size: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(57,31,54,.45);
  border: none;
  cursor: pointer;
}
@media (max-width: 760px) { #cart-bubble-mobile { display: flex; } }