/* ============================================================
   QUIET PREMIUM — SellAuth theme redesign layer
   Loads after built.css. Pure CSS, no Tailwind compile needed.
   Design tokens
   ============================================================ */
:root {
  --r-card: 16px;
  --r-btn: 10px;
  --r-input: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 12px 32px -12px rgba(0,0,0,.55);
  --shadow-card-hover: 0 2px 4px rgba(0,0,0,.35), 0 24px 48px -16px rgba(0,0,0,.6),
                       0 0 0 1px rgba(var(--cl-accent), .25),
                       0 8px 40px -8px rgba(var(--cl-accent), .18);
  --edge: inset 0 1px 0 rgba(255,255,255,.06);
}

/* ------------------------------------------------------------
   Base polish
   ------------------------------------------------------------ */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { letter-spacing: -0.01em; }

::selection { background: rgba(var(--cl-accent), .3); color: rgb(var(--cl-t-primary)); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--cl-background)); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 99px;
  border: 2px solid rgb(var(--cl-background));
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--cl-accent), .5); }

:focus-visible {
  outline: 2px solid rgba(var(--cl-accent), .7) !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------
   Backdrop — replaces particles.js
   Fine dot grid fading from the top + accent aurora + vignette
   ------------------------------------------------------------ */
.bg-decor {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(var(--cl-accent), .13), transparent 65%),
    radial-gradient(ellipse 50% 40% at 85% 0%, rgba(var(--cl-accent), .05), transparent 60%);
}
.bg-decor::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .05;
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 55%);
  mask-image: linear-gradient(to bottom, black, transparent 55%);
}

/* ------------------------------------------------------------
   Card surfaces — global lift for every panel in the theme
   (product cards, cart, product page, dashboard, modals…)
   ------------------------------------------------------------ */
.bg-card\/75,
.bg-card\/90,
.bg-card {
  background-color: rgba(var(--cl-card), .62) !important;
  border-color: rgba(255,255,255,.07) !important;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card), var(--edge);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* modal panels */
.bg-background.border { border-radius: var(--r-card); box-shadow: var(--shadow-card); }

/* generic square controls become rounded */
button { border-radius: var(--r-btn); }
input, select, textarea { border-radius: var(--r-input); }

/* inner input surfaces used across the theme */
.bg-white\/\[0\.025\] { border-radius: var(--r-input); }

/* badges become pills */
.badges > div { border-radius: 99px; padding: .2rem .6rem; }

/* ------------------------------------------------------------
   Navbar — sticky glass bar
   ------------------------------------------------------------ */
nav[data-component-id="navbar"] {
  position: sticky;
  top: .75rem;
  z-index: 40;
}
.nav-shell {
  background-color: rgba(var(--cl-card), .7) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-radius: var(--r-card);
}
.nav-shell a, .nav-shell button { border-radius: var(--r-btn); }
.nav-shell h1 { letter-spacing: -0.02em; }

/* nav links: soft hover pill */
.nav-shell a[class*="text-t-primary/80"]:hover,
.nav-shell button[class*="text-t-primary/80"]:hover {
  background: rgba(255,255,255,.05);
}

/* ------------------------------------------------------------
   Hero — glow, big type, staggered entrance
   ------------------------------------------------------------ */
.hero-wrap { isolation: isolate; }
.hero-wrap::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background: radial-gradient(ellipse 45% 55% at 50% 40%, rgba(var(--cl-accent), .10), transparent 70%);
  pointer-events: none;
}
.hero-title {
  font-size: clamp(2.25rem, 5.5vw, 4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.hero-title .text-accent-500,
.hero-title [class*="text-accent"] {
  background: linear-gradient(100deg,
    rgb(var(--cl-accent)) 0%,
    color-mix(in srgb, rgb(var(--cl-accent)) 55%, white) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hero-sub {
  font-weight: 300;
  max-width: 42rem;
}
.hero-copy.mx-auto .hero-sub { margin-left: auto; margin-right: auto; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-copy > * { animation: rise-in .7s var(--ease-out) both; }
.hero-copy > *:nth-child(2) { animation-delay: .1s; }
.hero-copy > *:nth-child(3) { animation-delay: .2s; }
.hero-copy > *:nth-child(4) { animation-delay: .3s; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  border-radius: var(--r-btn);
  padding-top: .625rem;
  padding-bottom: .625rem;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out),
              background-color .18s, border-color .18s, color .18s;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-solid {
  background-image: linear-gradient(to bottom, rgba(255,255,255,.14), rgba(255,255,255,0));
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px -6px rgba(var(--cl-accent), .5);
}
.btn-solid:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,.4), 0 10px 28px -6px rgba(var(--cl-accent), .65);
}

.btn-ghost {
  border-color: rgba(255,255,255,.12) !important;
  color: rgb(var(--cl-t-primary)) !important;
  background: rgba(255,255,255,.03);
}
.btn-ghost:hover {
  border-color: rgba(var(--cl-accent), .6) !important;
  color: rgb(var(--cl-accent)) !important;
  background: rgba(var(--cl-accent), .08);
}

/* solid accent CTAs elsewhere in the theme (product form, cart) */
a[class*="bg-accent-500"][class*="border-accent-600"],
button[class*="bg-accent-500"][class*="border-accent-600"] {
  border-radius: var(--r-btn);
  background-image: linear-gradient(to bottom, rgba(255,255,255,.14), rgba(255,255,255,0));
  box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px -6px rgba(var(--cl-accent), .45);
}
/* outline accent CTAs elsewhere */
a[class*="border-accent-500"],
button[class*="border-accent-500"] {
  border-radius: var(--r-btn);
}

/* ------------------------------------------------------------
   Product cards
   ------------------------------------------------------------ */
.pcard {
  overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  will-change: transform;
}
.pcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover), var(--edge);
}
.pcard > div { background: transparent !important; }

.pcard-media { padding: 0 !important; margin-bottom: 0 !important; border-bottom: 0 !important; }
.pcard-media img, .pcard-media > div {
  border-radius: 0;
  transition: transform .5s var(--ease-out);
}
.pcard:hover .pcard-media img { transform: scale(1.045); }
.pcard-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--cl-card), .55), transparent 40%);
  pointer-events: none;
}

