/* =============================================================
   Solace — Static HTML replica of the Next.js app
   Brand: #FF4AB7 ≈ oklch(0.72 0.235 348)  (dark-first)
   ============================================================= */

:root,
[data-bs-theme="dark"] {
  /* Hijack Bootstrap's dark-mode tokens so its body/card/input defaults stop
   * painting the page `#212529` grey. */
  --bs-body-bg: oklch(0.13 0.012 320);
  --bs-body-bg-rgb: 23, 18, 27;
  --bs-body-color: oklch(0.985 0.005 320);
  --bs-body-color-rgb: 248, 247, 252;
  --bs-emphasis-color: oklch(0.985 0.005 320);
  --bs-secondary-bg: oklch(0.17 0.013 320);
  --bs-secondary-color: oklch(0.7 0.015 320);
  --bs-tertiary-bg: oklch(0.22 0.014 320);
  --bs-border-color: rgba(255, 255, 255, 0.08);

  --background: oklch(0.13 0.012 320);
  --foreground: oklch(0.985 0.005 320);
  --card: oklch(0.17 0.013 320);
  --card-foreground: oklch(0.985 0.005 320);
  --popover: oklch(0.17 0.013 320);
  --popover-foreground: oklch(0.985 0.005 320);
  --primary: oklch(0.72 0.235 348);
  /* Always white on pink — the previous near-black foreground was readable but
   * looked like a bug to most users. Keep it white so every pink button
   * (checkout, add-to-cart, copy-link, primary CTAs, cart badge…) has clean
   * white text. */
  --primary-foreground: oklch(1 0 0);
  --secondary: oklch(0.22 0.014 320);
  --secondary-foreground: oklch(0.985 0.005 320);
  --muted: oklch(0.22 0.014 320);
  --muted-foreground: oklch(0.7 0.015 320);
  --accent: oklch(0.72 0.235 348);
  --accent-foreground: oklch(0.13 0.012 320);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 8%);
  --input: oklch(1 0 0 / 12%);
  --ring: oklch(0.72 0.235 348);
  --radius: 0.875rem;
  color-scheme: dark;
}

/* Tailwind CDN colour palette hooks (text-foreground, bg-background, etc.) */
html,
body {
  /* Paint the root too so Bootstrap/pro.css body resets can't leak a pale
   * fallback through transparent overlays. !important because pro.css is
   * loaded after solace.css in master.njk and sets a lighter body bg. */
  background: var(--background) !important;
  color: var(--foreground);
  /* Safety net against horizontal overflow caused by transform:scale() on
   * animated halo layers. `overflow-x: clip` doesn't create a scroll
   * context so `position:sticky` inside still works, unlike `hidden`. */
  overflow-x: clip;
}
html {
  font-family:
    "Geist",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
  scrollbar-width: thin;
  scrollbar-color: oklch(0.72 0.235 348 / 0.6) transparent;
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  min-height: 100vh;
}

/* Scrollbar pink */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: oklch(0.72 0.235 348 / 0.6);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 9999px;
  transition: background-color 0.2s ease;
}
::-webkit-scrollbar-thumb:hover {
  background-color: oklch(0.72 0.235 348 / 0.85);
}
::-webkit-scrollbar-thumb:active {
  background-color: oklch(0.72 0.235 348 / 1);
}
::-webkit-scrollbar-corner {
  background: transparent;
}
/* Kill the up/down arrow buttons that Chrome on Linux/Windows paints at the
 * ends of the track — the thumb is enough, the arrows just clash with the
 * minimal dark UI. We list every pseudo-class Chromium exposes for these
 * buttons (single / double / start / end / increment / decrement across
 * vertical + horizontal) to make sure the rule wins on every platform. */
