/* Decorative bubbles/marquee bleed to the edges by design — never let
   them create sideways scroll on phones (QA 2026-11-08: 18px overflow). */
html, body { overflow-x: clip; }

/* Anchor jumps land below the sticky header, not under it. */
section[id], div[id="our-colors"] { scroll-margin-top: 96px; }

/* Soapmomento — "Bath Botanical" signature motion.
   Rising-bubble intro, bubble-ring hero, botanical marquee.
   Sites animate regardless of OS reduced-motion settings — no
   prefers-reduced-motion opt-outs here on purpose. */

/* ---------------------------------------------------------------------
   Intro — warm cream curtain with rising soap bubbles + her real logo,
   curtain lift. 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).
--------------------------------------------------------------------- */
#soap-intro {
  position: fixed;
  top: 0; left: 0; right: 0; height: 100svh;
  z-index: 9999;
  background: linear-gradient(155deg, #F7EADB, var(--cream) 55%, #EFE7D2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: intro-curtain 0.7s cubic-bezier(.65,0,.35,1) 2.3s forwards;
}
#soap-intro.intro-done { display: none; }
#soap-intro .intro-stage {
  position: relative;
  text-align: center;
  opacity: 0;
  animation: intro-stage-in 0.5s ease-out 0.05s forwards;
  padding: 0 20px;
}
#soap-intro .intro-plaque {
  background: #fff;
  border-radius: 18px;
  padding: 22px 30px;
  box-shadow: 0 14px 40px rgba(51,48,42,.22), 0 0 44px rgba(217,164,65,.35);
  opacity: 0;
  animation: intro-logo-in 0.9s cubic-bezier(.3,1.3,.4,1) 0.15s forwards;
}
#soap-intro .intro-plaque img { display: block; width: min(340px, 72vw); height: auto; }
#soap-intro .intro-tag {
  font-family: 'Caveat', cursive; font-size: 26px; font-weight: 700; color: var(--terra);
  margin: 18px 0 0; opacity: 0; animation: intro-stage-in 0.6s ease-out 0.9s forwards;
}
#soap-intro .intro-bubbles { position: absolute; inset: 0; pointer-events: none; }
#soap-intro .ib {
  position: absolute; bottom: -40px; border-radius: 50%;
  border: 2px solid rgba(76,91,57,.45);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(255,255,255,.25) 55%, rgba(217,161,132,.18));
  opacity: 0;
  animation: intro-bubble-rise 2.2s ease-in forwards;
}
#soap-intro .ib-1 { left: 8%;  width: 34px; height: 34px; animation-delay: .15s; }
#soap-intro .ib-2 { left: 20%; width: 18px; height: 18px; animation-delay: .55s; }
#soap-intro .ib-3 { left: 33%; width: 26px; height: 26px; animation-delay: .35s; }
#soap-intro .ib-4 { left: 52%; width: 15px; height: 15px; animation-delay: .8s; }
#soap-intro .ib-5 { left: 64%; width: 30px; height: 30px; animation-delay: .25s; }
#soap-intro .ib-6 { left: 76%; width: 20px; height: 20px; animation-delay: .65s; }
#soap-intro .ib-7 { left: 88%; width: 38px; height: 38px; animation-delay: .45s; }
#soap-intro .ib-8 { left: 44%; width: 12px; height: 12px; animation-delay: 1s; }
@keyframes intro-logo-in {
  from { opacity: 0; transform: translateY(16px) scale(.92); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes intro-stage-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-bubble-rise {
  0% { opacity: 0; transform: translateY(0) translateX(0); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translateY(-105svh) translateX(14px); }
}
@keyframes intro-curtain {
  to { transform: translateY(-100%); visibility: hidden; }
}

/* ---------------------------------------------------------------------
   Marquee ribbon
--------------------------------------------------------------------- */
.marquee-ribbon {
  overflow: hidden;
  background: var(--olive-deep);
  color: var(--cream);
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  white-space: nowrap;
}
.marquee-ribbon .marquee-track {
  display: inline-flex;
  animation: marquee-scroll 150s linear infinite;
}
.marquee-ribbon .marquee-seg {
  display: inline-block;
  padding: 10px 0;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--clay);
}
.marquee-ribbon .marquee-seg span.dot { color: var(--gold); margin: 0 18px; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------
   Hero photo float + rising bubble ring (signature animation)
--------------------------------------------------------------------- */
.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-bubbles { position: absolute; inset: -10px; pointer-events: none; overflow: visible; }
.hero-bubbles .hb {
  position: absolute; border-radius: 50%;
  border: 2px solid rgba(76,91,57,.5);
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(255,255,255,.2) 55%, rgba(217,161,132,.15));
  animation: hero-bubble 7s ease-in-out infinite;
}
.hero-bubbles .hb-1 { width: 44px; height: 44px; top: 6%;  left: -14px; animation-delay: 0s; }
.hero-bubbles .hb-2 { width: 24px; height: 24px; top: 34%; left: -26px; animation-delay: 1.4s; border-color: rgba(188,100,40,.55); }
.hero-bubbles .hb-3 { width: 32px; height: 32px; top: 12%; right: -18px; animation-delay: 2.2s; }
.hero-bubbles .hb-4 { width: 18px; height: 18px; top: 52%; right: -28px; animation-delay: .8s; border-color: rgba(217,164,65,.6); }
.hero-bubbles .hb-5 { width: 26px; height: 26px; bottom: 8%; left: 4%;  animation-delay: 3s; }
.hero-bubbles .hb-6 { width: 15px; height: 15px; bottom: 16%; right: 6%; animation-delay: 1.9s; border-color: rgba(188,100,40,.5); }
@keyframes hero-bubble {
  0%, 100% { transform: translateY(0) translateX(0); opacity: .85; }
  50% { transform: translateY(-16px) translateX(5px); opacity: 1; }
}

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

/* ---------------------------------------------------------------------
   Order success — bubbles pop in with little puffs
--------------------------------------------------------------------- */
.success-bubbles { width: 92px; height: 92px; animation: success-pop 0.9s cubic-bezier(.3,1.5,.4,1) both; }
@keyframes success-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.bubble-puff {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  border: 2px solid var(--sage); background: rgba(255,255,255,.6); opacity: 0;
  animation: bubble-out 0.8s ease-out both;
}
@keyframes bubble-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.15); }
}

/* ---------------------------------------------------------------------
   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(--sage);
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 8px 22px rgba(76,91,57,.5);
  border: none;
  cursor: pointer;
}
@media (max-width: 760px) { #cart-bubble-mobile { display: flex; } }