/* Alumi Candle — "Soft Glow" signature motion.
   Sites animate regardless of OS reduced-motion settings — no
   prefers-reduced-motion opt-outs here on purpose. */

/* ---------------------------------------------------------------------
   Intro — warm ivory veil, her real logo rises into a soft amber halo,
   then the curtain lifts. Covers the site from the very first frame
   (markup + critical CSS are inlined in <head>, this file only adds the
   keyframes once it loads — by which point nothing has painted yet).
--------------------------------------------------------------------- */
#glow-intro {
  position: fixed;
  top: 0; left: 0; right: 0; height: 100svh;
  z-index: 9999;
  background:
    radial-gradient(ellipse 55% 40% at 50% 42%, rgba(233,161,59,.28) 0, transparent 70%),
    linear-gradient(165deg, #FDFAF3, var(--cream) 60%, #F3E9D2);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: intro-curtain 0.7s cubic-bezier(.65,0,.35,1) 2.15s forwards;
}
#glow-intro.intro-done { display: none; }
#glow-intro .intro-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
#glow-intro .intro-halo {
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233,161,59,.5) 0, rgba(233,161,59,0) 65%);
  opacity: 0;
  animation: intro-halo-bloom 1.6s ease-out 0.25s forwards;
}
#glow-intro .intro-logo {
  position: relative;
  width: min(430px, 78vw);
  height: auto;
  opacity: 0;
  animation: intro-logo-rise 0.9s cubic-bezier(.25,1,.35,1) 0.15s forwards;
}
#glow-intro .intro-line {
  position: relative;
  margin-top: 20px;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  color: var(--amber-deep);
  letter-spacing: .04em;
  opacity: 0;
  animation: intro-line-in 0.7s ease-out 0.85s forwards;
}
@keyframes intro-halo-bloom {
  0% { opacity: 0; transform: scale(0.55); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0.9; transform: scale(1); }
}
@keyframes intro-logo-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes intro-line-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes intro-curtain {
  to { transform: translateY(-100%); visibility: hidden; }
}

/* ---------------------------------------------------------------------
   Marquee ribbon
--------------------------------------------------------------------- */
.marquee-ribbon {
  overflow: hidden;
  background: var(--evergreen-deep);
  color: var(--cream);
  border-top: 2px solid var(--amber);
  border-bottom: 2px solid var(--amber);
  white-space: nowrap;
}
.marquee-ribbon .marquee-track {
  display: inline-flex;
  animation: marquee-scroll 140s linear infinite;
}
.marquee-ribbon .marquee-seg {
  display: inline-block;
  padding: 10px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0.03em;
  color: var(--amber-soft);
}
.marquee-ribbon .marquee-seg span.dot { color: var(--amber); margin: 0 18px; font-style: normal; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------
   Hero glow + flame — a warm halo breathes behind the arch photo while
   a small flame flickers above it, like the candle is already lit.
--------------------------------------------------------------------- */
.hero-arch::before {
  content: "";
  position: absolute;
  inset: -34px -24px;
  border-radius: 50%;
  background: radial-gradient(ellipse 60% 55% at 50% 38%, rgba(233,161,59,.38) 0, transparent 70%);
  animation: hero-glow-breathe 4.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes hero-glow-breathe {
  0%, 100% { opacity: .65; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}
.hero-flame { animation: flame-flicker 1.9s ease-in-out infinite; transform-origin: 50% 92%; }
@keyframes flame-flicker {
  0%, 100% { transform: translateX(-50%) scale(1) rotate(-1.4deg); }
  30% { transform: translateX(-50%) scale(1.06, 1.12) rotate(1.6deg); }
  55% { transform: translateX(-50%) scale(0.96, 0.94) rotate(-2deg); }
  78% { transform: translateX(-50%) scale(1.03, 1.08) rotate(1deg); }
}

/* ---------------------------------------------------------------------
   Product card hover: lift + shadow + shine sweep
--------------------------------------------------------------------- */
.product-card { position: relative; transition: transform .25s ease, box-shadow .25s ease; overflow: hidden; }
.product-card:hover, .product-card:focus-within { transform: translateY(-6px); box-shadow: 0 18px 34px rgba(46,38,32,.25); }
.product-card .shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 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(46,38,32,.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(46,38,32,.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 with soft glow puffs
--------------------------------------------------------------------- */
.success-flame { width: 52px; height: 70px; animation: success-light 0.9s cubic-bezier(.3,1.4,.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; }
}
.sparkle-puff {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); opacity: 0;
  animation: sparkle-out 0.8s ease-out both;
}
@keyframes sparkle-out {
  0% { opacity: 0; transform: translate(0,0) scale(0.4); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: var(--puff-end, translate(40px,-40px)) scale(1.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(--evergreen);
  color: #fff;
  font-size: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(71,98,79,.5);
  border: none;
  cursor: pointer;
}
@media (max-width: 760px) { #cart-bubble-mobile { display: flex; } }