::-webkit-scrollbar-button,
::-webkit-scrollbar-button:start,
::-webkit-scrollbar-button:end,
::-webkit-scrollbar-button:vertical,
::-webkit-scrollbar-button:horizontal,
::-webkit-scrollbar-button:vertical:start,
::-webkit-scrollbar-button:vertical:end,
::-webkit-scrollbar-button:horizontal:start,
::-webkit-scrollbar-button:horizontal:end,
::-webkit-scrollbar-button:single-button,
::-webkit-scrollbar-button:double-button,
::-webkit-scrollbar-button:no-button,
::-webkit-scrollbar-button:increment,
::-webkit-scrollbar-button:decrement,
::-webkit-scrollbar-button:vertical:increment,
::-webkit-scrollbar-button:vertical:decrement,
::-webkit-scrollbar-button:horizontal:increment,
::-webkit-scrollbar-button:horizontal:decrement {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* ---- shadcn-compatible colour tokens used with Tailwind [arbitrary] syntax ---- */
.bg-background {
  background-color: var(--background);
}
.bg-foreground {
  background-color: var(--foreground);
}
.bg-card {
  background-color: var(--card);
}
.bg-card\/40 {
  background-color: color-mix(in oklab, var(--card) 40%, transparent);
}
.bg-card\/50 {
  background-color: color-mix(in oklab, var(--card) 50%, transparent);
}
.bg-card\/60 {
  background-color: color-mix(in oklab, var(--card) 60%, transparent);
}
.bg-primary {
  background-color: var(--primary);
}
.bg-primary\/10 {
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
}
.bg-primary\/15 {
  background-color: color-mix(in oklab, var(--primary) 15%, transparent);
}
.bg-primary\/20 {
  background-color: color-mix(in oklab, var(--primary) 20%, transparent);
}
.bg-primary\/30 {
  background-color: color-mix(in oklab, var(--primary) 30%, transparent);
}
.bg-primary\/60 {
  background-color: color-mix(in oklab, var(--primary) 60%, transparent);
}
.bg-background\/40 {
  background-color: color-mix(in oklab, var(--background) 40%, transparent);
}
.bg-background\/45 {
  background-color: color-mix(in oklab, var(--background) 45%, transparent);
}
.bg-background\/60 {
  background-color: color-mix(in oklab, var(--background) 60%, transparent);
}
.bg-background\/65 {
  background-color: color-mix(in oklab, var(--background) 65%, transparent);
}
.bg-background\/70 {
  background-color: color-mix(in oklab, var(--background) 70%, transparent);
}
.bg-background\/95 {
  background-color: color-mix(in oklab, var(--background) 95%, transparent);
}

.text-foreground {
  color: var(--foreground);
}
.text-background {
  color: var(--background);
}
.text-primary {
  color: var(--primary);
}
.text-primary-foreground {
  color: var(--primary-foreground);
}
.text-muted-foreground {
  color: var(--muted-foreground);
}
.text-muted-foreground\/70 {
  color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}
.text-muted-foreground\/80 {
  color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
}
.text-muted-foreground\/60 {
  color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
}
.text-foreground\/80 {
  color: color-mix(in oklab, var(--foreground) 80%, transparent);
}
.text-foreground\/90 {
  color: color-mix(in oklab, var(--foreground) 90%, transparent);
}
.text-destructive {
  color: var(--destructive);
}

.border-border {
  border-color: var(--border);
}
.border-primary {
  border-color: var(--primary);
}
.border-primary\/30 {
  border-color: color-mix(in oklab, var(--primary) 30%, transparent);
}
.border-primary\/40 {
  border-color: color-mix(in oklab, var(--primary) 40%, transparent);
}
.border-primary\/60 {
  border-color: color-mix(in oklab, var(--primary) 60%, transparent);
}

/* Ring primary — used by focus outlines */
.ring-primary {
  --tw-ring-color: var(--primary);
}

/* ---- Custom utilities from the Next.js globals.css ---- */
.bg-grid {
  background-image:
    linear-gradient(to right, oklch(1 0 0 / 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(1 0 0 / 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  mask-image: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    #000 30%,
    transparent 75%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 80% 60% at 50% 0%,
    #000 30%,
    transparent 75%
  );
}

.bg-radial-glow {
  background-image: radial-gradient(
    ellipse 60% 55% at 50% -10%,
    oklch(0.72 0.235 348 / 0.55),
    transparent 70%
  );
}

.bg-radial-glow-soft {
  background-image: radial-gradient(
    ellipse 70% 50% at 50% 50%,
    oklch(0.72 0.235 348 / 0.18),
    transparent 70%
  );
}

.text-gradient-pink {
  background: linear-gradient(
    180deg,
    oklch(0.985 0.005 320) 0%,
    oklch(0.78 0.18 348) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.shadow-glow-pink {
  box-shadow:
    0 0 0 1px oklch(0.72 0.235 348 / 0.4),
    0 10px 40px -10px oklch(0.72 0.235 348 / 0.55),
    0 0 60px -20px oklch(0.72 0.235 348 / 0.6);
}

.ring-pink-soft {
  box-shadow:
    inset 0 1px 0 0 oklch(1 0 0 / 0.08),
    0 0 0 1px oklch(1 0 0 / 0.06),
    0 30px 80px -30px oklch(0.72 0.235 348 / 0.35);
}

/* ---- Keyframes ---- */

@keyframes halo-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 0.85;
  }
}

@keyframes halo-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -16px, 0) scale(1.04);
  }
}

