/* sections.css — Project Aurora */

/* ══════════════════════════════════════════════
   CHAPTER 00 — HERO
═══════════════════════════════════════════════ */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__bg-img {
  position: absolute;
  inset: -10%;
  background-size: cover;
  background-position: center 20%;
  filter: brightness(0.45) saturate(0.7);
  transform: scale(1.05);
  animation: heroDrift 20s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroDrift {
  from { transform: scale(1.05) translate(0, 0); }
  to   { transform: scale(1.08) translate(-2%, -1%); }
}

.hero__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(8,8,8,0.9) 100%),
    linear-gradient(to top, rgba(8,8,8,1) 0%, transparent 40%);
}

.hero__content {
  position: relative;
  z-index: 2;
  padding: var(--s-12) var(--gutter);
  padding-bottom: var(--s-16);
}

.hero__eyebrow {
  color: var(--c-amber);
  letter-spacing: 0.25em;
  margin-bottom: var(--s-8);
}

.hero__name {
  font-family: var(--f-display);
  font-size: clamp(5rem, 14vw, var(--t-7xl));
  font-weight: 300;
  line-height: 0.88;
  letter-spacing: -0.03em;
  color: var(--c-parchment);
}

.hero__name-line { display: block; color: var(--c-amber-light); }

.hero__name-line--last {
  color: var(--c-amber);
}

.hero__sub {
  margin-top: var(--s-8);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.hero__divider {
  width: 60px;
  height: 1px;
  background: var(--c-amber);
  flex-shrink: 0;
}

.hero__tagline {
  font-family: var(--f-display);
  font-style: italic;
  font-size: clamp(var(--t-lg), 2.5vw, var(--t-2xl));
  color: var(--c-mist);
  font-weight: 300;
}

.hero__stats {
  position: absolute;
  bottom: var(--s-10);
  right: var(--gutter);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-4);
}

.hero__stat {
  text-align: right;
}

.hero__stat-num {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 300;
  line-height: 1;
  color: var(--c-amber);
}

.hero__stat-label {
  color: var(--c-silver);
  font-size: var(--t-2xs);
  letter-spacing: 0.15em;
}

/* ══════════════════════════════════════════════
   CHAPTER 01 — IDENTITY
═══════════════════════════════════════════════ */
.identity__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-12), 6vw, var(--s-24));
  align-items: center;
  padding-top: var(--s-16);
}

.identity__image-wrap {
  position: relative;
  aspect-ratio: 3/4;
}

.identity__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  filter: saturate(0.6) brightness(0.9);
  transition: filter var(--dur-slow) var(--ease-out);
}

.identity__image-wrap:hover .identity__image {
  filter: saturate(0.8) brightness(1);
}

.identity__image-frame {
  position: absolute;
  inset: var(--s-6);
  border: 1px solid rgba(200,146,74,0.3);
  pointer-events: none;
  transition: inset var(--dur-slow) var(--ease-out);
}

.identity__image-wrap:hover .identity__image-frame {
  inset: var(--s-3);
}

.identity__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.identity__body p {
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--c-mist);
  font-weight: 300;
}

.identity__body em {
  font-style: italic;
  color: var(--c-parchment);
}

.identity__quote {
  border-left: 2px solid var(--c-amber);
  padding-left: var(--s-6);
  margin-top: var(--s-4);
}

.identity__quote p {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-xl);
  font-weight: 300;
  line-height: 1.3;
  color: var(--c-parchment);
}

.identity__quote cite {
  display: block;
  margin-top: var(--s-3);
  color: var(--c-silver);
}

/* ══════════════════════════════════════════════
   CHAPTER 02 — MUSIC
═══════════════════════════════════════════════ */
.music__header { margin-bottom: var(--s-8); }

.music__header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-bottom: 0;
}

.music__sub {
  margin-top: var(--s-6);
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--c-silver);
}

.music__releases {
  display: flex;
  gap: var(--s-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--s-4);
  /* Hide scrollbar visually but keep it functional */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Bleed slightly past section padding to hint at more cards */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  cursor: grab;
}

.music__releases::-webkit-scrollbar { display: none; }
.music__releases.is-dragging { cursor: grabbing; scroll-behavior: auto; }

.release {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
  /* Fixed card width — show partial next card to signal scrollability */
  flex: 0 0 clamp(240px, 30vw, 340px);
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  transition: opacity var(--dur-base) var(--ease-out);
}

.release__artwork-wrap {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}

.release__artwork {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--c-charcoal);
  transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out);
}

