/* ═══════════════════════════════════════════════════════════

       HERO SECTION
    ═══════════════════════════════════════════════════════════ */
#hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  /* Subtle purple grid background */
  background: var(--color-black) linear-gradient(rgba(111, 97, 192, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111, 97, 192, .055) 1px, transparent 1px);
  background-size: auto, 55px 55px;
  /* Diagonal bottom edge: left starts at full height, right rises by --diag-h */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--diag-h)));
  padding-bottom: var(--diag-h);
  margin-bottom: calc(var(--diag-h) * -1);
  z-index: 2;
}


/* Text block */
.hero__content {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem;
  /* Slightly nudge down to account for optical centering with nav */
  margin-top: calc(var(--nav-height) / 2);
  pointer-events: none;
}

/* Make the section label perfectly symmetrical in the centered hero */
#hero .section-label::after {
  content: '';
  flex-shrink: 0;
  width: 28px;
  height: 1.5px;
  background: var(--color-ice);
}

.hero__content .hero__ctas {
  pointer-events: all;
}

.hero__logo {
  width: clamp(280px, 45vw, 600px);
  margin: 1.5rem 0;
  opacity: 0;
  transform: scale(1.6) translateY(-20px);
  filter: drop-shadow(0 0 0px rgba(111, 97, 192, 0)) blur(10px);
}

body:not(.is-loading) .hero__logo {
  animation: anim-hero-logo 2.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes anim-hero-logo {
  0% {
    opacity: 0;
    transform: scale(1.6) translateY(-20px);
    filter: drop-shadow(0 0 0px rgba(111, 97, 192, 0)) blur(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 25px rgba(111, 97, 192, 0.65)) drop-shadow(0 0 45px rgba(145, 200, 228, 0.35)) blur(0);
  }
}

/* Hero sub-elements enter sequentially after title */
.hero__tagline {
  font-family: var(--font-heading);
  font-size: clamp(.88rem, 1.8vw, 1.2rem);
  font-weight: 700;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--color-ice);
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(18px);
  animation: anim-fade-up .7s .95s cubic-bezier(.77, 0, .18, 1) forwards;
}

.hero__year {
  font-family: var(--font-body);
  font-size: .7rem;
  letter-spacing: .22em;
  color: var(--color-steel);
  margin-top: .75rem;
  opacity: 0;
  transform: translateY(10px);
  animation: anim-fade-up .6s 1.3s ease forwards;
}

.hero__ctas {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  opacity: 0;
  transform: translateY(10px);
  animation: anim-fade-up .6s 1.55s ease forwards;
}

@keyframes anim-fade-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  font-family: var(--font-heading);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .72rem 1.9rem;
  display: inline-block;
  border: 2px solid;
  transition: transform .15s, box-shadow .15s;
}

.btn--primary {
  background: var(--color-purple);
  color: var(--color-white);
  border-color: var(--color-white);
  box-shadow: var(--shadow-ice);
}

.btn--primary:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--color-ice);
}

.btn--secondary {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
  box-shadow: var(--shadow-gray);
}

.btn--secondary:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--color-gray);
}

/* ── Decorative album cover background ──────────────────── */
.hero__cover-art {
  position: absolute;
  left: 1%;
  top: 55%;
  transform: translateY(-50%) rotate(-8deg);
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
  width: clamp(340px, 42vw, 620px);
  height: auto;
  display: block;

  /* Square feathered / transparent borders using linear gradients */
  /* Deepened transparency on the left and right edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 15%, black 30%, black 70%, rgba(0, 0, 0, 0.4) 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.4) 15%, black 30%, black 70%, rgba(0, 0, 0, 0.4) 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-composite: intersect;

  /* Slight blur for atmosphere */
  filter: blur(1.5px);
}

.hero__cover-art img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}