@keyframes hero-reveal {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-reveal-zoom {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Faithful blurred.gg shake-blur (3 bursts in an 8 s loop) */
@keyframes shake-blur {
  0%,
  15%,
  19%,
  45%,
  49%,
  75%,
  79%,
  100% {
    transform: translate(0);
    filter: blur(0);
  }
  16% {
    transform: translate(-2px, 2px);
    filter: blur(3px);
  }
  17% {
    transform: translate(2px, -2px);
    filter: blur(5px);
  }
  18% {
    transform: translate(-1px, 1px);
    filter: blur(2px);
  }
  46% {
    transform: translate(2px, 1px);
    filter: blur(4px);
  }
  47% {
    transform: translate(-2px, -2px);
    filter: blur(5px);
  }
  48% {
    transform: translate(1px, -1px);
    filter: blur(3px);
  }
  76% {
    transform: translate(-1px, -2px);
    filter: blur(3px);
  }
  77% {
    transform: translate(2px, 1px);
    filter: blur(5px);
  }
  78% {
    transform: translate(-2px, 2px);
    filter: blur(2px);
  }
}

@keyframes solace-ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.animate-halo-pulse {
  animation: halo-pulse 9s ease-in-out infinite;
}
.animate-halo-drift {
  animation: halo-drift 22s ease-in-out infinite;
}
.animate-ping {
  animation: solace-ping 1.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.animate-hero-reveal {
  animation: hero-reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.animate-hero-reveal-zoom {
  animation: hero-reveal-zoom 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

/* ShakeBlurText — gradient fill + shake loop */
.shake-blur-text {
  display: inline-block;
  background: linear-gradient(162deg, #ffffff 25.49%, #939db8 110.77%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  will-change: transform, filter;
  animation: shake-blur 8s ease-in-out infinite;
}

/* Respect reduced motion (autoplay only) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---- Reveal (IntersectionObserver driven) ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal="above"] {
  transform: translateY(-24px);
}
[data-reveal="zoom-in"] {
  transform: translateY(24px) scale(0.97);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Navbar active pill ---- */
.nav-pill {
  position: absolute;
  inset-block: 0;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.04);
  transition:
    left 400ms cubic-bezier(0.25, 1, 0.5, 1),
    width 400ms cubic-bezier(0.25, 1, 0.5, 1),
    opacity 200ms ease-out;
  pointer-events: none;
  opacity: 0;
}
.nav-pill.is-active {
  opacity: 1;
}

/* ---- Sparkle canvas container ---- */
.sparkles-root,
.sparkles-root canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Mobile sheet ---- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
  z-index: 60;
}
.sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}
.sheet-panel {
  position: fixed;
  inset-block: 0;
  right: 0;
  width: 88vw;
  max-width: 24rem;
  background: color-mix(in oklab, var(--background) 95%, transparent);
  backdrop-filter: blur(16px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateX(100%);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 70;
  display: flex;
  flex-direction: column;
}
.sheet-panel.is-open {
  transform: translateX(0);
}

/* ---- Video preview chrome ---- */
.video-frame {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: color-mix(in oklab, var(--card) 30%, transparent);
  backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 40px 100px -30px rgba(255, 74, 183, 0.35);
}
.video-frame video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---- Safari-style window chrome (used by the hero video preview) ----
 * The outer .safari-window paints the desktop body gradient + a pink halo
 * shadow. The .safari-window-header is the titlebar strip with the macOS
 * highlight. .safari-url-pill is the URL capsule shown in the header. All
 * values were previously inlined in hero.njk — extracted here so the HTML
 * stays readable and the tokens live in one place. */
.safari-window {
  background: linear-gradient(
    180deg,
    oklch(0.19 0.013 320) 0%,
    oklch(0.14 0.012 320) 48px,
    oklch(0.13 0.012 320) 100%
  );
  box-shadow:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 40px 120px -20px rgba(255, 74, 183, 0.35),
    0 25px 60px -15px rgba(0, 0, 0, 0.75);
}
.safari-window-header {
  background: linear-gradient(
    180deg,
    oklch(0.26 0.015 320 / 0.95) 0%,
    oklch(0.22 0.014 320 / 0.92) 100%
  );
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}
.safari-url-pill {
  background: oklch(0.18 0.013 320 / 0.75);
}

/* ---- Product image gradients (Tailwind CDN can't parse arbitrary ones from data) ---- */
.grad-pink-fuchsia-violet {
  background-image: linear-gradient(
    to bottom right,
    rgb(236 72 153 / 0.4),
    rgb(217 70 239 / 0.3),
    rgb(124 58 237 / 0.4)
  );
}
.grad-rose-pink-orange {
  background-image: linear-gradient(
    to bottom right,
    rgb(244 63 94 / 0.4),
    rgb(236 72 153 / 0.4),
    rgb(251 146 60 / 0.3)
  );
}
.grad-purple-pink-cyan {
  background-image: linear-gradient(
    to bottom right,
    rgb(168 85 247 / 0.4),
    rgb(236 72 153 / 0.4),
    rgb(34 211 238 / 0.3)
  );
}
.grad-amber-pink-fuchsia {
  background-image: linear-gradient(
    to bottom right,
    rgb(251 191 36 / 0.4),
    rgb(236 72 153 / 0.3),
    rgb(217 70 239 / 0.4)
  );
}
.grad-pink-rose-purple {
  background-image: linear-gradient(
    to bottom right,
    rgb(236 72 153 / 0.4),
    rgb(244 63 94 / 0.3),
    rgb(147 51 234 / 0.4)
  );
}
.grad-emerald-teal-pink {
  background-image: linear-gradient(
    to bottom right,
    rgb(52 211 153 / 0.4),
    rgb(20 184 166 / 0.3),
    rgb(236 72 153 / 0.4)
  );
}
.grad-sky-indigo-pink {
  background-image: linear-gradient(
    to bottom right,
    rgb(56 189 248 / 0.4),
    rgb(99 102 241 / 0.3),
    rgb(236 72 153 / 0.4)
  );
}
.grad-fuchsia-pink-amber {
  background-image: linear-gradient(
    to bottom right,
    rgb(217 70 239 / 0.4),
    rgb(236 72 153 / 0.3),
    rgb(251 191 36 / 0.3)
  );
}

/* ---- Number ticker (simple CSS version) ---- */
.ticker {
  font-variant-numeric: tabular-nums;
}

/* ---- Utility overrides where Tailwind CDN defaults can conflict ---- */
.ring-white\/5 {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.ring-white\/10 {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Hover lift (Tailwind v4 uses `translate` property; CDN uses transform → fine) */