/* ==========================================================================
   FLAWLESS — custom theme layer

   This file is never overwritten by a theme update, so the whole visual
   identity lives here. It only uses the theme's own `sa-*` hooks and CSS
   variables, so nothing here depends on a Tailwind rebuild.

   Direction: the air, scale and softness of a modern product site, held in
   strict monochrome. There is no accent hue anywhere — hierarchy is carried
   by weight, contrast and space. Light is the default scheme; dark is a
   first-class alternative, not an afterthought.

   Three type roles, and the split is deliberate:
     Outfit         display — big, tight, geometric
     Inter          prose a person wrote
     IBM Plex Mono  anything the machine produced: prices, stock, counts,
                    eyebrows, badges, keys
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --ff-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Soft, wide shadows. A tight dark shadow reads as a border; a wide, faint
     one reads as a card lifted off the page, which is the whole effect. */
  --fl-lift:       0 1px 2px rgba(10,10,11,.04), 0 8px 24px -8px rgba(10,10,11,.10);
  --fl-lift-hover: 0 2px 4px rgba(10,10,11,.05), 0 20px 44px -12px rgba(10,10,11,.16);
  --fl-ease: cubic-bezier(.16, 1, .3, 1);
}

/* A single accent cannot serve both schemes: near-black is invisible on a
   black page. Each scheme gets the accent that reads on it.

   `:root[data-scheme=...]` rather than a bare attribute selector on purpose.
   This file is linked *before* the theme's inline <style id="theme-styles">,
   which sets --cl-accent on :root — at equal specificity the later inline
   block would win and the dark scheme would render black-on-black buttons.
   The extra element in the selector settles it. */
:root[data-scheme="light"] {
  --cl-accent: 10, 10, 11;
  --cl-on-accent: 255, 255, 255;
}
:root[data-scheme="dark"] {
  --cl-accent: 255, 255, 255;
  --cl-on-accent: 10, 10, 11;
  /* success is near-black for the light scheme; invert it here too */
  --cl-success: 244, 244, 245;
  --fl-lift:       0 1px 2px rgba(0,0,0,.4), 0 8px 28px -8px rgba(0,0,0,.6);
  --fl-lift-hover: 0 2px 6px rgba(0,0,0,.45), 0 24px 52px -14px rgba(0,0,0,.7);
}

/* ---------- type ---------- */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

h1, h2, h3, .sa-hero-title, .sa-section-title {
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

/* The hero headline is the loudest thing on the site, by a wide margin. */
.sa-hero-title {
  font-weight: 800;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  letter-spacing: -0.045em;
}
.sa-hero-subtitle {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  color: rgb(var(--cl-t-muted));
  max-width: 46ch;
  margin-inline: auto;
  line-height: 1.6;
}
.sa-hero { padding-block: clamp(72px, 11vw, 148px); }
.sa-hero-actions { margin-top: 2.25rem; gap: .75rem; }

.sa-section-title { font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 2.85rem); }
.sa-section-subtitle { color: rgb(var(--cl-t-muted)); max-width: 52ch; }

/* Machine data is set in mono everywhere it appears. This is the one rule
   that ties the whole site together. */
.sa-hero-eyebrow,
.sa-section-eyebrow,
.sa-product-card-price,
.sa-product-card-price-slash,
.sa-product-card-stock,
.sa-product-card-status,
.sa-stats-item .sa-stats-value,
.sa-stats-item b,
.sa-product-card-badges,
.sa-badge,
.price,
[class*="badge"] {
  font-family: var(--ff-mono);
  font-variant-ligatures: none;
}

.sa-hero-eyebrow,
.sa-section-eyebrow {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(var(--cl-t-muted));
}

/* ---------- buttons ---------- */
.sa-btn {
  font-weight: 600;
  letter-spacing: -.01em;
  transition: transform .22s var(--fl-ease), box-shadow .22s var(--fl-ease),
              background-color .22s var(--fl-ease), border-color .22s var(--fl-ease);
}
.sa-btn:hover { transform: translateY(-1px); }
.sa-btn:active { transform: translateY(0); }
.sa-hero-actions .sa-btn { padding-inline: 1.6rem; height: 3rem; font-size: .975rem; }

/* ---------- cards float ---------- */
.sa-product-card,
.sa-features-item,
.sa-steps-item,
.sa-faq-item,
.sa-stats-item,
.sa-faq-support-card {
  box-shadow: var(--fl-lift);
  transition: transform .28s var(--fl-ease), box-shadow .28s var(--fl-ease);
}
.sa-product-card:hover,
.sa-features-item:hover,
.sa-steps-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--fl-lift-hover);
}

.sa-product-card-title { font-weight: 700; letter-spacing: -.02em; }
.sa-product-card-price { font-weight: 600; font-size: 1.15rem; }

/* ---------- stats read as data, not decoration ---------- */
.sa-stats-item { text-align: center; }
.sa-stats-items { gap: clamp(1rem, 2vw, 1.5rem); }

/* ---------- chrome ---------- */
.sa-navbar { backdrop-filter: blur(18px) saturate(150%); }
.sa-navbar-logo { font-weight: 800; letter-spacing: -.03em; }
.sa-navbar-link { font-weight: 500; transition: color .18s var(--fl-ease); }

.sa-footer { padding-block: clamp(48px, 6vw, 80px); }
.sa-footer-link { transition: color .18s var(--fl-ease); }

/* ---------- section rhythm ---------- */
.sa-section-header { margin-bottom: clamp(2rem, 4vw, 3.25rem); }

