/* ============================================================================
   MONO. Homepage — AAA storefront styles
   Scoped to the home page body. Loaded in {% block head_extra %} (home.html).
   Depends on the design tokens in styles.css (--bg/--surface/--ink/--muted/
   --line/--chip/--pat/--pat2, ramp --e0..--e6, easings + durations).
   ============================================================================ */

/* ── outlined accent ("Nothing extra.") — signature stroke treatment.
     Overrides styles.css .outline-word (which fills with ink): pure stroke,
     transparent fill, no shadow, no duplicate node. ──────────────────────── */
#hero .outline-word {
  -webkit-text-stroke: 1.5px var(--ink);
  color: transparent;
  text-shadow: none;
  paint-order: stroke fill;
}

/* ── hero kicker label (skeleton .lbl) ──────────────────────────────────── */
.lbl { color: var(--ink); opacity: 0.75; }

/* ── hero deck — cursor spotlight + grain + card physics ────────────────── */
#heroDeck { position: relative; isolation: isolate; }
#heroDeck::before {
  /* cursor spotlight — --mx/--my driven by home.js (rAF-throttled) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 60%) var(--my, 20%),
    var(--pat2), transparent 70%);
}
#heroDeck::after {
  /* grain overlay */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* container height comes from the skeleton classes (h-[420px] lg:h-[480px]);
   these are hard constraints so the whole deck stays above the fold. */
#heroDeck { max-width: 480px; }

.deck-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  max-width: 300px;
  transition: box-shadow 0.4s var(--ease-utility);
  transform-origin: 50% 50%;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.22), 0 4px 12px -6px rgba(0, 0, 0, 0.12);
}
@media (min-width: 768px) {
  .deck-card { width: 340px; max-width: 340px; }
}
.dark .deck-card { box-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.7), 0 4px 12px -6px rgba(0, 0, 0, 0.5); }
/* no scale on the feature card — same size as the rest; hierarchy via z-index/shadow */
.deck-card--feature { transform: translate(-50%, -50%); z-index: 3; }
.deck-card--left    { transform: translate(-50%, -50%) rotate(-6deg) translateX(-24px) translateY(8px); z-index: 2; }
.deck-card--right   { transform: translate(-50%, -50%) rotate(6deg) translateX(24px) translateY(8px); z-index: 1; }
.deck-card:hover    { z-index: 10; box-shadow: 0 30px 60px -20px rgba(0,0,0,.28); }
/* mobile: a tight 3-card fan reads as broken slivers — show a clean single
   feature card and fold the side cards behind it into a subtle edge */
@media (max-width: 639px) {
  .deck-card--left, .deck-card--right { display: none; }
}
/* filter lives on .deck-media (grayscale is static, never re-applied per
   frame); the hover scale is the ONLY thing animating on the img, so the
   img layer never gets re-rasterized with a filter → no blur */
.deck-card .deck-media { filter: grayscale(1) contrast(1.02); }
.deck-card .deck-media img { transition: transform 0.6s var(--ease-cinematic); }
.dark .deck-card .deck-media { filter: grayscale(1) contrast(1.02) brightness(.9); }
.deck-card:hover .deck-media img { transform: scale(1.045); will-change: transform; }
.deck-index {
  display: inline-block;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--muted);
}
.deck-title {
  /* full product title, full card width — the feature product never
     ellipsizes: 2 lines at ~34 chars/line covers the longest MONO title */
  margin-top: 0.375rem;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  min-height: 2.3625rem; /* 2 lines — keeps card geometry stable across titles */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.deck-price { font-size: 0.9375rem; font-weight: 900; white-space: nowrap; }

/* ── flash sale — persistent inverted panel (fixed ink, both themes) ────── */
.flash-sale {
  --fs-bg: #0A0A0A;
  --fs-ink: #FAFAFA;
  --fs-muted: rgba(250,250,250,.62);
  --fs-line: rgba(250,250,250,.14);
  --fs-line-strong: rgba(250,250,250,.30);
  --fs-card-muted: rgba(10,10,10,.55);
  --fs-card-desc: rgba(10,10,10,.62);
  --fs-card-line: rgba(10,10,10,.1);
  background: var(--fs-bg);
  color: var(--fs-ink);
}
.flash-sale .flash-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(250,250,250,.13) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 120% at 15% 0%, #000 20%, transparent 70%);
  mask-image: radial-gradient(120% 120% at 15% 0%, #000 20%, transparent 70%);
}
.flash-sale .flash-glow {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(620px 300px at 88% -10%, rgba(250,250,250,.10), transparent 60%),
    radial-gradient(480px 260px at 8% 115%, rgba(250,250,250,.06), transparent 60%);
}
.flash-eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fs-muted);
}
.flash-h2 {
  margin-top: .625rem;
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 900; line-height: .98; letter-spacing: -.02em;
  text-wrap: balance;
}
.flash-cta, .flash-cta-2 {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 1.5rem; border-radius: 9999px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  transition: opacity .2s var(--ease-utility), background-color .2s, color .2s;
}
.flash-cta { background: var(--fs-ink); color: var(--fs-bg); }
.flash-cta:hover { opacity: .85; }
.flash-cta-2 { border: 1px solid var(--fs-line-strong); color: var(--fs-ink); }
.flash-cta-2:hover { background: rgba(250,250,250,.1); }

