/* ==========================================================================
   Zespół Skaner – one-page site. Bright edition.
   White and warm off-white surfaces, ink type, one accent: the yellow of the
   song ticker. Photos untinted. Unbounded for display, Manrope for reading.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-2: #f7f5f0;
  --ink: #15121f;              /* 17.9:1 on white */
  --ink-2: #5c586b;            /* 6.4:1 on white */
  --line: rgba(21, 18, 31, 0.1);

  --yellow: #e8c25a;           /* aged cassette-shell yellow; ink on it: 9.6:1 */
  --yellow-d: #d9b040;
  --rose: #d8558f;
  --violet: #6d4fc4;
  --coral: #e8834a;
  --cyan: #7fd6cf;

  --night: #0f0a1e;            /* the one dark band: the stage photo strip */

  --display: 'Unbounded', 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius-l: 28px;
  --radius-m: 18px;
  --radius-s: 12px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gutter: 20px;
  --content: 1180px;
  --focus: #6d4fc4;
  --shadow-s: 0 6px 20px rgba(21, 18, 31, 0.06);
  --shadow-m: 0 20px 50px rgba(21, 18, 31, 0.12);
  --shadow-l: 0 30px 70px rgba(21, 18, 31, 0.14);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, picture, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.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; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; }
.skip-link:focus { top: 16px; }
.container { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; position: relative; }
[id] { scroll-margin-top: 84px; }

/* Type */
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-weight: 700; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: var(--yellow); }
.title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 56px); line-height: 1.06; letter-spacing: -0.02em;
  text-wrap: balance;
}
/* the signature: a marker stroke under the emphasised words */
.title em, .slide__title em { font-style: normal; background-image: linear-gradient(transparent 60%, var(--yellow) 60%, var(--yellow) 92%, transparent 92%); background-repeat: no-repeat; }
.lead { max-width: 62ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.caption { font-size: 13px; line-height: 1.4; color: var(--ink-2); }

/* soft pastel washes behind some sections */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora span {
  position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%;
  background: radial-gradient(circle at center, var(--c, var(--yellow)) 0%, transparent 62%);
  opacity: 0.18; will-change: transform;
  animation: drift 26s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { --c: var(--yellow); left: -25vmax; top: -30vmax; }
.aurora span:nth-child(2) { --c: var(--rose); right: -30vmax; top: -10vmax; animation-duration: 31s; animation-delay: -8s; opacity: 0.1; }
.aurora span:nth-child(3) { --c: var(--violet); left: 20vw; bottom: -45vmax; animation-duration: 35s; animation-delay: -15s; opacity: 0.08; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(8vw, 6vh, 0) scale(1.15); } }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--body); font-size: 15px; font-weight: 700; letter-spacing: 0.01em; line-height: 1; cursor: pointer; white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
.btn--hot { background: var(--yellow); color: var(--ink); box-shadow: 0 10px 28px rgba(232, 194, 90, 0.35); }
.btn--hot:hover { background: var(--yellow-d); }
.btn--glass { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-s); }
.btn--glass:hover { border-color: rgba(21, 18, 31, 0.25); }
.btn--white { background: #fff; color: var(--ink); box-shadow: var(--shadow-s); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #2a2540; }
.btn--small { min-height: 42px; padding: 0 16px; font-size: 14px; }
.btn--icon { width: 46px; min-height: 46px; padding: 0; border-radius: 50%; }
/* over dark photos (the dark slide, the stage strip) */
.is-dark .btn--glass { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.3); box-shadow: none; }
.is-dark .btn--glass:hover { background: rgba(255, 255, 255, 0.2); }

