/* ═══════════════════════════════════════════════════════════════
   ERAYA — Stitch Content Sections (Marquee → Footer)
   Scoped under #stitch-page so nothing here can ever affect the
   hero/nav, which live in style.css and stay untouched.
   ═══════════════════════════════════════════════════════════════ */

/* ── Scoped theme tokens ───────────────────────────────────────
   These are now driven dynamically by stitch.js as the page is
   scrolled: white at the top (Marquee/Products), gradually dimming
   through the Feature Cards into charcoal, then deeper through
   Contact and Footer. The values below are just the pre-JS
   fallback (matches the top-of-page light state, so there's no
   flash of the wrong theme before the scroll handler runs once
   on load). Scoped to #stitch-page — cannot affect hero/nav. */
#stitch-page {
  --bg-color:        #FAFAF8;
  --text-color:       #181512;
  --text-secondary:   #4A4440;

  /* Fixed (not scroll-animated) — used only by components that always
     live in the dark zone of the page (Contact glass panel, Feature
     card tiles), so a static "frosted glass on dark" recipe is correct
     regardless of scroll position. */
  --glass-bg:         rgba(250, 250, 248, 0.06);
  --glass-border:     rgba(250, 250, 248, 0.16);
  --card-sub-bg:      var(--c-smoke);

  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.08s linear, color 0.08s linear;
}

#stitch-page .dynamic-text          { color: var(--text-color); }
#stitch-page .dynamic-text-secondary { color: var(--text-secondary); }
#stitch-page .dynamic-border        { border-color: var(--glass-border); }

#stitch-page .glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
}

#stitch-page .sub-card-panel {
  /* Glassy white transparent, per request */
  background-color: rgba(250, 250, 248, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(250, 250, 248, 0.14);
}

/* ── Glowing pink accents (OUR STORY heading + Send Message button) ── */
#stitch-page .text-glow-pink {
  color: #FF2E9C;
  text-shadow: 0 0 7px rgba(255, 46, 156, 0.3), 0 0 14px rgba(255, 46, 156, 0.15);
}

#stitch-page .glow-pink-btn {
  background: #FF2E9C;
  color: #FFFFFF;
  box-shadow: 0 0 24px 4px rgba(255, 46, 156, 0.55), 0 0 48px 8px rgba(255, 46, 156, 0.25);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
#stitch-page .glow-pink-btn:hover {
  box-shadow: 0 0 32px 6px rgba(255, 46, 156, 0.75), 0 0 64px 12px rgba(255, 46, 156, 0.35);
}

/* ── Editorial heading treatment (Our Products / Waxes & Scrubs /
   Hair Serums / Contact Us) — sans-serif uppercase tracked-out
   label style, distinct from the hero's serif display type, using
   Jost (already part of the ERAYA system, just elevated to headline use) ── */
#stitch-page .font-editorial {
  font-family: 'Jost', system-ui, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Slide-in reveal variants (Products cards + Feature cards) ──
   Reuses the existing .scroll-reveal / .reveal-active machinery in
   stitch.js — these classes just define the hidden→shown states. */
#stitch-page .slide-in-left,
#stitch-page .slide-in-right,
#stitch-page .slide-in-up {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
#stitch-page .slide-in-left  { transform: translateX(-70px); }
#stitch-page .slide-in-right { transform: translateX(70px); }
#stitch-page .slide-in-up    { transform: translateY(56px); }

#stitch-page .slide-in-left.reveal-active,
#stitch-page .slide-in-right.reveal-active,
#stitch-page .slide-in-up.reveal-active {
  opacity: 1;
  transform: translate(0, 0);
}

#stitch-page .reveal-delay-1 { transition-delay: 0.12s; }
#stitch-page .reveal-delay-2 { transition-delay: 0.24s; }

/* ── Product card hover-enlarge (Waxes & Scrubs / Hair Serums) ──
   Reuses the 0.5s transform transition already set above. */
#stitch-page .product-card-hover:hover {
  transform: scale(1.035);
}

/* ── Scroll-reveal (kept from Stitch export, theme-transition
   logic removed — see stitch.js) ──────────────────────────────── */
#stitch-page .reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
#stitch-page .reveal-active {
  opacity: 1;
  transform: translate(0, 0);
}

/* ── Marquee ──────────────────────────────────────────────────── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
#stitch-page .animate-marquee {
  animation: marquee 30s linear infinite;
}

/* ── Butterfly decoration (Contact section) ─────────────────────
   Kept exactly as exported. */
@keyframes butterfly-orbit-1 {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  33%  { transform: translate(40px, -30px) rotate(45deg) scale(0.9); }
  66%  { transform: translate(-20px, -50px) rotate(-30deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes butterfly-orbit-2 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  25%  { transform: translate(-50px, 20px) rotate(-60deg); }
  50%  { transform: translate(30px, 40px) rotate(10deg); }
  75%  { transform: translate(60px, -20px) rotate(80deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes butterfly-orbit-3 {
  0%   { transform: translate(0, 0) rotate(0deg); }
  50%  { transform: translate(0px, -70px) rotate(180deg); }
  100% { transform: translate(0, 0) rotate(360deg); }
}
@keyframes flap {
  0%, 100% { transform: scaleX(1); }
  50%       { transform: scaleX(0.2); }
}
#stitch-page .butterfly-wing {
  animation: flap 0.15s ease-in-out infinite;
  transform-origin: center;
}

/* ── Material Symbols icon font ──────────────────────────────────
   Bug fix: the Stitch export links the Material Symbols font but
   never defines the rule that actually applies it, so icons
   (target / favorite / trending_flat) would render as plain text
   instead of glyphs. This rule is required for them to work. */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}