/* countdown cells */
.cd { display: inline-flex; align-items: center; gap: .5rem; }
.cd-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 3.5rem; padding: .625rem .5rem;
  border: 1px solid var(--fs-line); border-radius: .875rem;
  background: var(--fs-ink); color: var(--fs-bg);
}
.cd-num {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 1.6rem; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.cd-label {
  margin-top: .25rem;
  font-size: 8px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fs-card-muted);
}
.cd-sep { font-size: 1.5rem; color: var(--fs-muted); line-height: 1; }
.flash-cd-note {
  margin-top: .875rem; font-size: 11px; font-weight: 600;
  color: var(--fs-muted); letter-spacing: .02em;
}
.flash-hr { border: 0; border-top: 1px solid var(--fs-line); margin: 2.5rem 0; }

/* chips */
.flash-chip {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 1rem; border-radius: 9999px;
  border: 1px solid var(--fs-line-strong);
  font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fs-ink); transition: background-color .2s, color .2s;
}
.flash-chip:hover { background: var(--fs-ink); color: var(--fs-bg); }

/* offer cards */
.flash-card {
  display: flex; flex-direction: column;
  background: var(--fs-ink); color: var(--fs-bg);
  border-radius: 1rem; padding: 1.25rem 1.5rem;
}
.flash-card-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fs-card-muted);
}
.flash-card-title { margin-top: .5rem; font-size: 1.125rem; font-weight: 900; letter-spacing: -.01em; }
.flash-card-desc { margin-top: .375rem; font-size: .8125rem; color: var(--fs-card-desc); }
.flash-card-foot {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--fs-card-line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem;
}
.flash-code {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.flash-copy {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px;
  /* fixed min-width fits the "Copied" label — the label flip never reflows the foot row */
  min-width: 6.25rem;
  padding: 0 1rem; border-radius: 9999px;
  background: var(--fs-bg); color: var(--fs-ink);
  font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  transition: opacity .2s;
}
.flash-copy:hover { opacity: .82; }

/* dark theme: promo cards stop being white slabs — elevated surface +
   hairline, inverted Copy button, muted meta lines (countdown cells stay
   inverted-white: small crisp accents, not slabs) */
.dark .flash-sale .flash-card {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--fs-ink);
}
.dark .flash-sale .flash-card-kicker,
.dark .flash-sale .flash-card-desc { color: var(--fs-muted); }
.dark .flash-sale .flash-card-foot { border-top-color: var(--fs-line); }
.dark .flash-sale .flash-copy { background: var(--fs-ink); color: var(--fs-bg); }

/* ── press marquee ──────────────────────────────────────────────────────── */
.press-marquee { position: relative; }
.press-marquee .animate-marquee { will-change: transform; backface-visibility: hidden; }
/* pause on hover anywhere over the strip (the track is w-max, so hovering
   the container's empty sides never matched .animate-marquee:hover) */
.press-marquee:hover .animate-marquee { animation-play-state: paused; }
.press-marquee .marquee-fade {
  pointer-events: none; position: absolute; top: 0; bottom: 0; width: 7rem; z-index: 1;
}
.press-marquee .marquee-fade--l { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.press-marquee .marquee-fade--r { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }

/* ── category tiles ─────────────────────────────────────────────────────── */
.cat-tile { position: relative; overflow: hidden; border-radius: 1rem; background: var(--chip); }
.cat-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0) 46%);
}
.cat-tile img { transition: transform .7s var(--ease-cinematic); }
.cat-tile:hover img { transform: scale(1.05); }
.cat-tile .cat-label {
  position: absolute; left: .85rem; right: .85rem; bottom: .85rem; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: rgba(250,250,250,.92); color: #0A0A0A;
  border-radius: 9999px; padding: .7rem 1rem;
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.cat-tile .cat-label b { font-weight: 800; color: rgba(10,10,10,.55); }

/* ── reviews — monochrome star rating (no emoji font stack) ────────────── */
.rev-stars { font-size: .875rem; line-height: 1; letter-spacing: .2em; color: var(--ink); }
.rev-stars .rev-star-dim { color: var(--muted); opacity: .5; }

/* ── newsletter — lift the input off the page bg in dark mode ───────────── */
.dark #newsEmail { background: var(--chip); }

/* ── section rhythm ─────────────────────────────────────────────────────── */
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
}
.sec-eyebrow::before { content: ""; width: 1.75rem; height: 1px; background: var(--line); }

/* ── reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #heroDeck::before, #heroDeck::after, .flash-dots, .flash-glow { display: none; }
  .deck-card, .deck-card .deck-media img, .cat-tile img { transition: none !important; }
  .cd-num { transition: none !important; }
  .press-marquee .animate-marquee { animation: none !important; }
}