:root {
  --bg: #0b0b0b;
  --ease-lux: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html,
body {
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Section 1 - Hero */
.hero {
  --mx: 0;
  --my: 0;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

/* Cursor parallax layer; the slight scale keeps the edges covered while it drifts */
.hero__media {
  position: absolute;
  inset: 0;
  transform: translate3d(calc(var(--mx) * -12px), calc(var(--my) * -8px), 0) scale(1.025);
  will-change: transform;
}

.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Full-quality rendering: no filters, no compression, no smoothing tricks */
  image-rendering: auto;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.6s var(--ease-lux), transform 2.4s var(--ease-lux);
  will-change: opacity, transform;
}

.hero.is-loaded .hero__image {
  opacity: 1;
  transform: scale(1);
}

.hero__title {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 700;
  /* Medium presence: ~52% of the width, capped by height for short screens */
  font-size: min(15.5vw, 33vh);
  line-height: 1;
  letter-spacing: -0.015em;
  white-space: nowrap;
  color: #f7f6f2;
  text-rendering: geometricPrecision;
  /* Soft layered shadows so the letters sit solidly on the wall */
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.25),
    0 4px 10px rgba(0, 0, 0, 0.30),
    0 14px 40px rgba(0, 0, 0, 0.40);
  opacity: 0;
  transform: translate(-50%, -46%);
  transition: opacity 1.4s var(--ease-lux) 0.5s, transform 1.8s var(--ease-lux) 0.5s;
  user-select: none;
}

.hero.is-loaded .hero__title {
  opacity: 1;
  transform: translate(-50%, -50%);
}

/* Full-screen image sections: Floating woman, Sound system, Club capacity, Finale */
.floating,
.sound,
.capacity,
.finale {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
}

.floating__image,
.sound__image,
.capacity__image,
.finale__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
}

/* Section 2 - Floating woman text: top-left and bottom-right */
.floating__line,
.sound__text,
.finale__text {
  position: absolute;
  z-index: 1;
  font-family: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 600;
  /* Large display type, matched to the reference layout */
  font-size: clamp(36px, 5.2vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  /* Tight letters, but a clear gap between words */
  word-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ededed;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/* Each phrase is broken into stacked lines */
.floating__line > span,
.sound__text > span,
.finale__text > span {
  display: block;
}

/* Final section - closing line centred over the crowd */
.finale::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 42%);
  pointer-events: none;
}

.finale__text {
  z-index: 2;
  left: 0;
  right: 0;
  bottom: clamp(40px, 10vh, 120px);
  margin: 0;
  text-align: center;
  font-size: clamp(24px, 3.4vw, 76px);
  line-height: 0.95;
}

@media (max-width: 640px) {
  .finale__text {
    white-space: normal;
    padding: 0 16px;
  }
}

/* Section 3 - Funktion-One text: same style, sized to the dark area left of the speakers */
.sound__text {
  top: clamp(40px, 11vh, 120px);
  left: clamp(20px, 2.6vw, 56px);
  margin: 0;
  font-size: clamp(24px, 2.9vw, 66px);
  line-height: 0.95;
}

.floating__line--top {
  top: clamp(40px, 11vh, 120px);
  left: clamp(20px, 2.6vw, 56px);
}

.floating__line--bottom {
  top: 50%;
  right: clamp(20px, 2.6vw, 56px);
  text-align: right;
}

/* Section 3 - Capacity overlay */
.capacity::after {
  /* Gentle shading at the top and bottom edges only, so the type reads cleanly */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 24%),
    linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 38%);
  pointer-events: none;
}

.capacity__content {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 7vh, 72px) 0 clamp(32px, 9vh, 96px);
  pointer-events: none;
}

.capacity__heading {
  align-self: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: clamp(18px, 2.1vw, 40px);
  line-height: 1;
  letter-spacing: 0.55em;
  /* Cancel the trailing letter-space so the word sits truly centred */
  margin-right: -0.55em;
  text-transform: uppercase;
  color: #f4f2ee;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

/* Three equal columns, one per photo panel */
.capacity__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
}

.capacity__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.capacity__number {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(56px, 6.6vw, 128px);
  line-height: 0.95;
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  background: linear-gradient(180deg, #fffaf0 0%, #f6e8d0 55%, #dcbf94 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f6e8d0;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.5));
}

.capacity__label {
  margin-top: clamp(8px, 1.2vh, 16px);
  margin-right: -0.32em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 300;
  font-size: clamp(11px, 1.05vw, 20px);
  line-height: 1.2;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #f4f2ee;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Section 5 - Types of music we play */
.music {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  /* Charcoal sampled from the reference site */
  background: #212121;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 5vh, 56px);
  padding: clamp(56px, 10vh, 110px) 0;
  --gutter: clamp(16px, 3.2vw, 56px);
}

/* Glassy white title: bright face with a soft reflective band and a faint glow */
.music__title {
  align-self: center;
  margin-right: -0.32em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 44px);
  line-height: 1.1;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  background: linear-gradient(180deg,
    #ffffff 0%,
    #f4f6fa 42%,
    #c9ced8 50%,
    #eef1f6 58%,
    #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #fff;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.35)) drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

/* Horizontal card rail */
.music__track {
  display: flex;
  gap: clamp(12px, 1.2vw, 22px);
  overflow-x: auto;
  overflow-y: visible;
  padding: 14px var(--gutter) 22px;
  scroll-padding-inline: var(--gutter);
  /* Proximity snapping settles on a card without fighting trackpad momentum */
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  list-style: none;
  cursor: grab;
}

.music__track::-webkit-scrollbar {
  display: none;
}

.music__track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

/* About 4.5 cards on a desktop screen, fewer on smaller ones */
.music__card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, calc((100vw - 2 * var(--gutter)) / 4.5), 440px);
  scroll-snap-align: start;
  border-radius: 4px;
  overflow: hidden;
  background: #1a1a1a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  /* Isolate each card so hover and scroll repaint only that card */
  contain: layout paint;
  transition: transform 0.6s var(--ease-lux), box-shadow 0.6s var(--ease-lux);
}

.music__card img {
  /* Natural 3:4 size from the width/height attributes: nothing is cropped */
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transition: filter 0.6s var(--ease-lux);
}

.music__card::after {
  /* Soft shade at the foot of the card so the name stays legible */
  content: '';
  position: absolute;
  inset: 55% 0 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  pointer-events: none;
}

.music__name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 7%, 30px);
  z-index: 1;
  padding: 0 14px;
  line-height: 1.7;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: clamp(13px, 1.1vw, 20px);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  text-transform: uppercase;
  color: #f7f6f2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

/* Long genre lists break only after a slash, never mid-genre */
.music__seg {
  white-space: nowrap;
}

@media (hover: hover) {
  .music__card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  }

  .music__card:hover img {
    filter: brightness(1.06);
  }
}

/* Arrow controls */
.music__controls {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: calc(-1 * clamp(12px, 2vh, 24px));
  padding: 0 var(--gutter);
}

.music__arrow {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #f4f2ee;
  cursor: pointer;
  transition: background 0.3s ease, opacity 0.3s ease;
}

.music__arrow:hover {
  background: rgba(255, 255, 255, 0.16);
}

.music__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

.music__arrow svg {
  width: 18px;
  height: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .hero__title {
    opacity: 1;
    transform: translate(-50%, -50%);
    transition: none;
  }

  .hero__image {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__media {
    transform: none !important;
    transition: none;
  }

  .music__card,
  .music__card img {
    transition: none;
  }
}