/* ==========================================================================
   RED ROUTE USA IMPORT — base.css
   Design tokens, reset, typography, layout primitives, animations
   ========================================================================== */

:root {
  /* --- Surfaces --- */
  --black: #050608;
  --ink: #0a0c10;
  --panel: #10131a;
  --panel-2: #161a23;
  --panel-3: #1d222d;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* --- Brand --- */
  --red: #e01b2d;
  --red-2: #ff3b4e;
  --red-deep: #8e0f1c;
  --red-glow: rgba(224, 27, 45, 0.38);
  --gold: #d8b46a;
  --cyan: #37d4e0;
  --violet: #8b5cf6;

  /* --- Text --- */
  --white: #f7f8fa;
  --text: #dfe3ea;
  --muted: #98a2b3;
  --dim: #6b7484;

  /* --- Effects --- */
  --radius-s: 8px;
  --radius: 14px;
  --radius-l: 22px;
  --radius-xl: 32px;
  --shadow-s: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  --shadow-red: 0 14px 44px rgba(224, 27, 45, 0.28);
  --blur: saturate(160%) blur(14px);

  /* --- Type --- */
  --font-display: "Barlow Condensed", "Oswald", "Arial Narrow", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", ui-monospace, monospace;

  /* --- Layout --- */
  --shell: 1240px;
  --shell-wide: 1440px;
  --gutter: clamp(18px, 4vw, 44px);
  --nav-h: 78px;

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
  -webkit-text-size-adjust: 100%;
  /* Zabezpieczenie: nic nie rozjezdza strony w poziomie.
     clip nie tworzy kontekstu przewijania, wiec position:sticky dalej dziala. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(15px, 0.4vw + 14px, 16.5px);
  line-height: 1.7;
  letter-spacing: 0.005em;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Subtle carbon-fibre / route-line texture behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(224, 27, 45, 0.16), transparent 62%),
    radial-gradient(880px 560px at 6% 8%, rgba(55, 212, 224, 0.07), transparent 60%),
    linear-gradient(180deg, #06070a 0%, #050608 45%, #07080c 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}

img,
svg,
video { max-width: 100%; display: block; }

a {
  color: inherit;
  text-decoration: none;
  transition: color 0.22s var(--ease), opacity 0.22s var(--ease);
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 0;
}

::selection {
  background: var(--red);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: 0.005em;
  color: var(--white);
  margin: 0 0 0.5em;
  text-transform: uppercase;
  /* dlugie slowa (np. ELEKTROMECHANIKA) nie wychodza poza ekran telefonu */
  overflow-wrap: break-word;
  hyphens: auto;
}

h1, .h1 { font-size: clamp(2.6rem, 6.4vw, 5.4rem); }
h2, .h2 { font-size: clamp(2rem, 4.2vw, 3.35rem); }
h3, .h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
h4, .h4 { font-size: clamp(1.1rem, 1.4vw, 1.28rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

strong, b { color: var(--white); font-weight: 600; }

.lead {
  font-size: clamp(1.03rem, 1.2vw, 1.2rem);
  color: var(--muted);
  line-height: 1.78;
  max-width: 62ch;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red-2);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--red), transparent);
  border-radius: 2px;
}

.eyebrow--center { justify-content: center; }

.accent { color: var(--red-2); }

.gradient-text {
  background: linear-gradient(103deg, #fff 6%, #ffd7db 34%, var(--red-2) 74%, var(--red) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.outline-text {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.28);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.text-muted { color: var(--muted); }
.text-dim { color: var(--dim); }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

.small {
  font-size: 0.86rem;
  line-height: 1.62;
}

.tiny {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--dim);
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.shell--wide { max-width: var(--shell-wide); }
.shell--narrow { max-width: 900px; }

.section {
  position: relative;
  padding-block: clamp(64px, 8.5vw, 128px);
}

.section--tight { padding-block: clamp(48px, 5.5vw, 82px); }

.section--alt {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 55%),
    var(--ink);
  border-block: 1px solid var(--line);
}

.section-head {
  max-width: 780px;
  margin-bottom: clamp(34px, 4vw, 58px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head--center .lead { margin-inline: auto; }

.section-head--split {
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
}

.section-head--split > div:first-child { max-width: 720px; }

.grid { display: grid; gap: clamp(16px, 1.8vw, 26px); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.split {
  display: grid;
  gap: clamp(30px, 4vw, 66px);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.stack { display: grid; gap: 14px; }
.stack-lg { display: grid; gap: 26px; }
.row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.row--between { justify-content: space-between; }
.row--center { justify-content: center; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Decorative "red route" line running through a section */
.route-line {
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--red-glow) 20%, var(--red) 50%, var(--red-glow) 80%, transparent);
  opacity: 0.7;
  pointer-events: none;
}
.route-line--top { top: 0; }
.route-line--bottom { bottom: 0; }

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes rr-fade-up {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

@keyframes rr-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(1.35); }
}

@keyframes rr-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes rr-spin {
  to { transform: rotate(360deg); }
}

@keyframes rr-sweep {
  0% { transform: translateX(-120%) skewX(-18deg); }
  60%, 100% { transform: translateX(320%) skewX(-18deg); }
}

@keyframes rr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes rr-twinkle {
  0%, 100% { opacity: 0.16; }
  50% { opacity: 1; }
}

@keyframes rr-glow-shift {
  0%, 100% { filter: hue-rotate(0deg); }
  50% { filter: hue-rotate(38deg); }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.float-slow { animation: rr-float 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Focus visibility (accessibility)
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--red-2);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--red);
  color: #fff;
  border-radius: var(--radius-s);
  font-weight: 600;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus { transform: none; }

/* Scrollbar */
@supports selector(::-webkit-scrollbar) {
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: #0a0c10; }
  ::-webkit-scrollbar-thumb {
    background: #262c38;
    border-radius: 99px;
    border: 2px solid #0a0c10;
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--red-deep); }
}