.pcard-head { border-bottom: 0 !important; padding: .875rem 1rem .25rem !important; }
.pcard-head h3 { font-size: 1.0625rem; letter-spacing: -0.015em; }

.pcard-body { padding: 0 1rem 1rem !important; }
.pcard-body > div:first-child { margin-bottom: .75rem !important; }

.pcard-cta {
  border-radius: var(--r-btn);
  border-color: rgba(255,255,255,.1) !important;
  color: rgb(var(--cl-t-primary)) !important;
  background: rgba(255,255,255,.04);
  padding-top: .5rem !important;
  padding-bottom: .5rem !important;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.pcard:hover .pcard-cta {
  background: rgb(var(--cl-accent));
  border-color: rgb(var(--cl-accent)) !important;
  color: rgb(var(--cl-t-accent)) !important;
  box-shadow: 0 6px 20px -6px rgba(var(--cl-accent), .55);
}

/* ------------------------------------------------------------
   Stats — glass tiles with gradient numerals
   ------------------------------------------------------------ */
.stat-tile {
  background: rgba(var(--cl-card), .5);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card), var(--edge);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform .25s var(--ease-out), border-color .25s;
}
.stat-tile:hover { transform: translateY(-2px); border-color: rgba(var(--cl-accent), .35); }
.stat-tile p:first-child {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg,
    color-mix(in srgb, rgb(var(--cl-accent)) 60%, white),
    rgb(var(--cl-accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-tile p:last-child {
  text-transform: none !important;
  font-size: .8125rem !important;
  letter-spacing: .02em;
  color: rgba(var(--cl-t-primary), .55) !important;
}

/* ------------------------------------------------------------
   Features — icon chips, quieter type
   ------------------------------------------------------------ */
.feat-card {
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
}
.feat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--cl-accent), .3) !important;
}
.feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: .875rem;
  border-radius: 12px;
  background: rgba(var(--cl-accent), .1);
  border: 1px solid rgba(var(--cl-accent), .22);
  font-size: 1.125rem;
}
.feat-card h4 {
  text-transform: none !important;
  letter-spacing: -0.01em;
  font-size: 1rem !important;
}
.feat-card p { font-size: .875rem !important; line-height: 1.55; color: rgba(var(--cl-t-primary), .6) !important; }

/* ------------------------------------------------------------
   Section titles — kill the <hr> underline, use accent kicker
   ------------------------------------------------------------ */
.component h1 + hr, .component h2 + hr {
  border: 0 !important;
  height: 2px;
  width: 3rem !important;
  margin-top: .75rem !important;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgb(var(--cl-accent)), transparent);
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer {
  position: relative;
  border-radius: var(--r-card);
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--cl-accent), .4), transparent);
}

/* ------------------------------------------------------------
   Selects (Choices.js) & searchbars — rounded, calmer
   built.css sets !rounded-none with !important, so re-assert.
   ------------------------------------------------------------ */
.choices .choices__inner { border-radius: var(--r-input) !important; }
.choices.is-open .choices__inner { border-radius: var(--r-input) var(--r-input) 0 0 !important; }
.choices .choices__list.choices__list--dropdown {
  border-radius: 0 0 var(--r-input) var(--r-input) !important;
  overflow: hidden;
}
.currency-selector.xs .choices__inner,
.currency-selector.lg .choices__inner { border-radius: var(--r-btn) !important; }
.currency-selector .choices__list.choices__list--dropdown { border-radius: var(--r-input) !important; }

/* ------------------------------------------------------------
   Motion discipline
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .pcard:hover, .stat-tile:hover, .feat-card:hover, .btn-solid:hover { transform: none; }
}

/* ============================================================
   MOTION LAYER — page-load reveal, scroll reveals, count-ups,
   animated pills, marquee. Paired with theme-animations.njk.
   ============================================================ */