.release:hover .release__artwork {
  transform: scale(1.04);
  filter: brightness(0.7);
}

.release__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  color: var(--c-parchment);
}

.release__play svg {
  width: 48px; height: 48px;
  filter: drop-shadow(0 0 20px rgba(8,8,8,0.8));
}

.release:hover .release__play { opacity: 1; }

.release__badge {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  padding: var(--s-1) var(--s-3);
  background: var(--c-amber);
  color: var(--c-void);
  font-size: var(--t-2xs);
  letter-spacing: 0.15em;
}

.release__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.release__type { color: var(--c-amber); }

.release__title {
  font-family: var(--f-display);
  font-size: var(--t-xl);
  font-weight: 300;
  letter-spacing: -0.01em;
  flex: 1;
  margin-inline: var(--s-4);
}

.release__year { color: var(--c-smoke); }

.release__waveform {
  height: 40px;
  position: relative;
}

.waveform-canvas {
  width: 100%;
  height: 100%;
}

.release__links {
  display: flex;
  gap: var(--s-4);
}

.release__link {
  color: var(--c-smoke);
  font-size: var(--t-2xs);
  transition: color var(--dur-fast) var(--ease-out);
}
.release__link:hover { color: var(--c-amber); }

.release--featured { grid-row: span 1; }

/* ══════════════════════════════════════════════
   CHAPTER 03 — VIDEO THEATER
═══════════════════════════════════════════════ */
.video-theater__header { margin-bottom: var(--s-8); }

.video-theater__sub {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--c-silver);
  margin-top: var(--s-4);
}

.video-theater__featured {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--c-charcoal);
  overflow: hidden;
  margin-bottom: var(--s-6);
}

.video-theater__player {
  position: absolute;
  inset: 0;
}

.video-theater__player iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.video-theater__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity var(--dur-base) var(--ease-out);
}

.video-theater__overlay.is-hidden { opacity: 0; pointer-events: none; }

.video-theater__thumb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--c-charcoal);
  filter: brightness(0.5);
  transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.video-theater__overlay:hover .video-theater__thumb {
  filter: brightness(0.6);
  transform: scale(1.02);
}

.video-theater__trigger {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  color: var(--c-parchment);
  transition: transform var(--dur-base) var(--ease-spring);
}

.video-theater__trigger:hover { transform: scale(1.08); }

.play-icon svg {
  width: 72px; height: 72px;
  filter: drop-shadow(0 0 30px rgba(200,146,74,0.4));
}

.video-theater__trigger-label {
  font-size: var(--t-xs);
  letter-spacing: 0.3em;
  color: var(--c-amber);
}

.video-theater__info {
  position: absolute;
  bottom: var(--s-6);
  left: var(--s-8);
  z-index: 2;
}

.video-theater__title {
  font-family: var(--f-display);
  font-size: var(--t-2xl);
  font-weight: 300;
  color: var(--c-parchment);
  text-shadow: 0 2px 20px rgba(8,8,8,0.8);
}

.video-theater__dir {
  color: var(--c-silver);
  font-size: var(--t-xs);
}

.video-theater__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}

.video-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  cursor: pointer;
}

.video-thumb__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--c-charcoal);
  filter: brightness(0.55) saturate(0.7);
  transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.video-thumb:hover .video-thumb__img {
  filter: brightness(0.7) saturate(0.9);
  transform: scale(1.03);
}

.video-thumb__meta {
  position: absolute;
  bottom: var(--s-4);
  left: var(--s-4);
  z-index: 2;
}

.video-thumb__title {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 300;
  color: var(--c-parchment);
}

.video-thumb__dir {
  color: var(--c-silver);
  font-size: var(--t-2xs);
}

.video-thumb__play {
  position: absolute;
  top: 50%;
  right: var(--s-4);
  transform: translateY(-50%);
  z-index: 2;
  color: var(--c-amber);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.video-thumb__play svg { width: 28px; height: 28px; }
.video-thumb:hover .video-thumb__play { opacity: 1; }

/* ══════════════════════════════════════════════
   CHAPTER 04 — PERFORMANCE
═══════════════════════════════════════════════ */
.performance__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--c-charcoal);
  filter: brightness(0.3) saturate(0.5);
  will-change: transform;
}

.performance__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(8,8,8,0.85) 0%, rgba(8,8,8,0.3) 100%),
    linear-gradient(to top, rgba(8,8,8,0.8) 0%, transparent 50%);
}

