/* Tailwind (CDN) handles the UI. This file holds the things utilities can't: a global motion killswitch, dark-mode color overrides, and the industrial-lubricant-brand texture layer (metal grain, hazard-stripe dividers, spec badges). */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Industrial brand identity: display type reads as stamped/spec-sheet type across the whole site.
   Orbitron only ships useful weights from 700 up (its 400 is thin/spaced, unlike the bold
   chamfered PETRO MAG wordmark it's matching) and is noticeably wider than the Bebas Neue it
   replaced, so headings need both a heavier default weight and tighter tracking to avoid
   overflowing the layout's existing (Bebas-tuned) sizes. */
.font-display { text-transform: uppercase; font-weight: 900; letter-spacing: -0.01em; }

/* Brushed-metal grain: layered on dark (navy) sections behind the existing gradients/radials. */
.metal-texture { position: relative; }
.metal-texture::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 3px),
    linear-gradient(rgba(237,28,36,.04), rgba(237,28,36,0));
}
.metal-texture > * { position: relative; z-index: 1; }

/* Hazard-stripe divider: thin industrial marker used to open/close a section, like a spec-sheet rule. */
.hazard-rule {
  height: 4px;
  background-image: repeating-linear-gradient(45deg, #ED1C24 0 10px, #000000 10px 20px);
  opacity: .85;
}

/* Category icon badge: circular spec-plate marker on each product-line card. */
.cat-badge {
  position: absolute; top: 16px; left: 16px; z-index: 10;
  width: 44px; height: 44px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(237,28,36,.45);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.cat-badge svg { width: 22px; height: 22px; color: #F2666B; }
.cat-badge .lottie-icon { width: 24px; height: 24px; }

/* Spec chip: small uppercase tag used for viscosity grade / product-line labels, styled like a spec-sheet stamp. */
.spec-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 5px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.1);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
}
.dark .spec-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.spec-chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 9999px; background: #ED1C24; flex: none;
}

/* Lottie animated icons: circular plate (matches .cat-badge's material) sized for section grids. */
.lottie-badge {
  width: 96px; height: 96px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.18);
  margin-bottom: 22px;
}
.lottie-badge .lottie-icon { width: 56px; height: 56px; }
.dark .lottie-badge { background: #0f172a; border-color: rgba(255,255,255,.1); }
/* Some source icons are pure white line-art (e.g. the truck) — invert so they read as
   dark strokes on the light badge instead of disappearing. */
.lottie-icon.flip-dark { filter: invert(1); }
.dark .lottie-icon.flip-dark { filter: none; }
/* Opposite case: icons drawn in dark navy/black read fine on the light badge but vanish
   against the dark-mode badge (#0f172a) — invert only in dark mode. */
.dark .lottie-icon.dark-invert { filter: invert(1); }
/* .cat-badge is always a dark navy plate (it sits on a photo, not the theme background),
   unlike .lottie-badge which flips between light/dark — so dark-native icons placed in it
   (e.g. the tire/gear sector icons) need to invert unconditionally, not just in dark mode. */
.lottie-icon.always-invert { filter: invert(1); }

/* Hero floating animation card: supplementary visual, desktop only (hero copy needs the
   full width on narrow screens). */
.hero-lottie-card {
  position: absolute; right: 48px; bottom: 48px; z-index: 10;
  width: 190px; padding: 18px 18px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(237,28,36,.3);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.5);
}
.hero-lottie-card .lottie-icon { width: 100%; height: 130px; }