/* ------------------------------------------------------------
   Page loader overlay
   ------------------------------------------------------------ */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(var(--cl-background));
  transition: opacity .5s var(--ease-out), visibility .5s var(--ease-out);
}
.is-ready #page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.page-loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.page-loader__ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3px solid rgba(var(--cl-accent), .18);
  border-top-color: rgb(var(--cl-accent));
  animation: pl-spin .8s linear infinite;
  box-shadow: 0 0 24px -4px rgba(var(--cl-accent), .5);
}
.page-loader__label {
  font-size: .9rem;
  letter-spacing: .04em;
  color: rgba(var(--cl-t-primary), .65);
  font-weight: 500;
}
.page-loader__dots::after {
  content: "";
  animation: pl-dots 1.4s steps(4, end) infinite;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }
@keyframes pl-dots {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}

/* ------------------------------------------------------------
   Page-load orchestration — nav + hero enter after loader
   The hero's own rise-in animation is replaced by the ready gate
   ------------------------------------------------------------ */
html:not(.is-ready) body { overflow: hidden; }

nav[data-component-id="navbar"],
.announcement {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.is-ready nav[data-component-id="navbar"],
.is-ready .announcement {
  opacity: 1;
  transform: none;
}
.is-ready nav[data-component-id="navbar"] { transition-delay: .1s; }

/* Hero: gate the staggered entrance behind is-ready */
.hero-copy > * { animation: none; opacity: 0; transform: translateY(16px); }
.is-ready .hero-copy > * {
  animation: rise-in .8s var(--ease-out) both;
}
.is-ready .hero-copy > *:nth-child(1) { animation-delay: .15s; }
.is-ready .hero-copy > *:nth-child(2) { animation-delay: .28s; }
.is-ready .hero-copy > *:nth-child(3) { animation-delay: .41s; }
.is-ready .hero-copy > *:nth-child(4) { animation-delay: .54s; }

/* Hero glow: subtle breathing pulse */
.hero-wrap::before {
  animation: hero-breathe 7s ease-in-out infinite;
}
@keyframes hero-breathe {
  0%, 100% { opacity: .7; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

/* ------------------------------------------------------------
   Scroll reveal
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
  will-change: opacity, transform;
}
[data-reveal].revealed {
  opacity: 1;
  transform: none;
}

/* group children stagger left-to-right as they appear */
[data-reveal-group] { }

/* ------------------------------------------------------------
   Count-up numerals: gentle pop the moment they finish region-enter
   ------------------------------------------------------------ */
.stat-tile.revealed [data-countup],
.stat-tile [data-countup] {
  display: inline-block;
}
.stats-grid.revealed .stat-tile {
  animation: stat-pop .6s var(--ease-out) both;
  animation-delay: calc(var(--reveal-i, 0) * 90ms);
}
@keyframes stat-pop {
  0%   { opacity: 0; transform: translateY(18px) scale(.96); }
  60%  { transform: translateY(0) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ------------------------------------------------------------
   Announcement bar → smooth marquee + live status dot
   ------------------------------------------------------------ */
.announcement > div {
  position: relative;
  overflow: hidden;
}
.announcement .animate-announcement-fade {
  animation-duration: 4s;
}
/* pulsing "live" dot before the announcement text */
.announcement > div::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: rgb(var(--cl-t-accent));
  box-shadow: 0 0 0 0 rgba(var(--cl-t-accent), .7);
  animation: live-dot 2s ease-out infinite;
  z-index: 1;
}
@keyframes live-dot {
  0%   { box-shadow: 0 0 0 0 rgba(var(--cl-t-accent), .6); opacity: 1; }
  70%  { box-shadow: 0 0 0 8px rgba(var(--cl-t-accent), 0); opacity: .85; }
  100% { box-shadow: 0 0 0 0 rgba(var(--cl-t-accent), 0); opacity: 1; }
}

/* ------------------------------------------------------------
   Card hover — lift a touch more kinetic on reveal
   Product cards get a subtle continuous float on the CTA arrow
   ------------------------------------------------------------ */
.pcard:hover .pcard-cta svg { animation: nudge 1s ease-in-out infinite; }
@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* Feature icon chip: gentle idle glow-pulse when in view */
.feat-card.revealed .feat-icon {
  animation: chip-glow 3.5s ease-in-out infinite;
}
@keyframes chip-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--cl-accent), 0); }
  50%      { box-shadow: 0 0 18px -2px rgba(var(--cl-accent), .35); }
}

/* ------------------------------------------------------------
   Reduced motion: strip everything kinetic
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  #page-loader { display: none !important; }
  html:not(.is-ready) body { overflow: auto; }
  nav[data-component-id="navbar"], .announcement,
  .hero-copy > *, [data-reveal] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-wrap::before, .announcement > div::before,
  .pcard:hover .pcard-cta svg, .feat-card .feat-icon,
  .stats-grid .stat-tile { animation: none !important; }
}