/* ============================================================
   nav-glass.css — the smoked-glass navigation
   ------------------------------------------------------------
   ONE navigation surface for the whole storefront.

   WHY THIS EXISTS
   The nav was implemented three different ways across eight pages:
     • home / journal / drops : mix-blend-mode:difference, NO background
     • product / contact / about : rgba(10,10,10, .72 / .65 / .5) blur(14px)
     • NEUN product : rgba(243,242,238,.78) blur(16px)
   The blend-difference variant is what made scrolling feel noisy: it has no
   surface at all, it inverts against whatever passes underneath, so the nav
   flickers and the content reads straight through it. It is also fundamentally
   incompatible with backdrop-filter — you cannot blur behind an element that
   is blending with what is behind it. So the blend mode is removed, not tuned.

   THE MODEL
   The nav is a SURFACE, not a card: edge to edge, no radius, no shadow,
   one hairline. It is quiet at the top so the hero reads, and resolves into
   smoked anthracite glass once the page moves. Fear of God / Represent /
   Stone Island, not a SaaS header.
   ============================================================ */

.ds-nav {
  /* --- tokens: one place, both houses --- */
  --nav-tint: 18, 18, 18;              /* anthracite, never pure black */
  --nav-alpha-top: 0.06;               /* at rest: almost transparent */
  --nav-alpha-scrolled: 0.72;          /* smoked glass */
  --nav-blur-top: 6px;
  --nav-blur-scrolled: 18px;
  --nav-saturate: 140%;
  --nav-hairline: rgba(255, 255, 255, .06);
  --nav-hairline-top: rgba(255, 255, 255, 0);
  --nav-inner: rgba(255, 255, 255, .04);
  --nav-ink: #f2f0ec;
  --nav-ink-dim: rgba(242, 240, 236, .62);
  --nav-accent: #C9A87C;
  --nav-dur: 300ms;                    /* inside the 250–350ms band */
  --nav-ease: cubic-bezier(.22, .61, .36, 1);   /* ease-out */

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  box-sizing: border-box;
  color: var(--nav-ink);

  /* The blend mode is gone on purpose — see header. */
  mix-blend-mode: normal;

  background-color: rgba(var(--nav-tint), var(--nav-alpha-top));
  -webkit-backdrop-filter: blur(var(--nav-blur-top)) saturate(var(--nav-saturate));
  backdrop-filter: blur(var(--nav-blur-top)) saturate(var(--nav-saturate));
  border-bottom: 1px solid var(--nav-hairline-top);
  /* Soft inner highlight only — no drop shadow, no glow. */
  box-shadow: inset 0 1px 0 var(--nav-inner);

  transition:
    background-color var(--nav-dur) var(--nav-ease),
    -webkit-backdrop-filter var(--nav-dur) var(--nav-ease),
    backdrop-filter var(--nav-dur) var(--nav-ease),
    border-color var(--nav-dur) var(--nav-ease);
}

/* ---------- scrolled: resolve into smoked glass ---------- */
.ds-nav.is-scrolled {
  background-color: rgba(var(--nav-tint), var(--nav-alpha-scrolled));
  -webkit-backdrop-filter: blur(var(--nav-blur-scrolled)) saturate(var(--nav-saturate));
  backdrop-filter: blur(var(--nav-blur-scrolled)) saturate(var(--nav-saturate));
  border-bottom-color: var(--nav-hairline);
}

/* ---------- NEUN: same object, warm neutral glass ---------- */
:root[data-dt-theme="light"] .ds-nav,
.ds-nav[data-theme="light"] {
  --nav-tint: 243, 242, 238;
  --nav-alpha-top: 0.10;
  --nav-alpha-scrolled: 0.78;
  --nav-hairline: rgba(22, 21, 18, .10);
  --nav-inner: rgba(255, 255, 255, .40);
  --nav-ink: #161512;
  --nav-ink-dim: rgba(22, 21, 18, .58);
  --nav-accent: #8A7A64;
}

/* ============================================================
   Safari / no-backdrop-filter fallback
   ------------------------------------------------------------
   Without a real blur the glass would just be a thin tint and the content
   WOULD read through it — the exact bug we are fixing. So when the filter
   is unsupported we trade translucency for legibility: a near-opaque tint.
   (Safari does support -webkit-backdrop-filter; this is for the rest.)
   ============================================================ */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ds-nav { background-color: rgba(var(--nav-tint), 0.30); }
  .ds-nav.is-scrolled { background-color: rgba(var(--nav-tint), 0.94); }
}

/* ============================================================
   Announcement ticker — inside the nav, not a second bar
   ------------------------------------------------------------
   Previously a standalone mid-page band (background:#2C2C2C, 24px Bebas).
   Folded in here so the nav reads as ONE object. At nav scale it has to be
   small and quiet: this is a whisper, not a shout.
   ============================================================ */
.ds-nav__ticker {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--nav-hairline);
  /* Fixed height so folding it in can never shift layout. */
  height: 30px;
  display: flex;
  align-items: center;
  /* Fade the ends so words dissolve rather than collide with the edge. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.ds-nav__ticker-track {
  display: inline-flex;
  align-items: center;
  will-change: transform;              /* transform only — never layout */
  animation: ds-nav-ticker 42s linear infinite;
}
.ds-nav__ticker-item {
  font-family: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--nav-ink-dim);
  margin: 0 26px;
  line-height: 1;
}
.ds-nav__ticker-sep {
  font-family: 'Oswald', sans-serif;
  font-size: 9px;
  letter-spacing: .2em;
  color: var(--nav-accent);
  opacity: .8;
  line-height: 1;
}
@keyframes ds-nav-ticker {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* track is duplicated 2x */
}
.ds-nav:hover .ds-nav__ticker-track { animation-play-state: paused; }

/* ---------- the main row ---------- */
.ds-nav__bar {
  padding: 20px 24px;
  transition: padding var(--nav-dur) var(--nav-ease);
}
/* Tighten slightly once scrolled: less chrome, more product. */
.ds-nav.is-scrolled .ds-nav__bar { padding-top: 14px; padding-bottom: 14px; }

/* The logo must stay crisp: never scale it with a filter or fractional
   transform. Only opacity/size change, and the SVG renders at its own res. */
.ds-nav img { image-rendering: auto; }

@media (max-width: 768px) {
  .ds-nav__bar { padding: 14px 20px; }
  .ds-nav.is-scrolled .ds-nav__bar { padding-top: 11px; padding-bottom: 11px; }
  .ds-nav__ticker { height: 26px; }
  .ds-nav__ticker-item { font-size: 9px; letter-spacing: .24em; margin: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .ds-nav,
  .ds-nav__bar { transition: none; }
  /* A permanently sliding ticker is motion the user asked us not to show. */
  .ds-nav__ticker-track { animation: none; transform: none; }
  .ds-nav__ticker {
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 92%, transparent);
    mask-image: linear-gradient(to right, #000 0, #000 92%, transparent);
  }
}