/**
 * Quote Band — replaces the previous "เราเชื่อว่าความงามที่แท้จริง..."
 * treatment, ported from the approved standalone mockup
 * (inspire-wellness-quote-section-v6.html) essentially unchanged: same
 * colors, fonts, structure, and every animation. Reuses the .quote-band
 * class the old version already had (this file's rules replace the old
 * ones removed from style.css, not layered on top of them).
 *
 * Local custom properties are declared on .quote-band itself, same
 * pattern as .faq-standalone-section in faq-section.css — a few of
 * these names (--gold, --gold-deep, --blush) happen to share names
 * with tokens on the site's own :root (some even the same hex value),
 * but scoping them here means this file can never be affected by, or
 * accidentally affect, the sitewide tokens — no renaming needed.
 *
 * Nothing here was a full standalone page like the FAQ mockup was, so
 * no body{}/position:fixed adaptations were needed this time — it was
 * already just a <section>, ported as-is.
 *
 * Class collision check against style.css and faq-section.css: none.
 * .sparkle also exists in faq-section.css, but scoped under
 * .faq-standalone-section there vs .quote-band here — different
 * ancestors, no overlap possible since no element lives in both
 * sections at once.
 */

.quote-band{
  --cream:#FFF8F2;
  --blush:#F9D6DF; --blush-deep:#F4C0CF; --blush-pale:#FCE9EE;
  --gold:#D4AF37; --gold-deep:#B3922E; --gold-pale:#F3DFA8;
  --rose:#C46A85; --rose-deep:#9C4C68;
  --ink:#A54F62;
  --thai-serif:'Anuphan', sans-serif; --script-en:'Mrs Saint Delafield', cursive; --latin:'Montserrat', sans-serif;
  --serif-quote:'Cormorant Garamond', serif;

  position:relative;
  padding:130px 24px 120px;
  overflow:hidden;
  background:
    radial-gradient(90% 70% at 8% 8%, rgba(244,192,207,0.85), transparent 55%),
    radial-gradient(80% 60% at 95% 100%, rgba(243,223,168,0.45), transparent 55%),
    linear-gradient(160deg, #FDEDF1 0%, #FFF8F2 45%, #FCEEDB 100%);
  text-align:center;
}

/* floating ambient petals across the whole band */
.quote-band .amb-petal{
  position:absolute;color:var(--rose);opacity:0;
  animation:quoteAmbDrift 9s ease-in-out infinite;
}
.quote-band .amb-petal svg{width:100%;height:100%;display:block;}
@keyframes quoteAmbDrift{
  0%{opacity:0;transform:translateY(20px) rotate(0deg);}
  15%{opacity:.5;}
  50%{opacity:.35;transform:translateY(-30px) rotate(25deg);}
  85%{opacity:.15;}
  100%{opacity:0;transform:translateY(-60px) rotate(45deg);}
}

/* ---------- ornament (replaces quote mark) ---------- */
.quote-band .quote-ornament{
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  opacity:0;transform:translateY(8px) scale(.85);
  animation:quoteRise .8s .05s ease forwards;
}
.quote-band .quote-ornament svg{width:44px;height:44px;color:var(--rose);}

/* ---------- twinkling sparkles ---------- */
.quote-band .sparkle{
  position:absolute;color:var(--gold);opacity:0;
  animation:quoteTwinkle 3s ease-in-out infinite;
  pointer-events:none;
}
.quote-band .sparkle svg{width:100%;height:100%;display:block;}
@keyframes quoteTwinkle{
  0%,100%{opacity:0;transform:scale(.4) rotate(0deg);}
  50%{opacity:1;transform:scale(1) rotate(35deg);}
}

/* ---------- glow card behind blockquote ---------- */
.quote-band .quote-glow{
  position:absolute;left:50%;top:50%;
  width:520px;height:280px;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse, rgba(249,214,223,0.55), transparent 70%);
  z-index:-1;
  animation:quoteGlowPulse 6s ease-in-out infinite;
  filter:blur(4px);
}
@keyframes quoteGlowPulse{
  0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1;}
  50%{transform:translate(-50%,-50%) scale(1.12);opacity:.75;}
}

/* ---------- shimmer sweep across whole section ---------- */
.quote-band .sweep{
  position:absolute;top:0;bottom:0;width:220px;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  animation:quoteSweepMove 7s ease-in-out infinite;
  z-index:1;pointer-events:none;
  mix-blend-mode:overlay;
}
@keyframes quoteSweepMove{
  0%{left:-25%;}
  100%{left:120%;}
}
.quote-band .amb-ring{
  position:absolute;border:1px solid rgba(212,175,55,0.35);border-radius:50%;
}
.quote-band .amb-dot{
  position:absolute;border-radius:50%;background:var(--gold);
  box-shadow:0 0 10px 2px rgba(212,175,55,0.5);
  animation:quoteDotPulse 2.6s ease-in-out infinite;
}
@keyframes quoteDotPulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.4);opacity:.6;}
}

