/* ==========================================================================
   IMABEATDUHPARTY — ANNOUNCEMENTS
   --------------------------------------------------------------------------
   The launch-state sections on SHOP, NEWS and TOUR.

   These are real announcements, not holding pages: one component, used
   three times, so every page announces things in the same voice. When the
   real content arrives (products, dated shows, an article feed) these
   sections are replaced — nothing else on the page has to change.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE BAND
   A dark stretch with a pink bloom rising behind the type. It sits directly
   under the page-head artwork and reads as a continuation of it.
   -------------------------------------------------------------------------- */
.announce-band {
  isolation: isolate;
  overflow: clip;
}
.announce-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 68% at 50% 38%, rgb(255 47 146 / 0.17), transparent 70%),
    radial-gradient(46% 56% at 88% 94%, rgb(138 216 255 / 0.08), transparent 72%);
}

/* A hairline that fades out from the centre, used to close a section. */
.announce-band::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 25%, var(--line) 75%, transparent);
}

/* --------------------------------------------------------------------------
   2. THE ANNOUNCEMENT — used by SHOP and TOUR
   -------------------------------------------------------------------------- */
.announce {
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  text-align: center;
  max-width: 54rem;
  margin-inline: auto;
}
.announce .eyebrow { justify-content: center; }

.announce__title {
  font-size: var(--t-h2);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
}

/* The line that carries the news. Big, pink, lit from behind. */
.announce__status {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(2.1rem, 1.05rem + 5.6vw, 5rem);
  line-height: 0.95;
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 16ch;
  color: var(--pink);
  text-shadow:
    0 0 26px rgb(255 47 146 / 0.45),
    0 0 72px rgb(255 47 146 / 0.24);
}

.announce__note {
  max-width: 44ch;
}

.announce .actions { justify-content: center; }

/* --------------------------------------------------------------------------
   3. THE ALBUM REVEAL — used by NEWS
   Artwork frame on one side, the announcement on the other.
   -------------------------------------------------------------------------- */
.reveal-album {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}
@media (min-width: 56rem) {
  .reveal-album {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

/* --- The artwork frame ----------------------------------------------------
   A real square frame held at album proportions, waiting for the cover.

   TO DROP THE ARTWORK IN: replace the contents of .album-frame with a
   <picture> or <img>. The rule below pins any image to fill the frame, so
   no other change is needed.                                              */
.album-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  background:
    radial-gradient(92% 72% at 18% 10%, rgb(255 47 146 / 0.34), transparent 62%),
    radial-gradient(72% 62% at 86% 90%, rgb(138 216 255 / 0.16), transparent 62%),
    linear-gradient(158deg, #1c0a1a 0%, var(--ink) 56%, #10060f 100%);
}

/* The same fine grain the artwork frames carry, so the frame belongs to the
   same world as the photography. */
.album-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Any image dropped into the frame fills it edge to edge. */
.album-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-frame__inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
}

.album-frame__mark {
  width: clamp(2.25rem, 5vw, 3.25rem);
  height: auto;
  filter: drop-shadow(0 0 18px rgb(255 47 146 / 0.55));
}

.album-frame__note {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--pink-light);
}

/* --- The announcement ----------------------------------------------------- */
.reveal-album__body {
  display: grid;
  gap: var(--sp-5);
  justify-items: start;
}

.reveal-album__title {
  font-size: clamp(2.4rem, 1.3rem + 5vw, 5rem);
  line-height: 0.92;
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
}

.reveal-album__kicker {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  color: var(--pink);
  margin-block-start: calc(var(--sp-3) * -1);
}

.reveal-album__note {
  max-width: 42ch;
}

/* --- Fact row -------------------------------------------------------------
   A spec sheet for the release. Built as a grid so more facts (format,
   tracklist, pre-save) can be added later without a redesign.             */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sp-5);
  width: 100%;
}
.fact {
  display: grid;
  gap: var(--sp-2);
  padding-block-start: var(--sp-4);
  border-block-start: 1px solid var(--line);
}
.fact__label {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-micro);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-faint);
}
.fact__value {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-h3);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--paper);
}