/* --------------------------------------------------------------------------
   Header: transparent over the slider, white once you scroll
   -------------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 22px 0; color: var(--ink);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 100%);
  transition: padding 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease);
}
.nav.is-on-dark:not(.is-scrolled) { color: #fff; background: linear-gradient(to bottom, rgba(15, 10, 30, 0.55) 0%, rgba(15, 10, 30, 0) 100%); }
.nav.is-scrolled {
  padding: 10px 0; color: var(--ink);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 40px rgba(21, 18, 31, 0.08);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.nav__inner { display: flex; align-items: center; gap: 16px; min-height: 48px; }
.nav__brand { display: inline-flex; align-items: center; margin-right: auto; padding: 6px 0; }
.nav__brand img { height: 30px; width: auto; }
.nav__brand .wm--light { display: none; }
.nav.is-on-dark:not(.is-scrolled) .nav__brand .wm--dark { display: none; }
.nav.is-on-dark:not(.is-scrolled) .nav__brand .wm--light { display: block; }
.nav__links { display: none; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nav__links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 15px; font-weight: 700; color: inherit; letter-spacing: 0.01em; }
.nav__links a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 3px; border-radius: 2px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav__cta { margin-left: 4px; }
.nav__cta .btn__label { display: none; }
.nav__menu { display: inline-flex; }
.nav.is-on-dark:not(.is-scrolled) .nav__menu { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.nav__panel {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99; padding: 92px var(--gutter) 20px;
  background: rgba(255, 255, 255, 0.97); box-shadow: 0 20px 60px rgba(21, 18, 31, 0.15);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.nav__panel[hidden] { display: none; }
.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel a { display: flex; align-items: center; min-height: 54px; padding: 0 12px; border-radius: 14px; font-family: var(--display); font-weight: 700; font-size: 18px; color: var(--ink); }
.nav__panel a:hover, .nav__panel a[aria-current="true"] { background: var(--bg-2); }
@media (min-width: 900px) {
  .nav__brand img { height: 34px; }
  .nav__links { display: flex; margin-left: auto; }
  .nav__brand { margin-right: 0; }
  .nav__cta .btn__label { display: inline; }
  .nav__menu, .nav__panel { display: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav.is-scrolled, .nav__panel, .dock { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* --------------------------------------------------------------------------
   Hero slider
   -------------------------------------------------------------------------- */
.slider { position: relative; overflow: hidden; isolation: isolate; background: var(--bg-2); touch-action: pan-y; }
.slider__track { display: grid; }
.slide {
  grid-area: 1 / 1; position: relative; display: grid; align-items: end; color: var(--ink);
  opacity: 0; visibility: hidden; transition: opacity 0.9s var(--ease), visibility 0s linear 0.9s;
}
.slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; z-index: 1; }
.slide--dark { color: #fff; }
.slide__bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--bg-2); }
.slide__bg picture, .slide__bg img { display: block; width: 100%; height: 100%; }
.slide__bg img { object-fit: cover; object-position: 50% 20%; transform-origin: 50% 15%; -webkit-user-drag: none; user-select: none; }
.slide.is-active .slide__bg img { animation: kenburns 9s var(--ease) both; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(var(--kb, 1.07)); } }
.slide__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.35) 16%, rgba(255, 255, 255, 0.08) 40%, rgba(255, 255, 255, 0) 60%); }
.slide--dark .slide__shade { background: linear-gradient(to top, var(--night) 0%, rgba(15, 10, 30, 0.86) 22%, rgba(15, 10, 30, 0.35) 52%, rgba(15, 10, 30, 0) 78%); }
.slide__content { position: relative; z-index: 3; padding: 140px 0 96px; max-width: 760px; }
.slide__content::before {
  content: ''; position: absolute; z-index: -1; left: -18%; right: -14%; top: 12%; bottom: -8%; pointer-events: none;
  background: radial-gradient(ellipse at 40% 62%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.3) 45%, rgba(255, 255, 255, 0) 72%);
}
.slide--dark .slide__content::before { background: radial-gradient(ellipse at 40% 62%, rgba(15, 10, 30, 0.6) 0%, rgba(15, 10, 30, 0.32) 45%, rgba(15, 10, 30, 0) 72%); }
.slide__logo { width: min(420px, 80vw); margin: 0 0 22px; }
.slide__logo img { width: 100%; height: auto; }
.slide .eyebrow { color: inherit; }
.slide__title {
  margin: 0 0 18px; max-width: 14ch;
  font-family: var(--display); font-weight: 900; font-size: clamp(34px, 6vw, 80px); line-height: 0.98; letter-spacing: -0.025em;
  color: inherit; text-wrap: balance;
}
.slide--dark .slide__title { text-shadow: 0 6px 30px rgba(0, 0, 0, 0.35); }
.slide__text { max-width: 46ch; margin: 0 0 4px; padding-left: 18px; border-left: 2px solid var(--yellow); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--ink); font-weight: 600; }
.slide--dark .slide__text { color: rgba(255, 255, 255, 0.88); }
/* a slide with no headline: the description steps up a size and sits right under the wordmark */
.slide__text--lead { margin-top: 4px; max-width: 40ch; font-size: clamp(19px, 1.9vw, 26px); font-weight: 700; line-height: 1.4; }
.slide__logo:has(+ .slide__text--lead) { margin-bottom: 14px; }
.slide__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.slide .stickers { margin: 18px 0 0; }