/* ---------- accessibility floor ---------- */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid rgb(var(--cl-t-primary));
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .sa-btn, .sa-product-card, .sa-features-item, .sa-steps-item {
    transition: none;
  }
  .sa-btn:hover, .sa-product-card:hover,
  .sa-features-item:hover, .sa-steps-item:hover { transform: none; }
}

@media (max-width: 640px) {
  .sa-hero-title { letter-spacing: -.035em; }
  .sa-hero { padding-block: 64px; }
}
/* ==========================================================================
   MOTION

   The theme already reveals sections on scroll and lifts cards on hover. This
   layer adds the smaller movements that make a page feel built rather than
   assembled: things settle instead of appearing, and anything clickable
   answers the pointer.

   One rule throughout: motion is short, eased out, and only ever moves a few
   pixels. Long or bouncy transitions read as a template.

   Every block below is inside `prefers-reduced-motion: no-preference`, so a
   visitor who has asked their system for less motion gets a still page rather
   than a slower one.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- the page arriving ---------- */

  /* The hero is the first thing seen, so it settles rather than blinking in.
     Staggered by a few frames so the eyebrow, the headline and the buttons
     land in reading order instead of together. */
  @keyframes fl-rise {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
  }

  .sa-hero-eyebrow,
  .sa-hero-title,
  .sa-hero-subtitle,
  .sa-hero-actions,
  .sa-hero-badges {
    animation: fl-rise .62s var(--fl-ease) both;
  }
  .sa-hero-title    { animation-delay: .06s; }
  .sa-hero-subtitle { animation-delay: .12s; }
  .sa-hero-actions  { animation-delay: .18s; }
  .sa-hero-badges   { animation-delay: .24s; }

  /* Cards in a grid arrive one after another rather than as a block. Capped
     at eight: past that the last card waits long enough to feel broken. */
  .sa-products-item,
  .sa-feature-grid > *,
  .sa-step-grid > * {
    animation: fl-rise .5s var(--fl-ease) both;
  }
  .sa-products-item:nth-child(1),  .sa-feature-grid > *:nth-child(1),  .sa-step-grid > *:nth-child(1)  { animation-delay: .02s; }
  .sa-products-item:nth-child(2),  .sa-feature-grid > *:nth-child(2),  .sa-step-grid > *:nth-child(2)  { animation-delay: .07s; }
  .sa-products-item:nth-child(3),  .sa-feature-grid > *:nth-child(3),  .sa-step-grid > *:nth-child(3)  { animation-delay: .12s; }
  .sa-products-item:nth-child(4),  .sa-feature-grid > *:nth-child(4),  .sa-step-grid > *:nth-child(4)  { animation-delay: .17s; }
  .sa-products-item:nth-child(5),  .sa-feature-grid > *:nth-child(5),  .sa-step-grid > *:nth-child(5)  { animation-delay: .22s; }
  .sa-products-item:nth-child(6),  .sa-feature-grid > *:nth-child(6),  .sa-step-grid > *:nth-child(6)  { animation-delay: .27s; }
  .sa-products-item:nth-child(n+7),.sa-feature-grid > *:nth-child(n+7),.sa-step-grid > *:nth-child(n+7){ animation-delay: .3s; }

  /* ---------- things that answer the pointer ---------- */

  /* Footer links: the underline grows from the left rather than switching on,
     which is the difference between a hover state and a hover *transition*.
     The navbar is left alone — it already animates its own pill background,
     and a second effect underneath would fight it. */
  .sa-footer a,
  a.sa-link {
    position: relative;
    transition: color .22s var(--fl-ease);
  }
  .sa-footer a::after,
  a.sa-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1px;
    background: currentColor;
    opacity: .65;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s var(--fl-ease);
  }
  .sa-footer a:hover::after,
  a.sa-link:hover::after { transform: scaleX(1); }

  /* Product art leans in slightly under the pointer. The card clips it, so
     the image grows inside a frame that does not move. */
  .sa-product-card { overflow: hidden; }
  .sa-product-card img {
    transition: transform .55s var(--fl-ease);
    will-change: transform;
  }
  .sa-product-card:hover img { transform: scale(1.045); }

  /* Buttons: a small press. Paired with the theme's own shine, it gives a
     button a beginning and an end. */
  .sa-btn, button, [type="submit"] {
    transition: transform .16s var(--fl-ease), box-shadow .22s var(--fl-ease),
                background-color .22s var(--fl-ease), color .22s var(--fl-ease);
  }
  .sa-btn:active, button:active, [type="submit"]:active { transform: translateY(1px); }

  /* The FAQ is a class-toggled panel rather than a <details>, so the height is
     already handled by the theme. What was missing is the chevron: it used to
     flip instantly while the panel eased open. */
  .sa-faq-item svg { transition: transform .3s var(--fl-ease); }
  .sa-faq-item:has(.faq-panel-open) svg { transform: rotate(180deg); }

  .faq-panel-inner { transition: opacity .3s var(--fl-ease) .05s; }
  .faq-panel:not(.faq-panel-open) .faq-panel-inner { opacity: 0; }

  /* Inputs settle into focus instead of snapping. */
  input, textarea, select {
    transition: border-color .2s var(--fl-ease), box-shadow .2s var(--fl-ease), background-color .2s var(--fl-ease);
  }
}

/* Smooth anchor scrolling is a transition too, and it is safe to leave on for
   everyone — the reduced-motion media query below turns it off for those who
   asked. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}