/* eXpress Autosattlerei - Global Styles
   Dark-first editorial design. Tailwind handles tokens; this file
   holds animations, focus states, and typographic micro-details. */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  background-color: #0F0D0B;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Bricolage Grotesque feature settings - enable optical sizing + ink-trap details */
h1, h2, h3, h4 {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
  font-optical-sizing: auto;
}

/* Editorial display heading: clamp-based fluid scaling, tight tracking.
   Capped lower (6.5rem) so the hero CTAs stay above the fold on 720p/13" laptops. */
.display-xl {
  font-family: '"Bricolage Grotesque"', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 6.5rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-variation-settings: "wdth" 85;
}

.display-lg {
  font-family: '"Bricolage Grotesque"', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(2.25rem, 6vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

/* Hairline divider, warm tint */
.divider-rule {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(232, 224, 212, 0.18), transparent);
}

.divider-rule-rust {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(196, 82, 26, 0.45), transparent);
}

/* Hero vignette: stronger left-side darkening so the headline (incl. rust accent)
   stays readable on top of warm leather imagery. Three stacked layers:
   1. directional left-to-right gradient anchors the text column in deep ink
   2. radial vignette softens edges
   3. base ink overlay for overall mood */
.hero-vignette::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 13, 11, 0.92) 0%, rgba(15, 13, 11, 0.78) 35%, rgba(15, 13, 11, 0.45) 65%, rgba(15, 13, 11, 0.25) 100%),
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(15, 13, 11, 0.15), rgba(15, 13, 11, 0.55) 70%, rgba(15, 13, 11, 0.85) 100%),
    linear-gradient(180deg, rgba(15, 13, 11, 0.45), rgba(15, 13, 11, 0.85));
  pointer-events: none;
}

/* Rust accent text on dark imagery - tight shadow stack lifts it off warm
   background tones without making it feel "outlined". */
.hero-accent {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.hero-accent-strong {
  text-shadow:
    0 2px 14px rgba(15, 13, 11, 0.85),
    0 1px 3px rgba(0, 0, 0, 0.75);
}

.hero-headline,
.hero-lede {
  text-shadow: 0 2px 12px rgba(15, 13, 11, 0.75);
}

/* Organic grain over dark sections - very subtle */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.87 0 0 0 0 0.74 0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Scroll-driven fade-up, gentler timing */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.16,.84,.3,1), transform .8s cubic-bezier(.16,.84,.3,1);
  will-change: opacity, transform;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { opacity: 1; transform: none; transition: none; }
  * {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}

/* Focus ring: rust accent, double-stroke for visibility on dark */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #C4521A;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Number lining for spec labels */
.tabular-nums {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Hover micro-affordance: subtle warm shift on image cards */
.img-warm-hover {
  transition: filter .5s ease, transform .5s ease;
}
.group:hover .img-warm-hover {
  filter: brightness(1.05) saturate(1.08) contrast(1.03);
  transform: scale(1.03);
}

/* Form field on dark */
.field {
  background-color: #1E1A17;
  color: #E8E0D4;
  border: 1px solid rgba(232, 224, 212, 0.14);
  padding: 0.85rem 1rem;
  width: 100%;
  transition: border-color .2s ease, background-color .2s ease;
}
.field:focus {
  border-color: #C4521A;
  background-color: #141210;
  outline: none;
}
.field::placeholder {
  color: rgba(232, 224, 212, 0.35);
}

/* Editorial inline link underline (warm) */
.link-rust {
  border-bottom: 1px solid rgba(196, 82, 26, 0.7);
  transition: border-color .2s ease, color .2s ease;
}
.link-rust:hover {
  color: #C4521A;
  border-bottom-color: #C4521A;
}