.stickers { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.sticker {
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
}
.is-dark .sticker { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.28); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* layered entrance, replayed on every slide change */
.slide__layer { --i: 0; }
.slide.is-active .slide__layer { animation: layerIn 0.8s var(--ease) both; animation-delay: calc(0.15s + var(--i) * 0.13s); }
@keyframes layerIn { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }

.slider__arrow {
  position: absolute; top: 50%; z-index: 5; translate: 0 -50%;
  display: none; place-items: center; width: 56px; height: 56px; border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255, 255, 255, 0.85); color: var(--ink); cursor: pointer; box-shadow: var(--shadow-s);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color 0.25s var(--ease);
}
.slider__arrow svg { width: 24px; height: 24px; }
.slider__arrow:hover { background: var(--yellow); border-color: transparent; }
.slider__arrow--prev { left: 20px; }
.slider__arrow--next { right: 20px; }
.slider__dots { position: absolute; left: 0; right: 0; bottom: 26px; z-index: 5; display: flex; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.slider__dots button { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.slider__dots button::before { content: ''; width: 10px; height: 10px; border-radius: 999px; background: rgba(21, 18, 31, 0.25); transition: width 0.3s var(--ease), background-color 0.3s var(--ease); }
.slider__dots button[aria-current="true"]::before { width: 30px; background: var(--ink); }
.slider__dots button:hover::before { background: var(--ink); }
.slider.is-on-dark .slider__dots button::before { background: rgba(255, 255, 255, 0.45); }
.slider.is-on-dark .slider__dots button[aria-current="true"]::before { background: var(--yellow); }

@media (min-width: 900px) {
  .slider__track { height: 100svh; min-height: 680px; }
  .slider__arrow { display: grid; }
}
@media (max-width: 899px) {
  .slide { align-items: start; }
  .slide__bg { position: relative; inset: auto; z-index: 0; aspect-ratio: var(--mob-aspect, 1 / 1); }
  .slide__shade { height: 100vw; background: linear-gradient(to top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.25) 18%, rgba(255, 255, 255, 0) 45%); }
  .slide--dark .slide__shade { background: linear-gradient(to top, var(--night) 0%, rgba(15, 10, 30, 0.55) 22%, rgba(15, 10, 30, 0) 55%); }
  .slide--dark { background: var(--night); }
  .slide__content { padding: 0 0 72px; margin-top: -72px; }
  .slide__content::before { display: none; }
  .slide__logo { width: min(320px, 78vw); margin-bottom: 18px; }
  .slider__dots { bottom: 14px; }
}

/* The song ticker: yellow, on a slight angle, tucked under the hero */
/* the strip is rotated, so its left end dips by ~1.4% of the width: overlap the slider by more than that at any width */
.marquee-wrap { position: relative; z-index: 3; overflow: hidden; margin-top: calc(-18px - 2.8vw); padding: calc(14px + 1.4vw) 0 18px; pointer-events: none; }
.marquee { overflow: hidden; margin: 0 -3vw; padding: 15px 0; background: var(--yellow); color: var(--ink); transform: rotate(-1.6deg); box-shadow: 0 16px 40px rgba(21, 18, 31, 0.12); }
.marquee__track { display: flex; width: max-content; white-space: nowrap; animation: marquee 48s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font-family: var(--display); font-weight: 700; font-size: clamp(14px, 1.7vw, 20px); letter-spacing: 0.04em; text-transform: uppercase; }
.marquee__track span::after { content: '✦'; color: var(--ink); opacity: 0.5; font-size: 0.8em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
main { display: block; }
.section { position: relative; padding: clamp(80px, 9vw, 136px) 0; overflow: hidden; background: var(--bg); }
.section > .container { z-index: 1; }
.section--alt { background: var(--bg-2); }
.section__head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 64px); }
.section__head .lead { margin: 16px 0 0; }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; }
.lightbox::backdrop { background: rgba(15, 10, 30, 0.92); }
.lightbox__inner { display: grid; place-items: center; width: 100%; height: 100%; padding: 64px 16px; }
.lightbox__inner img { max-width: 100%; max-height: calc(100vh - 128px); width: auto; height: auto; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.lightbox__btn { position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255, 255, 255, 0.14); color: #fff; }
.lightbox__btn:hover { background: var(--yellow); color: var(--ink); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: 16px; right: 16px; }
.lightbox__prev { left: 12px; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 12px; top: 50%; translate: 0 -50%; }
.lightbox__counter { position: absolute; left: 20px; top: 28px; color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Retro block: cassettes and archive polaroids
   -------------------------------------------------------------------------- */
.retro__head { display: grid; gap: 32px; align-items: center; }
.retro__portrait { margin: 0 auto; width: min(300px, 70vw); padding: 10px 10px 44px; background: #fff; border-radius: 6px; box-shadow: var(--shadow-m); transform: rotate(2.5deg); position: relative; }
.retro__portrait picture, .retro__portrait img { width: 100%; }
.retro__portrait img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; border-radius: 2px; }
.retro__portrait figcaption { position: absolute; left: 16px; bottom: 10px; font-family: 'Caveat', cursive; font-weight: 700; font-size: 22px; color: #3a3745; }
@media (min-width: 900px) { .retro__head { grid-template-columns: 1fr 340px; gap: 56px; } .retro__portrait { width: 320px; margin: 0; } }
/* --------------------------------------------------------------------------
   (cassettes and polaroids)
   -------------------------------------------------------------------------- */
.retro .section__head .stickers { margin-top: 22px; }
.retro__block { margin-top: clamp(40px, 5vw, 64px); }
.retro__bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 18px; }
.retro__h { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; }
.retro__bar .caption { flex: 1 1 auto; }
/* "Z archiwum / Dziś" switch: a segmented control with a sliding yellow thumb; the hint next to it follows */
.retro__bar--switch { align-items: center; gap: 10px 18px; }
.seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(21, 18, 31, 0.07); }
.seg__thumb { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--yellow); box-shadow: 0 2px 8px rgba(21, 18, 31, 0.12); }
.seg.is-ready .seg__thumb { transition: transform 0.45s var(--ease), width 0.45s var(--ease); }
.seg__btn { position: relative; z-index: 1; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--ink-2); cursor: pointer; transition: color 0.3s var(--ease); }
.seg__btn[aria-selected="true"] { color: var(--ink); }
.seg__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.gallery__hint [data-hint] { display: inline-block; animation: hintIn 0.45s var(--ease) both; }
.gallery__hint [data-hint][hidden] { display: none; }
@keyframes hintIn { from { opacity: 0; transform: translateY(4px); } }
/* the two galleries sit side by side on a track that slides; the clip box keeps room for shadows */
.gallery { overflow: hidden; margin: -12px calc(-1 * var(--gutter)) -36px; padding: 12px var(--gutter) 36px; }
.gallery__track { --i: 0; display: grid; grid-template-columns: 100% 100%; column-gap: 48px; align-items: start; transform: translateX(calc(var(--i) * (-100% - 48px))); transition: transform 0.65s var(--ease); }
.gallery__panel { visibility: hidden; transition: visibility 0s 0.65s; }
.gallery__panel.is-active { visibility: visible; transition-delay: 0s; }
.rail-nav { display: none; gap: 8px; margin-left: auto; }
@media (min-width: 900px) { .rail-nav { display: flex; } }
@media (hover: none) { .rail-nav { display: none; } }

