/* Reset, fluid typography, safe-area iOS, background layers. */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  background: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "ss03", "kern", "cv01";
  letter-spacing: -0.005em;
  overflow-x: clip;
  min-height: 100dvh;
  min-height: 100svh;
}

body.boot {
  opacity: 0;
  transition: opacity var(--d-base) var(--ease-power-out);
}
body.boot.ready { opacity: 1; }

img, svg, canvas, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-card-solid);
  color: var(--violet-2);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: var(--z-modal);
  transition: top var(--d-fast);
}
.skip-link:focus { top: calc(var(--safe-top) + var(--s-3)); }

:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}
.container--center { text-align: center; }
.container--center .hero__lead { margin-inline: auto; }

/* ── Aurora background (z-bg-fx) — produkcyjna estetyka frontendu ── */
.aurora {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg-fx);
  pointer-events: none;
  background: var(--grad-aurora);
  opacity: 0.95;
  animation: aurora-drift 38s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 1.5%, 0) scale(1.06); }
}

/* Mikro-tekstura — siatkowy dot-pattern + drobny noise */
.grain {
  position: fixed;
  inset: 0;
  z-index: var(--z-ui);
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.dot-grid {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg-fx);
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(148, 163, 184, 0.18) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: radial-gradient(ellipse 120% 100% at 50% 30%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 120% 100% at 50% 30%, #000 0%, transparent 70%);
  opacity: 0.4;
}

/* Vignette — radial + fioletowe halo z prawej */
.vignette {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg-fx);
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 90% at 50% 35%, transparent 35%, rgba(9, 11, 18, 0.55) 75%, rgba(9, 11, 18, 0.92) 100%),
    radial-gradient(circle 800px at 100% 0%, var(--accent-soft), transparent);
}

/* Scroll progress — gradient violet → magenta */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: var(--z-ui);
  background: linear-gradient(90deg, var(--cyan), var(--accent));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
  box-shadow: none;
}

/* Stage — canvas Three.js FIXED jako tło, opacity sterowane scrollem */
.stage {
  position: fixed;
  inset: 0;
  z-index: var(--z-canvas);
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  touch-action: pan-y pinch-zoom;
  opacity: 1;
  transition: opacity var(--d-slow) var(--ease-power-out);
  will-change: opacity;
}

/* Overlay — kontener wszystkich sekcji HTML nad canvasem */
.overlay {
  position: relative;
  z-index: var(--z-overlay);
  width: 100%;
}

/* Sekcje z solidnym tłem (czytelność tekstu nad 3D) */
.section--veiled {
  background:
    linear-gradient(180deg, transparent 0%, var(--bg-section-overlay) 14%, var(--bg-section-overlay) 86%, transparent 100%);
  position: relative;
}

/* iOS safe area */
.nav { padding-top: calc(var(--safe-top) + var(--s-3)); }

/* Drag-to-pan testimonials: blokuj zaznaczanie tekstu podczas ciągnięcia */
body.is-dragging-testi,
body.is-dragging-testi * {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grabbing !important;
}

/* Spotlight cursor — wykorzystywane na .has-spotlight z --mx/--my JS-binded */
.has-spotlight {
  position: relative;
  isolation: isolate;
}
.has-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(180px circle at var(--mx) var(--my), var(--violet), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--d-fast);
  pointer-events: none;
  z-index: 1;
}
.has-spotlight:hover::before { opacity: 0.8; }
.has-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(360px circle at var(--mx) var(--my), rgba(94, 234, 212, 0.08), transparent 40%);
  opacity: 0;
  transition: opacity var(--d-base);
  pointer-events: none;
  z-index: 0;
}
.has-spotlight:hover::after { opacity: 1; }

/* Print */
@media print {
  .stage, .grain, .vignette, .aurora, .dot-grid, .scroll-progress { display: none; }
  body { background: white; color: black; }
}