/* ============ BASE — reset, typografia, prymitywy ============ */

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

html { scroll-behavior: smooth; overflow-x: clip; }
html[data-tier="full"] { scroll-behavior: auto; } /* Lenis przejmuje */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--cream);
  background: var(--navy-night);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ziarno na całości — spaja WebGL z DOM-em */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--noise);
  opacity: .5;
  pointer-events: none;
  z-index: 90;
  mix-blend-mode: overlay;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: normal; }
::selection { background: var(--pink); color: var(--cream); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.02em;
}
.h2 em { color: var(--pink); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  opacity: .7;
  margin-bottom: 22px;
}
.eyebrow__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  display: inline-block;
}

/* ---------- Canvas / warstwy ---------- */
.gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-gl);
  pointer-events: none;
}

main, footer { position: relative; z-index: var(--z-content); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  padding: 18px 36px;
  border-radius: 999px;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base) ease, background-color var(--dur-base) ease, color var(--dur-base) ease;
}
.btn:hover { transform: translateY(-3px) scale(1.02); }
.btn:active { transform: translateY(0) scale(.98); }

.btn--solid {
  background: var(--cream);
  color: var(--navy-night);
  box-shadow: 0 18px 40px rgba(13, 8, 38, .35);
}
.btn--solid:hover { box-shadow: 0 24px 56px rgba(255, 31, 143, .4); }

.btn--ghost {
  border: 1.5px solid rgba(255, 247, 230, .4);
  color: var(--cream);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--cream); }

.btn--sm { padding: 12px 24px; font-size: 15px; }

.btn__blob {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 201, 60, .65), rgba(255, 31, 143, .0) 55%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.btn:hover .btn__blob { opacity: 1; }

/* ---------- Bottle anchors / fallbacks ---------- */
.bottle-anchor { pointer-events: none; }
.bottle-anchor--ghost {
  position: absolute;
  width: min(30vw, 380px);
  aspect-ratio: 4 / 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.bottle-fallback {
  display: none;
  filter: drop-shadow(0 32px 48px rgba(13, 8, 38, .35));
}

/* ---------- Loader ---------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-night);
  transition: opacity .7s var(--ease-out-expo), visibility .7s;
}
.loader.is-done { opacity: 0; visibility: hidden; }
.loader__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: .04em;
  line-height: 1;
}
.loader__word { color: rgba(255, 247, 230, .25); }
.loader__word--fill {
  background: var(--grad-ribbon);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: loaderShimmer 1.4s ease infinite;
}
@keyframes loaderShimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.loader__pct {
  margin-top: 28px;
  font-size: 14px;
  color: var(--cream-mute);
  font-variant-numeric: tabular-nums;
}
.loader__pct span { color: var(--yellow); }

.loader__bar {
  margin-top: 14px;
  width: min(240px, 56vw);
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 247, 230, .14);
  overflow: hidden;
}
.loader__bar span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--grad-ribbon);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease-out;
}

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--gutter);
  transition: transform .45s var(--ease-out-expo);
}
.nav.is-hidden { transform: translateY(-110%); }

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .01em;
}
.nav__brand em { color: var(--yellow); margin-left: 5px; }
.nav__sun { width: 22px; height: 22px; color: var(--yellow); }
.nav__brand:hover .nav__sun { animation: sunSpin 1.2s var(--ease-out-expo); }
@keyframes sunSpin { to { transform: rotate(180deg); } }

.nav__links {
  display: flex;
  gap: 32px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav__links a {
  position: relative;
  opacity: .75;
  transition: opacity var(--dur-base) ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1.5px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease-out-expo);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

.nav__cta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy-night);
  transition: transform var(--dur-base) var(--ease-bounce), background-color var(--dur-base) ease;
}
.nav__cta:hover { transform: scale(1.06); background: var(--yellow); }

/* ---------- Focus / a11y ---------- */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}