/* The rail bleeds to the viewport edges; --spill is the distance from the edge to the page container, so the
   part aligned with the container is the "stage" (three cassettes on desktop) and the rest peeks in from the sides. */
.rail {
  --spill: max(var(--gutter), (100vw - var(--content)) / 2);
  position: relative; display: flex; gap: 24px; width: 100vw; margin-inline: calc(50% - 50vw); padding: 16px var(--spill) 32px; scroll-padding-inline: var(--spill);
  list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
/* Phones and tablets: a wider spill so the neighbours peek in on BOTH sides of the stage (one card per stage on
   phones, two on tablets), which is the cue that there is more to swipe to. */
@media (max-width: 899px) { .rail { --spill: 48px; gap: 16px; } }
.rail.is-gliding { scroll-snap-type: none; }
@media (hover: hover) { .rail { cursor: grab; } .rail.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } }
.cassette__label img { -webkit-user-drag: none; user-select: none; }
.rail::-webkit-scrollbar { display: none; }

/* The <li> is only the snap box (never transformed: with mandatory snapping the browser measures snap
   positions on the transformed box). The visible card inside it is what scales, lifts and dims. */
.cassette { flex: 0 0 auto; width: 100%; scroll-snap-align: start; }
@media (min-width: 600px) and (max-width: 899px) { .cassette { width: calc((100% - 16px) / 2); } }
/* three per stage on desktop: the rail's content box is exactly the page container */
@media (min-width: 900px) { .cassette { width: max(300px, calc((100% - 48px) / 3)); } }
.cassette__card {
  padding: 14px 14px 16px; border-radius: var(--radius-m);
  background: #fffdf9; border: 1px solid rgba(21, 18, 31, 0.08); box-shadow: var(--shadow-s);
}
.cassettes.is-ready .cassette__card { transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), box-shadow 0.4s var(--ease); }
.cassette:hover .cassette__card { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.cassette.is-open .cassette__card { box-shadow: var(--shadow-m), 0 0 0 3px var(--yellow); }
/* cassettes peeking in from the bleed: smaller, dimmed, and a click slides them on stage */
.cassette.is-aside { cursor: pointer; }
.cassette.is-aside .cassette__card { opacity: 0.55; transform: scale(0.8); }
@media (max-width: 899px) { .cassette.is-aside .cassette__card { transform: scale(0.9); } }
.cassette.is-aside-l .cassette__card { transform-origin: right center; }
.cassette.is-aside-r .cassette__card { transform-origin: left center; }
.cassette.is-aside:hover .cassette__card { opacity: 0.85; transform: scale(0.84); box-shadow: var(--shadow-s); }
.cassette.is-aside:hover .cassette__shell { transform: none; }
.rail-nav button:disabled { opacity: 0.35; cursor: default; }
.cassette__shell {
  --shell: #1d1c22; --shell-2: #2c2b33;
  display: block; width: 100%; border: 0; text-align: left; cursor: pointer; color: inherit;
  position: relative; aspect-ratio: 1 / 1; padding: 11px; border-radius: 14px;
  background: linear-gradient(180deg, var(--shell-2), var(--shell)); box-shadow: 0 10px 24px rgba(21, 18, 31, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.cassette--alt .cassette__shell { --shell: #e9e4d6; --shell-2: #f6f3ea; box-shadow: 0 10px 24px rgba(21, 18, 31, 0.14), 0 0 0 1px rgba(21, 18, 31, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.cassette:hover .cassette__shell { transform: rotate(-1deg); }
/* The label covers the whole front of the shell (like a real wrap-around label): the cover art fills it and
   the reel window is laid over the art. --focus (per cover, from landing.json) keeps the important part in view. */
.cassette__label { position: relative; height: 100%; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
.cassette__label picture { display: block; height: 100%; overflow: hidden; }
.cassette__label picture, .cassette__label img { width: 100%; height: 100%; }
.cassette__label img { object-fit: cover; object-position: var(--focus, 50% 40%); }
.cassette__window { position: absolute; left: 26%; right: 26%; bottom: 14px; height: 18%; display: flex; align-items: center; justify-content: space-between; padding: 0 6px; border-radius: 999px; background: rgba(9, 9, 13, 0.84); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.2), 0 4px 14px rgba(0, 0, 0, 0.25); }
.reel { width: 30%; height: auto; animation: spin 2.4s linear infinite; animation-play-state: paused; }
.cassette:hover .reel, .cassette:focus-within .reel, .cassette.is-open .reel { animation-play-state: running; }
.cassette.is-open .cassette__shell { transform: none; }
.cassette.is-open .cassette__tape { transform: scaleX(0.22); }
.cassette__shell:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.cassette__tape { flex: 1; height: 45%; margin: 0 4px; background: #4a3b2a; border-radius: 2px; opacity: 0.9; transform-origin: right center; transition: transform 1.4s var(--ease); }
@keyframes spin { to { transform: rotate(360deg); } }
.cassette__side { position: absolute; left: 11px; bottom: 11px; width: 20px; height: 20px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--ink); font-family: var(--display); font-weight: 900; font-size: 10px; }
.cassette__screw { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.cassette__screw--tl { left: 4px; top: 4px; } .cassette__screw--tr { right: 4px; top: 4px; } .cassette__screw--bl { left: 4px; bottom: 4px; } .cassette__screw--br { right: 4px; bottom: 4px; }
.cassette h3 { margin-top: 16px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.cassette .caption { margin-top: 2px; }
.cassette .caption strong { color: var(--ink); }

.tracks { position: relative; margin-top: 8px; padding: 26px clamp(18px, 3vw, 32px) 22px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-m); overflow: hidden; }
.tracks[hidden] { display: none; }
.tracks__ribbon { position: absolute; left: 0; top: 0; width: 100%; height: 7px; background: linear-gradient(90deg, #3d3123, #6b5640 60%, #8a7156); transform: scaleX(0); transform-origin: left; }
.tracks.is-open .tracks__ribbon { animation: unwind 0.9s var(--ease) forwards; }
@keyframes unwind { to { transform: scaleX(1); } }
.tracks__album[hidden] { display: none; }
.tracks__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; margin-bottom: 14px; }
.tracks__head .eyebrow { margin-bottom: 8px; }
.tracks__title { font-family: var(--display); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.01em; }
.tracklist { list-style: none; margin: 0; padding: 0; display: grid; column-gap: 40px; }
.tracklist__row { display: grid; grid-template-columns: 2.2ch 1fr auto; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px dashed rgba(21, 18, 31, 0.18); font-size: 16px; }
.tracklist__row:last-child { border-bottom: 0; }
.tracklist__n { font-family: 'Caveat', cursive; font-weight: 700; font-size: 20px; line-height: 1; color: var(--ink-2); }
.tracklist__title { color: var(--ink); }
.tracklist__row.is-hit .tracklist__title { font-weight: 800; }
.tracklist__row.is-hit .tracklist__n { color: var(--ink); }
.tracklist__len { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 15px; }
.tracks.is-open .tracklist__row { animation: rowIn 0.5s var(--ease) both; animation-delay: calc(0.35s + var(--i) * 45ms); }
@keyframes rowIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.tracks__blurb { max-width: 62ch; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 900px) {
  .tracklist { grid-auto-flow: column; grid-template-rows: repeat(var(--rows, 5), auto); }
  .tracklist__row.is-col-end { border-bottom: 0; } /* no divider under the last row of either column */
}

/* organic backgrounds so the two blocks read as separate things */
.retro__block { position: relative; isolation: isolate; padding: clamp(28px, 4vw, 56px) 0; margin-top: clamp(24px, 3vw, 40px); }
/* full-bleed cream fill behind the cassettes; it grows with the block without distorting anything */
.band-fill { position: absolute; z-index: -1; left: 50%; top: 0; bottom: 0; width: 100vw; transform: translateX(-50%); background: #fbf2d6; pointer-events: none; }
/* the Białystok skyline sits on the fill's top edge with locked proportions (never stretched) */
.skyline { position: absolute; z-index: -1; left: 50%; bottom: 100%; width: 100vw; max-width: none; height: auto; transform: translateX(-50%); pointer-events: none; display: block; }
#kasety { margin-top: calc(100vw * 0.125 + 24px); }
.band-fill--soft { background: var(--bg-2); }

/* Teledyski: the same staged rail as the cassettes, with 16:9 stills that open the clip on YouTube */
.video { flex: 0 0 auto; width: 100%; scroll-snap-align: start; }
@media (min-width: 600px) and (max-width: 899px) { .video { width: calc((100% - 16px) / 2); } }
@media (min-width: 900px) { .video { width: max(300px, calc((100% - 48px) / 3)); } }
.video__card { padding: 10px 10px 14px; border-radius: var(--radius-m); background: #fff; border: 1px solid rgba(21, 18, 31, 0.08); box-shadow: var(--shadow-s); }
.videos.is-ready .video__card { transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), box-shadow 0.4s var(--ease); }
.video:hover .video__card { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.video.is-aside { cursor: pointer; }
.video.is-aside .video__card { opacity: 0.55; transform: scale(0.8); }
@media (max-width: 899px) { .video.is-aside .video__card { transform: scale(0.9); } }
.video.is-aside-l .video__card { transform-origin: right center; }
.video.is-aside-r .video__card { transform-origin: left center; }
.video.is-aside:hover .video__card { opacity: 0.85; transform: scale(0.84); box-shadow: var(--shadow-s); }
.video__link { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--night); }
.video__link picture, .video__link img { display: block; width: 100%; }
.video__link img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; transition: transform 0.6s var(--ease); }
.video:hover .video__link img { transform: scale(1.04); }
.video__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); transition: transform 0.4s var(--ease), background-color 0.3s var(--ease); }
.video__play svg { width: 26px; height: 26px; margin-left: 3px; }
.video:hover .video__play { transform: translate(-50%, -50%) scale(1.08); background: var(--yellow); }
.video__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.video__len { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 6px; background: rgba(15, 10, 30, 0.8); color: #fff; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.video h3 { margin-top: 14px; font-size: 15px; font-weight: 700; line-height: 1.3; }
.video__sub { font-weight: 400; color: var(--ink-2); }
.video .caption { margin-top: 2px; }

/* sticky Facebook tab */
.fb-tab { position: fixed; right: 0; top: 72%; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 16px; border-radius: 14px 0 0 14px; background: #1877f2; color: #fff; box-shadow: var(--shadow-m); transform: translateY(-50%); transition: transform 0.25s var(--ease), background-color 0.25s var(--ease); }
.fb-tab svg { width: 22px; height: 22px; }
.fb-tab span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.fb-tab:hover { transform: translateY(-50%) translateX(-4px); background: #0f66d9; }
@media (max-width: 899px) {
  .fb-tab { top: auto; bottom: 84px; right: 12px; width: 48px; height: 48px; padding: 0; border-radius: 50%; transform: none; justify-content: center; }
  .fb-tab span { display: none; }
  .fb-tab:hover { transform: none; }
}

.polaroids { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 8px 0 0; list-style: none; }
.polaroid { transform: rotate(var(--rot, 0deg)); transition: transform 0.4s var(--ease); }
.polaroid:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }
.polaroid .tile { display: block; width: 100%; padding: 10px 10px 40px; border: 0; border-radius: 6px; background: #fff; box-shadow: var(--shadow-m); cursor: zoom-in; text-align: left; }
.polaroid .tile picture, .polaroid .tile img { width: 100%; }
.polaroid .tile img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; filter: sepia(0.18) saturate(0.92) contrast(1.04); transition: filter 0.4s var(--ease); }
.polaroid:hover .tile img { filter: none; }
.polaroid__caption { position: absolute; left: 16px; bottom: 10px; font-family: 'Caveat', cursive; font-weight: 700; font-size: 22px; color: #3a3745; pointer-events: none; }
.polaroid { position: relative; }
@media (min-width: 700px) { .polaroids { grid-template-columns: repeat(4, 1fr); gap: 26px; } }
/* "Dziś": the retro formula (square photo, year · name, chronological) in a modern frame: a rounded white
   card with a hairline border, the photo inset with rounded corners, a clean bold caption underneath */
.today { display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); margin: 0; padding: 8px 0 0; list-style: none; }
.today__item { transition: transform 0.4s var(--ease); }
.today__item:hover { transform: translateY(-4px); }
.today .tile { display: block; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow-s); cursor: zoom-in; text-align: left; transition: box-shadow 0.4s var(--ease); }
.today__item:hover .tile { box-shadow: var(--shadow-m); }
.today .tile picture, .today .tile img { display: block; width: 100%; }
.today .tile picture { border-radius: 11px; overflow: hidden; }
.today .tile img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 25%; transition: transform 0.5s var(--ease); }
.today .tile:hover img, .today .tile:focus-visible img { transform: scale(1.04); }
.today .tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.today__caption { display: block; padding: 10px 4px 2px; font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: var(--ink); }
@media (min-width: 700px) { .today { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* --------------------------------------------------------------------------
   Contact: number card + form
   -------------------------------------------------------------------------- */
.contact__grid { display: grid; gap: 20px; }
.contact__grid--single { max-width: 900px; }
.contact__card { padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s); }
.contact__card--info { background: var(--yellow); border-color: transparent; box-shadow: 0 30px 70px rgba(232, 194, 90, 0.35); }
.contact__phone { display: inline-flex; align-items: center; gap: 12px; margin: 4px 0 6px; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: clamp(30px, 5vw, 64px); letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.contact__phone svg { width: 0.7em; height: 0.7em; flex: none; }
.contact__phone:hover svg { animation: ring 0.9s var(--ease); }
@keyframes ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-14deg); } 30% { transform: rotate(12deg); } 45% { transform: rotate(-10deg); } 60% { transform: rotate(8deg); } 75% { transform: rotate(-4deg); } }
.contact__email { display: inline-flex; align-items: center; gap: 12px; margin: 10px 0 26px; font-family: var(--display); font-size: clamp(13px, 4.2vw, 34px); /* sized so the address always stays on one line */ font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(21, 18, 31, 0.35); text-decoration-thickness: 3px; text-underline-offset: 8px; word-break: break-all; }
.contact__email svg { width: 0.8em; height: 0.8em; flex: none; }
.contact__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.contact__card--info .btn--hot { background: var(--ink); color: #fff; box-shadow: none; }
.contact__card--info .btn--hot:hover { background: #2a2540; }
.contact__card--info .btn--glass { background: rgba(255, 255, 255, 0.75); border-color: transparent; }
/* the booking card carries a big portrait, framed like the one at the top of the retro section */
.contact__card--info { display: grid; gap: 32px; }
.contact__portrait { margin: 0 auto; width: min(300px, 70vw); padding: 10px 10px 14px; background: #fff; border-radius: 6px; box-shadow: var(--shadow-m); transform: rotate(-2deg); }
.contact__portrait picture, .contact__portrait img { width: 100%; }
.contact__portrait img { height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 10%; border-radius: 2px; }
.contact__portrait figcaption { padding: 12px 6px 0; }
.contact__portrait strong { display: block; font-size: 16px; }
.contact__portrait .caption { color: var(--ink-2); }
.contact__socials { margin-top: 24px; }
.contact__socials h3 { margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); font-weight: 700; font-size: 14px; color: var(--ink); transition: background-color 0.2s var(--ease); }
.socials a:hover { background: #fff; }
.socials svg { width: 20px; height: 20px; flex: none; }
@media (min-width: 900px) {
  .contact__grid--form { grid-template-columns: 2fr 3fr; gap: 28px; align-items: start; }
  .contact__grid--single { max-width: 1080px; }
  .contact__grid--single .contact__card { padding: clamp(32px, 5vw, 64px); }
  .contact__card--info { grid-template-columns: 1fr 320px; align-items: center; gap: 56px; }
  .contact__email { font-size: clamp(20px, 3.7vw - 9px, 34px); } /* the info column is narrower next to the portrait */
  .contact__portrait { width: 320px; margin: 0; }
}

.form__title { margin-bottom: 18px; font-family: var(--display); font-weight: 700; font-size: 22px; }
.form__grid { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field span { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-2); }
.field input, .field textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid rgba(21, 18, 31, 0.18); border-radius: 14px; background: var(--bg-2); color: var(--ink); font: inherit; font-size: 17px; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; background: #fff; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(232, 194, 90, 0.45); }
.field input:user-invalid, .field textarea:user-invalid { border-color: #c0392b; }
.field--full { grid-column: 1 / -1; }
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { min-height: 1.4em; margin: 12px 0 0; font-weight: 700; color: var(--ink); }
.form__status.is-error { color: #b0261a; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 10px; }
.form__consent { margin: 14px 0 0; }
@media (min-width: 700px) { .form__grid { grid-template-columns: 1fr 1fr; } }

.toast { position: fixed; left: 50%; bottom: 96px; translate: -50% 0; z-index: 120; padding: 12px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 700; box-shadow: var(--shadow-m); opacity: 0; transition: opacity 0.25s var(--ease), translate 0.25s var(--ease); pointer-events: none; }
.toast.is-visible { opacity: 1; translate: -50% -8px; }
@media (min-width: 900px) { .toast { bottom: 32px; } }

/* Footer */
.footer { position: relative; padding: 44px 0 128px; background: var(--bg-2); border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.footer__grid { display: grid; gap: 24px; }
.footer h2 { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer a { text-decoration: underline; text-underline-offset: 3px; }
.footer a:hover { color: var(--ink); }
.footer__note { max-width: 46ch; margin: 0; line-height: 1.5; }
.footer__legal { margin: 20px 0 0; }
/* site credit: one step quieter than the copyright line */
.footer__credit { margin: 6px 0 0; font-size: 13px; color: rgba(21, 18, 31, 0.45); }
.footer__credit a { color: inherit; text-decoration-color: rgba(21, 18, 31, 0.25); }
.footer__credit a:hover { color: var(--ink-2); }
@media (min-width: 900px) { .footer { padding-bottom: 48px; } .footer__grid { grid-template-columns: 1fr 1fr; } }

/* Mobile dock */
.dock { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 100; display: flex; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); border: 1px solid var(--line); box-shadow: var(--shadow-m); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); transform: translateY(120%); transition: transform 0.35s var(--ease); }
.dock.is-visible { transform: none; }
.dock .btn { flex: 1; }
@media (min-width: 900px) { .dock { display: none; } }

/* Legal + 404 */
.legal { position: relative; padding: 130px 0 90px; }
.legal article { position: relative; z-index: 1; max-width: 780px; }
.legal section { padding: 28px 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.legal section h2 { margin-bottom: 12px; font-family: var(--display); font-weight: 700; font-size: 22px; }
.legal p { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal .note { padding: 16px 18px; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); }
.legal__toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 14px; padding: 0; list-style: none; }


/* Confetti (copy-number celebration) */
.confetti { position: fixed; z-index: 130; width: 10px; height: 14px; border-radius: 2px; pointer-events: none; animation: confetti 1.1s var(--ease) forwards; }
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  40% { transform: translate(calc(var(--dx) * 0.6), var(--dy)) rotate(calc(var(--r) * 0.4)); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 280px)) rotate(var(--r)); opacity: 0; }
}

/* Reveal on scroll (JS adds .in; without JS everything is visible) */
html.js .reveal { opacity: 0; transform: translateY(22px) scale(0.985); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .aurora span, .marquee__track { animation: none; }
  .slide.is-active .slide__bg img, .slide.is-active .slide__layer { animation: none; }
  .slide, .tile img, .btn, .dock, .toast { transition: none; }
  .contact__phone:hover svg { animation: none; }
  .reel { animation: none; }
  .tracks.is-open .tracks__ribbon { animation: none; transform: scaleX(1); }
  .tracks.is-open .tracklist__row { animation: none; }
  .cassette__tape { transition: none; }
  .polaroid, .today__item, .cassette__card, .cassette__shell, .video__card, .video__link img, .retro__portrait, .gallery__track, .seg__thumb { transition: none; }
  .gallery__hint [data-hint] { animation: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(21, 18, 31, 0.35); --ink-2: #3a3745; }
  .is-dark .btn--glass, .is-dark .sticker { border-color: rgba(255, 255, 255, 0.7); }
}