/* =========================================================
   SCENE BASE
========================================================= */

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #fff;
}

.scene-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.scene-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45),
    rgba(0,0,0,0.75)
  );
  z-index: 1;
}

.scene-content {
  position: relative;
  z-index: 2;
  height: 100%;
}

/* =========================================================
   HERO TAKEOVER LAYOUT
========================================================= */

.hero-takeover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding: clamp(1.5rem, 4vw, 3rem);
}

/* =========================================================
   CENTER CTA
========================================================= */

.hero-center-zone {
  flex: 1;
  display: grid;
  place-items: center;
}

.hero-center-cta {
  text-decoration: none;
  color: white;
  font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: 0.25em;
  padding: 14px 28px;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
}

.hero-center-cta:hover {
  background: rgba(255,255,255,0.08);
  letter-spacing: 0.32em;
}

/* =========================================================
   BOTTOM ACTION ZONE (PINNED)
========================================================= */

.hero-bottom-zone {
  display: grid;
  gap: 14px;
  max-width: 520px;
}

/* =========================================================
   SHARED LINK RESET
========================================================= */

.persona-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* =========================================================
   ACTION CARDS
========================================================= */

.action-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);

  box-shadow: 0 14px 40px rgba(0,0,0,0.45);
  overflow: hidden;

  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.action-card:hover {
  transform: translateX(-6px);
}

/* =========================================================
   ICON
========================================================= */

.action-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.12);
}

.action-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

/* =========================================================
   LABEL (ALWAYS VISIBLE)
========================================================= */

.action-label {
  font-size: 14px;
  opacity: 0.85;
}

/* =========================================================
   REVEAL PANEL
========================================================= */

.action-reveal {
  position: absolute;
  inset: 10px 10px 10px auto;
  padding: 0 16px;
  border-radius: 14px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);

  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.action-card:hover .action-reveal {
  transform: translateX(0);
  opacity: 1;
}

.action-kicker {
  font-size: 11px;
  letter-spacing: 0.28em;
  opacity: 0.7;
}

.action-title {
  font-size: 15px;
  font-weight: 600;
}

/* =========================================================
   PLATFORM ACCENTS
========================================================= */

.action-card--youtube:hover {
  border-color: rgba(255,60,60,0.35);
}

.action-card--spotify:hover {
  border-color: rgba(30,215,96,0.35);
}

/* =========================================================
   BACK LINK
========================================================= */

.persona-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;

  text-decoration: none;
  color: rgba(255,255,255,0.8);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;

  opacity: 0.75;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.persona-back:hover {
  opacity: 1;
  transform: translateX(-4px);
}

.persona-back-chevron {
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
/* =========================================================
   ARTIST SIGNATURE (BOTTOM RIGHT)
========================================================= */

.artist-signature {
  position: absolute;
  right: clamp(16px, 4vw, 40px);
  bottom: clamp(16px, 4vw, 40px);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;

  pointer-events: none;
  z-index: 4;
}
.artist-signature-image {
  width: clamp(80px, 12vw, 140px);
  height: auto;

  /* Black & white + transparency */
  filter: grayscale(100%) contrast(1.05);
  opacity: 0.65;

  transform: translateZ(0);

  animation: artistGlitch 6s infinite steps(1);
}

.artist-signature-name {
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.38em;
  text-transform: uppercase;

  color: rgba(255,255,255,0.85);

  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .artist-signature {
    display: none;
  }
}