/* ==========================================================================
   6ixmerchandise — homepage shell + shared 6M primitives (FE-2)
   Ported from the live Shopify Horizon theme:
     assets/6m-design.css   (section-head, buttons, countdown, reveal, marquee)
     assets/6m-tokens.css   (type primitives)
   Nothing here is invented. Per-section CSS lives in
   inc/blocks/home-<slug>/style.css and depends on this file.

   Shared primitives are wrapped in :where() so they carry ZERO specificity —
   FE-1's base.css owns the site-wide definitions and will always win. These
   exist so the homepage renders correctly before/independently of base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell — live `main { max-width: 1440px }`, sections are full-bleed
      inside it and carry their own 18px / 48px / 64px gutters.
   -------------------------------------------------------------------------- */
body.sixm-home #inner-wrap,
body.sixm-home #inner-wrap.wrap,
body.sixm-home .sixm-home-main {
  max-width: 1440px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* The sections are full-bleed and bring their own vertical rhythm, so the
   homepage wrapper must not inherit Kadence's content spacing — its
   `.content-area { margin: var(--global-xxl-spacing) 0 }` opened an 80px white
   band between the header and the hero. front-page.php also drops the
   `content-area` class; this is the belt to that pair of braces. */
body.sixm-home .sixm-home-main,
body.sixm-home #inner-wrap > .content-area {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

/* Blocks are siblings in the flow; no extra wrappers, no grid gaps. */
.sixm-home-main > * {
  max-width: none;
}

/* --------------------------------------------------------------------------
   2. Type primitives (6m-tokens.css)
   -------------------------------------------------------------------------- */
:where(.s6m-eyebrow) {
  font-family: var(--6m-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
}

:where(.s6m-display) {
  font-family: var(--6m-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.95;
  text-transform: uppercase;
}

:where(.s6m-mono) {
  font-family: var(--6m-mono);
}

/* --------------------------------------------------------------------------
   3. The 6M button (6m-design.css) — radius 0, Inter 600/13px
   -------------------------------------------------------------------------- */
:where(.s6m-btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  font-family: var(--6m-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--6m-ink);
  background: var(--6m-ink);
  color: #fff;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
  border-radius: 0;
}
:where(.s6m-btn:hover) { transform: translateY(-1px); opacity: 0.95; }
:where(.s6m-btn--block) { width: 100%; }
:where(.s6m-btn--ghost) { background: transparent; color: var(--6m-ink); }
:where(.s6m-btn--invert) { background: #fff; color: var(--6m-ink); border-color: #fff; }
:where(.s6m-btn--signal) { background: var(--6m-signal); border-color: var(--6m-signal); color: #fff; }
:where(.s6m-btn--lg) { padding: 18px 24px; font-size: 14px; }
:where(.s6m-btn--sm) { padding: 9px 14px; font-size: 11px; }

/* --------------------------------------------------------------------------
   4. Shared section header — eyebrow + Anton title left, count + VIEW ALL right
      (`.s6m-section-head` in 6m-design.css, plus the later desktop trims)
   -------------------------------------------------------------------------- */
.s6m-section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0 18px;
  margin-bottom: 16px;
}
.s6m-section-head__sub {
  color: var(--6m-muted);
  font-family: var(--6m-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.s6m-section-head__title {
  font-family: var(--6m-display);
  font-weight: 400;
  font-size: 32px;
  margin: 4px 0 0;
  text-transform: uppercase;
  line-height: 0.95;
  color: var(--6m-ink);
}
.s6m-section-head__right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.s6m-section-link {
  color: var(--6m-signal);
  font-family: var(--6m-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.s6m-section-link:hover { text-decoration: underline; }

@media (min-width: 768px) {
  .s6m-section-head { padding: 0 48px; }
  /* 56px from the base rule, trimmed to 40px by the later editorial override */
  .s6m-section-head__title { font-size: 40px; letter-spacing: -0.005em; }
}
@media (min-width: 1280px) {
  .s6m-section-head__title { font-size: 44px; }
}

/* --------------------------------------------------------------------------
   5. Countdown cells (shared with the PDP / lookbook countdowns)
   -------------------------------------------------------------------------- */
.s6m-countdown {
  display: inline-flex;
  gap: 4px;
  font-family: var(--6m-mono);
  font-weight: 700;
}
.s6m-countdown__cell {
  background: var(--6m-ink);
  color: #fff;
  padding: 5px 8px;
  min-width: 30px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-radius: 0;
}
.s6m-countdown__cell--signal { background: var(--6m-signal); }
.s6m-countdown__label {
  font-size: 8px;
  letter-spacing: 0.1em;
  display: block;
  margin-top: 4px;
  font-weight: 500;
  opacity: 0.7;
}

/* --------------------------------------------------------------------------
   6. Chip pulse + marquee keyframes (identical to the live definitions)
   -------------------------------------------------------------------------- */
@keyframes s6m-chip-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
@keyframes s6m-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

/* --------------------------------------------------------------------------
   7. Progressive reveal — content is visible by DEFAULT. The animation only
      layers on once JS adds .js-reveal to <html>, so a failed observer can
      never leave a giant Anton headline invisible. Ported verbatim in intent.
   -------------------------------------------------------------------------- */
.s6m-fade { opacity: 1; transform: none; }
.s6m-line-reveal { opacity: 1; transform: none; }

.js-reveal .s6m-fade,
.js-reveal .s6m-line-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}
.js-reveal .s6m-line-reveal {
  transition-duration: 0.7s;
  transition-delay: 0.1s;
}
.js-reveal .s6m-fade.s6m-in,
.js-reveal .s6m-line-reveal.s6m-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}
.s6m-stagger > .s6m-fade:nth-child(2) { transition-delay: 0.12s; }
.s6m-stagger > .s6m-fade:nth-child(3) { transition-delay: 0.24s; }
.s6m-stagger > .s6m-fade:nth-child(4) { transition-delay: 0.36s; }
.s6m-stagger > .s6m-fade:nth-child(5) { transition-delay: 0.48s; }

/* --------------------------------------------------------------------------
   8. Reduced motion — every marquee, autoplay and reveal stands still.
      This is a contract carried over from the original theme.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .s6m-fade,
  .js-reveal .s6m-line-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   9. Visually-hidden helper for the block-editor placeholders and a11y labels
   -------------------------------------------------------------------------- */
.sixm-vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}