/* ============================================================================
   SCENT CENTRAL - DESIGN LANGUAGE v2  ("Atelier")
   Organic shapes · aurora gradients · curved dividers · motion utilities.
   Add ONCE in Elementor → Site Settings → Custom CSS (after the global file).
   Pairs with scent-central-enhance.js. All motion is progressive-enhancement:
   content is fully visible without JS; JS only adds the reveal/interaction.
   ============================================================================ */

:root{
  --sc-blue-cta:#2C6E8F;      /* accessible deep blue (5.6:1 on white) */
  --sc-blue-cta-dk:#235A77;
  --sc-plum:#8E6E84;          /* deepened pink for accents on light */
  --sc-r-organic:42px;        /* large organic radius */
  --sc-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- AURORA + GRAIN BACKDROPS ---------- */
.sc-aurora{position:relative;isolation:isolate;overflow:hidden;}
.sc-aurora--cream{background:
  radial-gradient(80% 60% at 12% 8%, #0A0A0D 0%, rgba(10,10,13,0) 60%),
  radial-gradient(70% 70% at 88% 0%, rgba(162,210,232,.22) 0%, rgba(162,210,232,0) 55%),
  radial-gradient(80% 80% at 50% 120%, rgba(205,181,194,.28) 0%, rgba(205,181,194,0) 60%),
  var(--sc-cream,#000000);}
.sc-aurora--bleed{background:
  linear-gradient(180deg, var(--sc-cream,#000000) 0%, #000000 45%, rgba(162,210,232,.32) 78%, rgba(205,181,194,.4) 100%);}
.sc-grain::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");}
.sc-aurora > *{position:relative;z-index:1;}

/* ---------- SOFT FLOATING BLOBS ---------- */
.sc-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;opacity:.55;}
.sc-orb--blue{background:var(--sc-blue,#A2D2E8);}
.sc-orb--pink{background:var(--sc-pink,#CDB5C2);}
.sc-orb--cta{background:var(--sc-blue-cta,#2C6E8F);opacity:.22;}
@keyframes sc-float{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(0,-26px,0) scale(1.06);}}
.sc-orb--drift{animation:sc-float 14s ease-in-out infinite;}

/* ---------- ORGANIC SHAPE HELPERS ---------- */
.sc-blob-radius{border-radius:60% 40% 55% 45% / 50% 55% 45% 50%;}
.sc-soft-card{border-radius:var(--sc-r-organic,42px);}
.sc-soft-card--tl{border-radius:42px 42px 42px 8px;}   /* one squared corner = intentional, not a box */
.sc-pill{border-radius:999px;}

/* curved SVG divider (place an <svg class="sc-wave"> at a section edge) */
.sc-wave{display:block;width:100%;height:auto;line-height:0;}

/* ---------- SCROLL REVEAL (progressive) ---------- */
.js-on .sc-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--sc-ease),transform .7s var(--sc-ease);will-change:opacity,transform;}
.js-on .sc-reveal.is-in{opacity:1;transform:none;}
.js-on .sc-reveal[data-reveal="left"]{transform:translateX(-30px);}
.js-on .sc-reveal[data-reveal="right"]{transform:translateX(30px);}
.js-on .sc-reveal[data-reveal="scale"]{transform:scale(.94);}
.js-on .sc-reveal.is-in[data-reveal]{transform:none;}
/* Mobile: keep the exact same smooth desktop timing/easing/distance - the only
   change is swapping the horizontal slide-ins for the standard vertical rise, so
   nothing slides sideways or overflows on a narrow screen. (The clunky stagger
   delays are removed in JS, not here.) */
@media (max-width:768px){
  .js-on .sc-reveal[data-reveal="left"],.js-on .sc-reveal[data-reveal="right"]{transform:translateY(26px);}
  .js-on .sc-reveal.is-in[data-reveal]{transform:none;}
}

/* ---------- TILT + MAGNETIC (JS sets the transforms) ---------- */
.sc-tilt{transition:transform .25s var(--sc-ease);will-change:transform;}
.sc-magnetic{transition:transform .25s var(--sc-ease);will-change:transform;}

/* ---------- INTERACTIVE CHIP ---------- */
.sc-chip-i{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
  background:rgba(20,20,26,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);font-weight:600;font-size:.9rem;color:var(--sc-fg,#F2F2F4);
  cursor:pointer;transition:transform .2s var(--sc-ease),box-shadow .2s,border-color .2s,background .2s;}
.sc-chip-i:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(95,169,201,.25);border-color:var(--sc-blue,#A2D2E8);background:var(--sc-surface,#141418);}

/* ---------- "Discover Your Scent" CTA (opens the Scent Finder quiz) ---------- */
.sc-discover{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:var(--sc-sans,'Montserrat',sans-serif);
  font-weight:700;font-size:1rem;line-height:1;padding:15px 28px;border:0;border-radius:999px;text-decoration:none;
  background:linear-gradient(135deg,var(--sc-blue,#A2D2E8),var(--sc-pink,#CDB5C2));color:#16181D;
  box-shadow:0 10px 26px rgba(162,210,232,.28);transition:transform .2s var(--sc-ease,ease),box-shadow .2s;}
.sc-discover:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(162,210,232,.42);}
.sc-discover svg{flex:0 0 auto;}

/* count-up holds its space to avoid layout shift */
[data-countup]{font-variant-numeric:tabular-nums;}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .js-on .sc-reveal{opacity:1 !important;transform:none !important;transition:none;}
  .sc-orb--drift{animation:none;}
  .sc-tilt,.sc-magnetic{transform:none !important;}
}