/*
  Dark mode. The navy chrome (nav/hero/footer/CTA banners/certifications/stats) already reads
  correctly in both modes and is left untouched. Only the light content sections
  (bg-white cards, bg-surface page background, dark-navy text on them) need a dark counterpart.
  Attribute-selectors (not Tailwind's escaped class selectors) so this doesn't have to fight
  Tailwind's own generated CSS specificity or escaping rules.
*/
.dark [class*="bg-surface"]:not([class*="bg-surface/"]) { background-color: #020617; }
.dark [class*="bg-white"]:not([class*="bg-white/"]) { background-color: #0f172a; }

/* `~=` matches a literal whitespace-separated class token, not a substring — `*=` was also
   matching `hover:text-primary` / `hover:bg-gold-gradient` (e.g. footer-social icons), forcing
   permanent navy-on-navy text instead of leaving it as a hover-only style. */
.dark [class~="text-primary"] { color: #ffffff; }
/* Unconditional (both themes): buttons/badges on the red gold-gradient need white text for
   contrast — text-primary itself is black now (charte #000000), which would otherwise sit
   black-on-red. */
[class~="bg-gold-gradient"][class~="text-primary"] { color: #ffffff; }

.dark [class*="text-secondary"] { color: #cbd5e1; }
.dark [class*="text-slate-500"] { color: #94a3b8; }

.dark [class*="border-primary/[.06]"],
.dark [class*="border-primary/[.07]"],
.dark [class*="border-primary/[.08]"] { border-color: rgba(255,255,255,.1); }

.dark ::selection { background: #ED1C24; color: #000000; }

/*
  Navbar scroll state. At the top of the page it stays the transparent navy-tint / white-text
  look (blends over the dark hero/banner underneath, same in both themes). Once scrolled past
  the hero, #navbar gets a `nav-scrolled` marker class (added in main.js) and goes solid:
  white in light mode, black in dark mode. ID selector gives this enough specificity to win
  over the Tailwind utility classes without !important.
*/
#navbar.nav-scrolled { background-color: rgba(255,255,255,.97); }
#navbar.nav-scrolled a[class*="text-white/90"] { color: #000000; }
#navbar.nav-scrolled a[class*="text-white/90"]:hover { color: #373B3D; }
#navbar.nav-scrolled .nav-bar-line { background-color: #000000; }
#navbar.nav-scrolled .nav-sep { background-color: rgba(0,0,0,.15); }
#navbar.nav-scrolled #themeToggle { color: rgba(0,0,0,.7); }
#navbar.nav-scrolled #themeToggle:hover { color: #ED1C24; background-color: rgba(0,0,0,.06); }
#navbar.nav-scrolled #langSwitch { color: rgba(0,0,0,.7); border-color: rgba(0,0,0,.25); }
#navbar.nav-scrolled #langSwitch:hover { color: #ED1C24; border-color: #ED1C24; }

.dark #navbar.nav-scrolled { background-color: rgba(0,0,0,.93); }
.dark #navbar.nav-scrolled a[class*="text-white/90"] { color: rgba(255,255,255,.9); }
.dark #navbar.nav-scrolled a[class*="text-white/90"]:hover { color: #ffffff; }
.dark #navbar.nav-scrolled .nav-bar-line { background-color: #ffffff; }
.dark #navbar.nav-scrolled .nav-sep { background-color: rgba(255,255,255,.15); }
.dark #navbar.nav-scrolled #themeToggle { color: rgba(255,255,255,.8); }
.dark #navbar.nav-scrolled #themeToggle:hover { color: #F2666B; background-color: rgba(255,255,255,.08); }
.dark #navbar.nav-scrolled #langSwitch { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.2); }
.dark #navbar.nav-scrolled #langSwitch:hover { color: #F2666B; border-color: #F2666B; }

/*
  Product photo panels. Several bottles are translucent (AdBlue jerrycans, antigel),
  so a dark backdrop shows through them and they look hollow. Keep the photo
  container white in dark mode — placed after the generic dark overrides so it wins
  at equal specificity.
*/
.dark .product-photo { background-color: #ffffff; }

/*
  Navbar logo: two pre-composed lockups (PETRO MAG + MIDAN), one light-colored for navy/black
  chrome, one dark-colored for white chrome. Navbar is navy at the top in both themes (over the
  hero), so the light-colored logo is the default; it only swaps to the dark-colored one once
  scrolled in light mode, when the bar itself turns white.
*/
.navbar-logo-dark { display: none; }
#navbar.nav-scrolled .navbar-logo-light { display: none; }
#navbar.nav-scrolled .navbar-logo-dark { display: block; }
.dark #navbar.nav-scrolled .navbar-logo-dark { display: none; }
.dark #navbar.nav-scrolled .navbar-logo-light { display: block; }

/*
  Footer: now theme-aware (unlike nav/hero/CTA) — light bg + dark text in light mode,
  navy bg + white text in dark mode (via the generic bg-white/text-secondary/text-primary
  overrides above). Needs its own logo swap (1:1 with theme, no scroll axis) and its own
  social-icon tint since bg-white/5 on a now-white footer would be invisible.
*/
.footer-logo-light { display: none; }
.dark .footer-logo-dark { display: none; }
.dark .footer-logo-light { display: block; }

.footer-social { background-color: rgba(0,0,0,.05); border: 1px solid rgba(0,0,0,.1); }
.dark .footer-social { background-color: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }