/* ==========================================================================
   Shared components — header, fullscreen menu, footer, buttons, cards,
   eyebrow labels, cta banner, scroll chevron
   ========================================================================== */

/* ---- Site header (persistent top bar: logo / Book CTA / menu toggle) ---- */

/* Header stays pinned to the top of the viewport while scrolling, on every page. */
.site-header,
.site-header.is-scrolled {
  position: sticky;
  inset-inline: 0;
  top: 0;
  z-index: 60;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__bar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-logo {
  display: inline-flex;
  align-items: center;
  height: 1.75rem;
}

.site-logo__img {
  height: 100%;
  width: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ---- Menu toggle ---- */

.menu-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text);
}

.menu-toggle__label {
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.menu-toggle__label::after {
  content: 'Menu';
}

[data-menu-open] .menu-toggle__label::after {
  content: 'Close';
}

.menu-toggle__box {
  position: relative;
  width: 28px;
  height: 16px;
}

.menu-toggle__bar,
.menu-toggle__bar::before,
.menu-toggle__bar::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease), top var(--t-base) var(--ease);
}

.menu-toggle__bar {
  top: 7px;
}

.menu-toggle__bar::before {
  top: -7px;
}

.menu-toggle__bar::after {
  top: 7px;
}

[data-menu-open] .menu-toggle__bar {
  background: transparent;
}

[data-menu-open] .menu-toggle__bar::before {
  top: 0;
  transform: rotate(45deg);
  background: currentColor;
}

[data-menu-open] .menu-toggle__bar::after {
  top: 0;
  transform: rotate(-45deg);
  background: currentColor;
}

/* ---- Fullscreen menu overlay ---- */

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--color-bg-raised);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-slow) var(--ease), visibility 0s linear var(--t-slow);
  display: flex;
  align-items: flex-end;
  padding-bottom: var(--space-6);
}

[data-menu-open] .site-menu {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--t-slow) var(--ease);
}

.site-menu__inner {
  width: 100%;
  padding-top: calc(var(--nav-height) + var(--space-4));
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  height: 100%;
}

.site-menu__list {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
}

.site-menu__link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.5rem + 4vw, 5rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateY(0.4em);
  transition: color var(--t-base) var(--ease), opacity var(--t-slow) var(--ease-out-strong), transform var(--t-slow) var(--ease-out-strong);
}

[data-menu-open] .site-menu__link {
  opacity: 1;
  transform: translateY(0);
}

.site-menu__link:hover,
.site-menu__link:focus-visible,
.site-menu__link.is-current {
  color: var(--color-accent);
}

/* Stagger each top-level item's reveal while the menu is open */
[data-menu-open] .site-menu__list > li:nth-child(1) > .site-menu__link { transition-delay: 60ms; }
[data-menu-open] .site-menu__list > li:nth-child(2) > .site-menu__link { transition-delay: 110ms; }
[data-menu-open] .site-menu__list > li:nth-child(3) > .site-menu__link { transition-delay: 160ms; }
[data-menu-open] .site-menu__list > li:nth-child(4) > .site-menu__link { transition-delay: 210ms; }

/* ---- Portfolio submenu (accordion within the fullscreen menu) ---- */

.site-menu__link--parent {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  background: none;
  text-align: left;
}

.site-menu__caret {
  width: 0.6em;
  height: 0.6em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-base) var(--ease);
  flex: none;
}

[aria-expanded="true"] .site-menu__caret {
  transform: rotate(-135deg);
}

.site-menu__submenu-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease-out-strong);
}

.site-menu__submenu-wrap.is-open {
  grid-template-rows: 1fr;
}

.site-menu__submenu {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  padding-left: clamp(1rem, 0.5rem + 2vw, 2rem);
}

.site-menu__sublink {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  line-height: 1.3;
  color: var(--color-text-faint);
  padding-block: 0.15em;
  transition: color var(--t-base) var(--ease);
}

.site-menu__sublink:hover,
.site-menu__sublink:focus-visible,
.site-menu__sublink.is-current {
  color: var(--color-accent);
}

.site-menu__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.site-menu__contact {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: color var(--t-fast) var(--ease);
}

.site-menu__contact:hover {
  color: var(--color-accent);
}

body[data-menu-open] {
  overflow: hidden;
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.9em 1.7em;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--t-base) var(--ease), color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}

.btn--primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-accent-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--sm {
  padding: 0.7em 1.3em;
  font-size: var(--fs-xs);
}

.btn:active {
  transform: scale(0.97);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border-strong);
  padding-bottom: 0.15em;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), gap var(--t-fast) var(--ease);
}

.text-link:hover,
.text-link:focus-visible {
  color: var(--color-accent);
  border-color: var(--color-accent);
  gap: 0.6em;
}

/* ---- Eyebrow label ---- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}

.eyebrow::before {
  content: '';
  width: 1.5em;
  height: 1px;
  background: var(--color-accent);
}

/* ---- Card (homepage genre grid) ---- */

.card-genre {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-bg-raised);
  transition: filter var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}

/* Spotlight: hovering one genre card dims and softens the others so the
   hovered card reads as the clear one */
@media (min-width: 768px) {
  .grid:has(.card-genre:hover) .card-genre:not(:hover),
  .grid:has(.card-genre:focus-visible) .card-genre:not(:focus-visible) {
    filter: blur(4px) brightness(0.55);
    transform: scale(0.97);
  }
}

.card-genre__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}

.card-genre:hover .card-genre__img,
.card-genre:focus-visible .card-genre__img {
  transform: scale(1.06);
}

.card-genre__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,11,13,0.1) 40%, rgba(11,11,13,0.88) 100%);
}

.card-genre__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-3);
}

.card-genre__title {
  font-size: var(--fs-lg);
  margin-bottom: 0;
}

/* ---- CTA banner ---- */

.cta-banner {
  text-align: center;
  padding-block: var(--space-7);
  border-top: 1px solid var(--color-border);
}

.cta-banner__eyebrow {
  margin-bottom: var(--space-2);
  justify-content: center;
}

.cta-banner__heading {
  font-size: var(--fs-2xl);
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

/* ---- Footer ---- */

.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-6) var(--space-4);
}

.site-footer__grid {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.site-footer__brand .site-logo {
  margin-bottom: var(--space-2);
}

.site-footer__tagline {
  color: var(--color-text-muted);
  max-width: 32ch;
}

.site-footer__heading {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.site-footer__list a {
  color: var(--color-text-muted);
  transition: color var(--t-fast) var(--ease);
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  color: var(--color-accent);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  text-align: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-faint);
  font-size: var(--fs-xs);
}

.site-footer__bottom a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.site-footer__bottom a:hover,
.site-footer__bottom a:focus-visible {
  color: var(--color-accent);
}

/* ---- Scroll chevron ---- */

.scroll-chevron {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.7;
  animation: chevron-bob 2.4s ease-in-out infinite;
}

@keyframes chevron-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 6px); }
}

/* ---- Credentials marquee (real event/artist names per genre) ---- */

.marquee-section {
  padding-block: var(--space-3);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent);
}

.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee-scroll 34s linear infinite;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--space-4);
  padding-right: var(--space-4);
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.marquee__label {
  flex: none;
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding-right: var(--space-3);
  border-right: 1px solid var(--color-border);
}

.marquee__item {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.marquee__dot {
  flex: none;
  color: var(--color-accent);
}


/* ---- Statement strip ---- */

.statement {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  max-width: 24ch;
  margin-inline: auto;
  font-style: italic;
  color: var(--color-text-muted);
}

/* ---- About teaser ---- */

.about-teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
}

.about-teaser__portrait {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
}

.about-teaser__text {
  max-width: 46ch;
  color: var(--color-text-muted);
  font-size: var(--fs-md);
}

/* ---- How I work strip ---- */

.steps {
  display: grid;
  gap: var(--space-4);
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
}

.step__index {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  color: var(--color-accent);
  margin-bottom: var(--space-1);
}

.step__title {
  margin-bottom: 0.4em;
}

.step__text {
  color: var(--color-text-muted);
}