.quote-band .quote-inner{
  position:relative;z-index:2;
  max-width:680px;
  margin:0 auto;
}

/* ---------- mark with halo + orbit ---------- */
.quote-band .mark-wrap{
  position:relative;
  width:150px;height:150px;
  margin:0 auto 8px;
  display:flex;align-items:center;justify-content:center;
}
.quote-band .mark-halo{
  position:absolute;inset:-20px;
  background:radial-gradient(circle, rgba(244,192,207,0.9), rgba(243,223,168,0.25) 55%, transparent 75%);
  border-radius:50%;
  animation:quoteHaloPulse 5s ease-in-out infinite;
  filter:blur(3px);
}
@keyframes quoteHaloPulse{
  0%,100%{transform:scale(1);opacity:1;}
  50%{transform:scale(1.1);opacity:.8;}
}
.quote-band .mark-orbit{
  position:absolute;inset:6px;
  border:1px dashed rgba(212,175,55,0.4);
  border-radius:50%;
  animation:quoteSpin 26s linear infinite;
}
.quote-band .mark-orbit::before{
  content:"";position:absolute;top:-3px;left:50%;margin-left:-3px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 8px 2px rgba(212,175,55,0.6);
}
.quote-band .mark-orbit.orbit-2{
  inset:-8px;
  border-color:rgba(196,106,133,0.3);
  animation:quoteSpin 18s linear infinite reverse;
}
.quote-band .mark-orbit.orbit-2::before{
  background:var(--rose);
  width:4px;height:4px;margin-left:-2px;
  box-shadow:0 0 8px 2px rgba(196,106,133,0.55);
}
@keyframes quoteSpin{to{transform:rotate(360deg);}}
.quote-band .mark-img{
  position:relative;z-index:2;
  width:96px;
  filter:drop-shadow(0 10px 20px rgba(156,76,104,0.25));
  animation:quoteMarkFloat 6s ease-in-out infinite;
}
@keyframes quoteMarkFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-9px);}
}

/* ---------- delicate divider with center blossom ---------- */
.quote-band .mini-divider{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:26px 0 40px;
  opacity:0;transform:translateY(6px);
  animation:quoteRise .8s .2s ease forwards;
}
.quote-band .mini-divider .ln{
  width:46px;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold));
}
.quote-band .mini-divider .ln.r{background:linear-gradient(90deg, var(--gold), transparent);}
.quote-band .mini-divider svg{width:15px;height:15px;color:var(--rose);}

/* ---------- quote text ---------- */
.quote-band blockquote{
  font-family:var(--thai-serif);
  font-weight:300;
  font-size:clamp(21px,2.7vw,28px);
  line-height:1.85;
  color:var(--ink);
  margin-bottom:8px;
  opacity:0;transform:translateY(14px);
  animation:quoteRise .9s .3s ease forwards;
}
.quote-band blockquote em{
  font-style:normal;font-weight:500;
  background:linear-gradient(100deg, var(--gold-deep) 15%, var(--gold-pale) 40%, #fff 50%, var(--gold-pale) 60%, var(--gold-deep) 85%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:quoteShimmer 3.6s ease-in-out infinite;
}
@keyframes quoteShimmer{
  0%{background-position:130% 0;}
  100%{background-position:-130% 0;}
}

@keyframes quoteRise{to{opacity:1;transform:translateY(0) scale(1);}}

/* ---------- citation ---------- */
.quote-band .citation-wrap{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-top:38px;
  opacity:0;transform:translateY(10px);
  animation:quoteRise .8s .55s ease forwards;
}
.quote-band .citation-wrap .ln{
  width:34px;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-deep));
}
.quote-band .citation-wrap .ln.r{background:linear-gradient(90deg, var(--gold-deep), transparent);}
.quote-band .citation{
  font-family:var(--script-en);
  font-size:26px;
  color:var(--rose-deep);
  line-height:1;
  text-shadow:0 1px 12px rgba(217,140,168,0.3);
}

@media(max-width:640px){
  .quote-band{padding:90px 20px 84px;}
  .quote-band .mark-wrap{width:120px;height:120px;}
  .quote-band .mark-img{width:76px;}
  .quote-band blockquote{font-size:19px;line-height:1.8;}
  .quote-band .citation{font-size:22px;}
}

@media (prefers-reduced-motion: reduce){
  .quote-band *{ animation:none !important; }
  .quote-band .quote-ornament,
  .quote-band .mini-divider,
  .quote-band blockquote,
  .quote-band .citation-wrap{ opacity:1 !important; transform:none !important; }
}