.performance__content {
  position: relative;
  z-index: 2;
  padding: var(--chapter-pad) var(--gutter);
  max-width: var(--col-max);
  margin-inline: auto;
}

.performance__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  margin-top: var(--s-12);
}

.performance__body p {
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--c-mist);
}

.performance__testimonials {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.testimonial {
  border-left: 1px solid var(--c-amber);
  padding-left: var(--s-6);
}

.testimonial p {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--c-parchment);
  line-height: 1.4;
}

.testimonial cite {
  display: block;
  margin-top: var(--s-2);
  color: var(--c-silver);
  font-style: normal;
}

.performance__dates {
  margin-top: var(--s-16);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.perf-date {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding-block: var(--s-6);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background var(--dur-fast) var(--ease-out);
}

.perf-date:hover { background: rgba(200,146,74,0.04); }

.perf-date__num {
  font-size: var(--t-sm);
  color: var(--c-amber);
  min-width: 70px;
  letter-spacing: 0.1em;
}

.perf-date__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.perf-date__venue {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 300;
  color: var(--c-parchment);
}

.perf-date__type { color: var(--c-silver); }

.perf-date__private {
  color: var(--c-smoke);
}

/* ══════════════════════════════════════════════
   CHAPTER 05 — BOOKING
═══════════════════════════════════════════════ */
.booking__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-12), 8vw, var(--s-32));
  align-items: start;
  padding-top: var(--s-16);
}

.booking__sub {
  margin-top: var(--s-8);
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--c-mist);
  font-weight: 300;
}

.booking__types {
  margin-top: var(--s-10);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.booking__type {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-graphite);
}

.booking__type-label {
  color: var(--c-amber);
  font-size: var(--t-xs);
  letter-spacing: 0.15em;
}

.booking__type-desc {
  font-size: var(--t-sm);
  color: var(--c-silver);
}

.booking__right {
  position: sticky;
  top: calc(var(--s-16) + 60px);
}

/* ══════════════════════════════════════════════
   CHAPTER 06 — MERCH
═══════════════════════════════════════════════ */
.merch__header { margin-bottom: var(--s-16); }

.merch__sub {
  margin-top: var(--s-6);
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--c-silver);
}

.merch__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4);
}

.merch-item__link {
  display: block;
}

.merch-item__img-wrap {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--c-charcoal);
  margin-bottom: var(--s-4);
}

.merch-item__img,
.merch-item__img--hover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.merch-item__img--hover {
  opacity: 0;
}

.merch-item:hover .merch-item__img { opacity: 0.3; }
.merch-item:hover .merch-item__img--hover { opacity: 1; }
.merch-item:hover .merch-item__img { transform: scale(1.04); }

.merch-item__badge {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  padding: var(--s-1) var(--s-3);
  background: var(--c-amber);
  color: var(--c-void);
  font-size: var(--t-2xs);
  letter-spacing: 0.1em;
  z-index: 2;
}

.merch-item__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.merch-item__name {
  font-family: var(--f-display);
  font-size: var(--t-lg);
  font-weight: 300;
}

.merch-item__price {
  color: var(--c-amber);
  font-size: var(--t-sm);
}

.merch__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--s-12);
}

/* ══════════════════════════════════════════════
   CHAPTER 07 — COMMUNITY
═══════════════════════════════════════════════ */
.community__inner {
  max-width: 600px;
  margin-inline: auto;
  padding: var(--chapter-pad) var(--gutter);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-8);
}

.community__sub {
  font-family: var(--f-display);
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--c-silver);
}

/* ══════════════════════════════════════════════
   CAROUSEL NAV — Music section
═══════════════════════════════════════════════ */
.carousel-nav {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-shrink: 0;
  padding-bottom: 4px; /* optical align with title baseline */
}

.carousel-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-graphite);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-silver);
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-spring);
}

.carousel-btn:hover {
  border-color: var(--c-amber);
  color: var(--c-amber);
  background: rgba(200,146,74,0.06);
}

.carousel-btn:active { transform: scale(0.92); }

.carousel-btn[disabled] {
  opacity: 0.25;
  pointer-events: none;
}

.carousel-btn svg { width: 18px; height: 18px; }

.carousel-dots {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

.carousel-dot {
  width: 20px;
  height: 2px;
  background: var(--c-graphite);
  border-radius: 1px;
  transition: background var(--dur-base) var(--ease-out),
              width var(--dur-base) var(--ease-out);
}

.carousel-dot.is-active {
  background: var(--c-amber);
  width: 32px;
}