/* Byrass & Rings — shared design system
   Palette: Olive Ink #1A2517 · Soft Sage #ACC8A2 · Canvas #F4F7F1 · Brass #C28E3F
   Display/label: Space Grotesk · Body: Inter
*/

:root {
  --olive: #1A2517;
  --olive-soft: #2C3D26;
  --sage: #ACC8A2;
  --sage-deep: #87A87A;
  --canvas: #F4F7F1;
  --surface: #FBFCF8;
  --brass: #C28E3F;
  --brass-deep: #9C6E2C;
  --muted: #5C6E52;
  --line: #D7E0CF;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--canvas);
  color: var(--olive);
}

.font-display {
  font-family: 'Space Grotesk', sans-serif;
}

/* Eyebrow / label treatment — used for section markers throughout */
.eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-deep);
}

.eyebrow.on-dark { color: var(--sage); }

/* Hairline divider with brass tick — recurring structural device */
.tick-divider {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tick-divider::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brass);
  flex-shrink: 0;
}

/* Signature element: the calibration sweep.
   A line that travels once across the hero on load — half broadcast
   bar-scan, half retail barcode-scan. Used once per page, near the top. */
.scan-rule {
  position: relative;
  height: 2px;
  background: var(--line);
  overflow: hidden;
  border-radius: 2px;
}
.scan-rule::after {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--brass), transparent);
  animation: sweep 2.2s ease-in-out 0.2s 1 both;
}
@keyframes sweep {
  0%   { left: -30%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-rule::after { animation: none; left: 100%; opacity: 0; }
}

/* Subtle monitor-noise texture for dark olive panels */
.signal-texture {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(172, 200, 162, 0.05) 0px,
    rgba(172, 200, 162, 0.05) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Templated header/footer render as transparent wrappers so the fixed
   header, drawer, and footer behave exactly as if they were inline markup */
site-header, site-footer { display: contents; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -8px rgba(26, 37, 23, 0.18);
}

/* Header gains a shadow once the page has scrolled past the top */
#site-header-bar.is-scrolled {
  box-shadow: 0 2px 12px -4px rgba(26, 37, 23, 0.15);
}

/* Scroll-reveal: elements fade and rise into place as they enter view */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Hero entrance: a quiet fade-up for the first thing a visitor reads,
   timed just after the calibration sweep begins */
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.7s ease forwards;
}
.fade-in-up.delay-1 { animation-delay: 0.12s; }
.fade-in-up.delay-2 { animation-delay: 0.24s; }
.fade-in-up.delay-3 { animation-delay: 0.36s; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fade-in-up { animation: none; opacity: 1; transform: none; }
}

/* Gallery filter crossfade */
[data-tag] {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
[data-tag].is-hiding {
  opacity: 0;
  transform: scale(0.97);
}

.btn-primary {
  background: var(--olive);
  color: var(--canvas);
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn-primary:hover { background: var(--olive-soft); }
.btn-primary:active { transform: scale(0.98); }

.btn-brass {
  background: var(--brass);
  color: var(--olive);
  transition: background 0.2s ease, transform 0.15s ease;
}
.btn-brass:hover { background: var(--brass-deep); color: var(--canvas); }
.btn-brass:active { transform: scale(0.98); }

.btn-outline {
  border: 1px solid var(--olive);
  color: var(--olive);
  transition: background 0.2s ease;
}
.btn-outline:hover { background: rgba(26, 37, 23, 0.06); }

/* Nav */
.nav-link {
  position: relative;
  color: var(--muted);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 14px;
  letter-spacing: 0.04em;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--brass);
  transition: width 0.2s ease;
}
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }
.nav-link.active { color: var(--olive); }

/* Mobile drawer */
.drawer-transition { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

/* Split hero panel divider (signature layout device, used on Home) */
.split-frame {
  position: relative;
}
.split-frame::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--brass), transparent);
}
@media (max-width: 1023px) {
  .split-frame::before { display: none; }
}