/*
 * MuseFy Headliner — immersive static atmosphere v6
 *
 * Architecture:
 * - one fixed, low-cost smoke/fire frame behind the whole page;
 * - the Hero remains the visual anchor;
 * - each section only MODULATES that same atmosphere with lightweight CSS layers;
 * - media/content always stays above the atmosphere and fully opaque;
 * - every light source derives from the color selected in the Headliner editor.
 */

:root {
  --headliner-void: #020203;
  --headliner-static-smoke-opacity: 0;
  --headliner-section-edge: clamp(110px, 15vh, 220px);
  /* Fallbacks when the editor has not injected accent vars yet. */
  --alok-accent-rgb: 215, 29, 165;
  --alok-accent-deep-rgb: 114, 16, 152;
  --alok-accent-light-rgb: 59, 130, 246;
  --alok-accent-secondary-rgb: 59, 130, 246;
  --alok-accent-title: #ff6bc4;
  --alok-accent-light: #3B82F6;
  /* Selectable hero atmosphere image (Atmosfera / Cosmic Melt…). */
  --headliner-bg-image: url("/alok/assets/imgs/bg-hero-CDEhUUKO.webp");
}

/* One permanent base scene for the whole site.
 * Dual-tone: Cor 1 + Cor 2 paint the hero texture via `color` blend
 * (hue/sat from the gradient, luminosity from bg-hero — texture stays). */
html body {
  position: relative;
  background-color: var(--headliner-void) !important;
  background-image:
    linear-gradient(180deg, rgba(1, 1, 2, .10) 0%, rgba(1, 1, 2, .42) 100%),
    radial-gradient(ellipse 100% 80% at 50% 18%, rgba(var(--alok-accent-rgb), .28), transparent 64%),
    radial-gradient(ellipse 90% 70% at 14% 36%, rgba(var(--alok-accent-light-rgb), .22), transparent 66%),
    linear-gradient(
      118deg,
      rgb(var(--alok-accent-light-rgb)) 0%,
      rgb(var(--alok-accent-rgb)) 52%,
      rgb(var(--alok-accent-deep-rgb)) 100%
    ),
    var(--headliner-bg-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  /* `color` on the dual gradient: hue/sat from Cor1/Cor2, luminosity from bg-hero. */
  background-blend-mode: normal, screen, screen, color, normal !important;
}

/* Photo templates (Cosmic Melt…): plate is painted on fixed ::before (see end). */
html[data-headliner-bg-tint="photo"] body {
  background-color: var(--headliner-void) !important;
  background-image: none !important;
  background-blend-mode: normal !important;
}

html[data-headliner-bg-tint="photo"] body #headliner-static-atmosphere {
  opacity: .28 !important;
}

html[data-headliner-bg-tint="photo"] body::after {
  opacity: .22 !important;
}

/* Static smoke/fire frame: rendered once, never follows the active block. */
html body #headliner-static-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: var(--headliner-static-smoke-opacity);
  mix-blend-mode: screen;
  filter: saturate(1.18) contrast(1.08);
  transform: translateZ(0);
}

/* CSS smoke fallback when WebGL is unavailable — keeps the colored haze alive. */
html body::after {
  content: "" !important;
  display: block !important;
  position: fixed !important;
  inset: -8% !important;
  z-index: 0 !important;
  pointer-events: none !important;
  visibility: visible !important;
  opacity: 0.72 !important;
  background:
    radial-gradient(ellipse 70% 55% at 42% 62%, rgba(var(--alok-accent-rgb), 0.32), transparent 68%),
    radial-gradient(ellipse 55% 48% at 68% 38%, rgba(var(--alok-accent-light-rgb), 0.22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 22% 78%, rgba(var(--alok-accent-light-rgb), 0.26), transparent 72%),
    radial-gradient(ellipse 40% 36% at 78% 82%, rgba(var(--alok-accent-rgb), 0.16), transparent 74%) !important;
  filter: blur(28px) saturate(1.25) !important;
  mix-blend-mode: screen !important;
  -webkit-mask: none !important;
  mask: none !important;
  transform: none !important;
}

/* Every Headliner block lives above the permanent scene. */
html body .hero-main,
html body #bio,
html body #agenda,
html body #photos,
html body #musics,
html body #contact,
html body #section-text,
html body #section-career,
html body #section-audience,
html body #section-instagram,
html body #section-tiktok,
html body #section-videos,
html body #section-flyers,
html body #section-presave,
html body #section-soundcloud,
html body #section-stores,
html body #section-youtube,
html body #section-press,
html body #section-logo,
html body #section-drive,
html body #section-aftermovie {
  position: relative;
  z-index: 1;
}

/* Content blocks are transparent windows into one continuous scene. */
html body #bio,
html body #agenda,
html body #photos,
html body #musics,
html body #contact,
html body #section-text,
html body #section-career,
html body #section-audience,
html body #section-instagram,
html body #section-tiktok,
html body #section-videos,
html body #section-flyers,
html body #section-presave,
html body #section-soundcloud,
html body #section-stores,
html body #section-youtube,
html body #section-press,
html body #section-logo,
html body #section-drive {
  isolation: isolate;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/*
 * Shared local atmosphere layers.
 * They stay BEHIND the block content (negative z-index inside each isolated section),
 * so images, videos, text and embeds never receive smoke/opacity on top of them.
 */
html body #bio::before,
html body #agenda::before,
html body #photos::before,
html body #musics::before,
html body #contact::before,
html body #section-text::before,
html body #section-career::before,
html body #section-audience::before,
html body #section-instagram::before,
html body #section-tiktok::before,
html body #section-videos::before,
html body #section-flyers::before,
html body #section-presave::before,
html body #section-soundcloud::before,
html body #section-stores::before,
html body #section-youtube::before,
html body #section-press::before,
html body #section-logo::before,
html body #section-drive::before,
html body #contact::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block !important;
  content: "" !important;
  pointer-events: none;
}

html body #agenda::after,
html body #photos::after,
html body #section-career::after,
html body #section-audience::after,
html body #section-instagram::after,
html body #section-tiktok::after,
html body #section-videos::after,
html body #section-flyers::after,
html body #musics::after,
html body #section-presave::after,
html body #section-soundcloud::after,
html body #section-stores::after,
html body #section-youtube::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block !important;
  content: "" !important;
  pointer-events: none;
}

/* HERO -> BIO: stage light stays BEHIND the portrait (never over the cutout). */
html body .hero-main::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 0;
  height: clamp(230px, 34vh, 430px);
  content: "";
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 75% at 50% 108%, rgba(var(--alok-accent-rgb), .22), transparent 69%),
    radial-gradient(ellipse 42% 62% at 16% 100%, rgba(var(--alok-accent-deep-rgb), .18), transparent 72%),
    radial-gradient(ellipse 38% 54% at 88% 100%, rgba(var(--alok-accent-light-rgb), .10), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(2, 2, 3, .05) 38%, rgba(2, 2, 3, .36) 100%) !important;
}

html body #bio::before {
  background:
    radial-gradient(ellipse 62% 82% at 18% 22%, rgba(var(--alok-accent-rgb), .24), transparent 68%),
    radial-gradient(ellipse 50% 65% at 86% 68%, rgba(var(--alok-accent-deep-rgb), .13), transparent 72%),
    linear-gradient(180deg, rgba(var(--alok-accent-rgb), .10) 0%, transparent 24%, transparent 72%, rgba(var(--alok-accent-deep-rgb), .08) 100%);
}

/* Restore crisp cutout portraits: the old mirror intentionally faded them to .72. */
html body #bio .artist-cutout-layer img,
html body #musics .artist-cutout-layer img,
html body #section-soundcloud .artist-cutout-layer img,
html body #section-stores .artist-cutout-layer img {
  opacity: .98 !important;
  filter: drop-shadow(0 0 42px rgba(var(--alok-accent-rgb), .16)) !important;
  mix-blend-mode: normal !important;
}

html body #bio > .artist-cutout-layer,
html body #musics > .artist-cutout-layer,
html body #section-soundcloud > .artist-cutout-layer,
html body #section-stores > .artist-cutout-layer {
  background: transparent !important;
}

html body #bio > .artist-cutout-layer::after,
html body #musics > .artist-cutout-layer::after,
html body #section-soundcloud > .artist-cutout-layer::after,
html body #section-stores > .artist-cutout-layer::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .20) 0%, transparent 39%, transparent 63%, rgba(0, 0, 0, .18) 100%) !important;
}

/* PHOTOS: clean center for the cards, stage light on the edges, no old Alok tiles. */
html body #photos::before {
  background:
    linear-gradient(180deg, rgba(var(--alok-accent-deep-rgb), .08) 0%, transparent 20%, transparent 78%, rgba(0, 0, 0, .14) 100%),
    radial-gradient(ellipse 58% 76% at -5% 38%, rgba(var(--alok-accent-rgb), .28), transparent 67%),
    radial-gradient(ellipse 50% 68% at 105% 72%, rgba(var(--alok-accent-light-rgb), .15), transparent 69%),
    radial-gradient(ellipse 50% 50% at 52% 48%, rgba(0, 0, 0, .24), transparent 76%);
}

html body #photos::after {
  opacity: .15;
  background-image: url("/alok/assets/imgs/bg-agenda-top-BuOzyns5.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center 42% !important;
  background-size: cover !important;
  mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}

/* CSS fallback; JS also removes these nodes once the new showcase exists. */
html body #photos .photos-gallery:has(.alok-photos-showcase) > .gallery-image {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Media must remain fully crisp — atmosphere never paints over it. */
html body #photos .alok-photos-showcase,
html body #photos .alok-photo-card,
html body #photos .alok-photo-card img,
html body #section-instagram iframe,
html body #section-instagram img,
html body #section-tiktok iframe,
html body #section-tiktok img,
html body #section-videos iframe,
html body #section-videos video,
html body #section-videos img,
html body #section-flyers img,
html body .alok-media-card img,
html body .alok-media-card video,
html body .alok-social-post img,
html body .alok-presave-card img,
html body .alok-track-card img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* AGENDA / CAREER / AUDIENCE: broad stage wash that alternates direction. */
html body #agenda::before,
html body #section-audience::before {
  background:
    radial-gradient(ellipse 68% 74% at 10% 46%, rgba(var(--alok-accent-rgb), .22), transparent 68%),
    radial-gradient(ellipse 46% 58% at 92% 18%, rgba(var(--alok-accent-light-rgb), .10), transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .08), transparent 24%, transparent 76%, rgba(var(--alok-accent-deep-rgb), .08));
}

html body #section-career::before {
  background:
    radial-gradient(ellipse 66% 72% at 92% 45%, rgba(var(--alok-accent-rgb), .21), transparent 68%),
    radial-gradient(ellipse 48% 58% at 8% 20%, rgba(var(--alok-accent-light-rgb), .09), transparent 70%),
    linear-gradient(180deg, rgba(var(--alok-accent-deep-rgb), .07), transparent 24%, transparent 78%, rgba(0, 0, 0, .10));
}

html body #agenda::after,
html body #section-career::after,
html body #section-audience::after {
  opacity: .11;
  background-image: url("/alok/assets/imgs/bg-agenda-top-BuOzyns5.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  mix-blend-mode: luminosity;
  -webkit-mask-image: linear-gradient(180deg, transparent 2%, #000 25%, #000 75%, transparent 98%);
  mask-image: linear-gradient(180deg, transparent 2%, #000 25%, #000 75%, transparent 98%);
}

/* TEXT: darker breathing room while preserving the same colored atmosphere at the edges. */
html body #section-text::before {
  background:
    radial-gradient(ellipse 50% 62% at 0% 52%, rgba(var(--alok-accent-deep-rgb), .13), transparent 72%),
    radial-gradient(ellipse 42% 56% at 100% 34%, rgba(var(--alok-accent-rgb), .11), transparent 73%),
    linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .20) 32%, rgba(0, 0, 0, .24) 68%, transparent 100%);
}

/* REELS / SOCIAL / VIDEOS / FLYERS: cinematic side haze and one static light beam. */
html body #section-instagram::before,
html body #section-videos::before {
  background:
    radial-gradient(ellipse 62% 72% at 88% 48%, rgba(var(--alok-accent-rgb), .24), transparent 68%),
    radial-gradient(ellipse 45% 58% at 8% 82%, rgba(var(--alok-accent-deep-rgb), .14), transparent 70%),
    linear-gradient(118deg, transparent 29%, rgba(var(--alok-accent-light-rgb), .07) 45%, transparent 57%);
}

html body #section-tiktok::before,
html body #section-flyers::before {
  background:
    radial-gradient(ellipse 62% 72% at 10% 48%, rgba(var(--alok-accent-rgb), .23), transparent 68%),
    radial-gradient(ellipse 44% 58% at 94% 78%, rgba(var(--alok-accent-deep-rgb), .14), transparent 70%),
    linear-gradient(64deg, transparent 31%, rgba(var(--alok-accent-light-rgb), .065) 47%, transparent 59%);
}

html body #section-instagram::after,
html body #section-tiktok::after,
html body #section-videos::after,
html body #section-flyers::after {
  opacity: .085;
  background-image: var(--headliner-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  mix-blend-mode: soft-light;
  -webkit-mask-image: radial-gradient(ellipse 76% 72% at 50% 50%, #000 0%, transparent 76%);
  mask-image: radial-gradient(ellipse 76% 72% at 50% 50%, #000 0%, transparent 76%);
}

/* MUSIC / PRESAVE / SOUNDCLOUD / STORES / YOUTUBE: low stage horizon. */
html body #musics::before,
html body #section-presave::before,
html body #section-soundcloud::before,
html body #section-stores::before,
html body #section-youtube::before {
  background:
    radial-gradient(ellipse 76% 52% at 50% 104%, rgba(var(--alok-accent-rgb), .30), transparent 67%),
    radial-gradient(ellipse 42% 52% at 12% 30%, rgba(var(--alok-accent-deep-rgb), .10), transparent 72%),
    radial-gradient(ellipse 42% 52% at 92% 32%, rgba(var(--alok-accent-light-rgb), .08), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .08) 62%, rgba(0, 0, 0, .16) 100%);
}

html body #musics::after,
html body #section-presave::after,
html body #section-soundcloud::after,
html body #section-stores::after,
html body #section-youtube::after {
  opacity: .075;
  background-image: url("/alok/assets/imgs/bg-agenda-top-BuOzyns5.webp") !important;
  background-position: center bottom !important;
  background-size: cover !important;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 15%, #000 65%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 15%, #000 65%, transparent 100%);
}

/* PRESS / LOGO / DRIVE: calmer, premium breathing space. */
html body #section-press::before,
html body #section-logo::before,
html body #section-drive::before {
  background:
    radial-gradient(ellipse 48% 54% at 8% 50%, rgba(var(--alok-accent-rgb), .10), transparent 72%),
    radial-gradient(ellipse 46% 54% at 94% 50%, rgba(var(--alok-accent-deep-rgb), .09), transparent 72%),
    linear-gradient(180deg, rgba(0, 0, 0, .08), transparent 24%, transparent 76%, rgba(0, 0, 0, .10));
}

/* CONTACT: close the journey back into black without a hard seam. */
html body #contact::before {
  background:
    radial-gradient(ellipse 62% 68% at 50% 8%, rgba(var(--alok-accent-rgb), .16), transparent 68%),
    radial-gradient(ellipse 40% 52% at 12% 42%, rgba(var(--alok-accent-deep-rgb), .10), transparent 72%),
    linear-gradient(180deg, transparent 0%, rgba(2, 2, 3, .18) 58%, rgba(2, 2, 3, .70) 100%);
}

html body #contact::after {
  z-index: -1;
  background: linear-gradient(180deg, transparent 0%, transparent 58%, rgba(0, 0, 0, .56) 100%);
}

/* Aftermovie keeps a readable center while the permanent atmosphere stays visible around it. */
html body #section-aftermovie.alok-block-section.alok-videowall,
html body #section-aftermovie.alok-videowall {
  background-color: rgba(0, 0, 0, .22) !important;
  background-image:
    radial-gradient(ellipse 56% 72% at 0% 50%, rgba(var(--alok-accent-rgb), .11), transparent 72%),
    radial-gradient(ellipse 56% 72% at 100% 50%, rgba(var(--alok-accent-light-rgb), .07), transparent 72%) !important;
  background-blend-mode: screen !important;
}

/* Never allow the old moving-per-section atmosphere to return from cache. */
html body .headliner-section-smoke,
html body #headliner-section-smoke {
  display: none !important;
}

html body .headliner-atmosphere-host {
  isolation: isolate !important;
}

/* Tablet/mobile: same art direction with a lighter rendering budget. */
@media (max-width: 899px) {
  :root {
    --headliner-static-smoke-opacity: .63;
  }

  html body {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }

  html body #headliner-static-atmosphere {
    filter: saturate(1.08) contrast(1.03);
  }

  html body .hero-main::after {
    height: clamp(180px, 30svh, 320px);
  }

  html body #agenda::after,
  html body #photos::after,
  html body #section-career::after,
  html body #section-audience::after,
  html body #section-instagram::after,
  html body #section-tiktok::after,
  html body #section-videos::after,
  html body #section-flyers::after,
  html body #musics::after,
  html body #section-presave::after,
  html body #section-soundcloud::after,
  html body #section-stores::after,
  html body #section-youtube::after {
    opacity: .065;
  }
}

@media (max-width: 560px) {
  :root {
    --headliner-static-smoke-opacity: .54;
  }

  html body #bio .artist-cutout-layer img,
  html body #musics .artist-cutout-layer img,
  html body #section-soundcloud .artist-cutout-layer img,
  html body #section-stores .artist-cutout-layer img {
    opacity: 1 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body {
    background-attachment: scroll !important;
  }
}

/*
 * Restore the immersive smoke/fire atmosphere.
 * Kill the later tribal spine / oval halos that replaced the colored smoke.
 */
html body #headliner-static-atmosphere {
  display: block !important;
  visibility: visible !important;
  opacity: var(--headliner-static-smoke-opacity) !important;
}

html body::before,
html body .headliner-rune,
html body [data-headliner-rune],
html body .headliner-rune-button::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  content: none !important;
  background: none !important;
  -webkit-mask: none !important;
  mask: none !important;
}

/* Keep the CSS smoke haze fallback visible (colored ambient plumes). */
html body::after {
  display: block !important;
  visibility: visible !important;
  opacity: 0.72 !important;
  content: "" !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html body .hero-main .shape,
html body .hero-main .fire-01,
html body .hero-main .fire-02 {
  display: none !important;
}

html body .hero-main .images-hero,
html body .hero-main .image-hero {
  display: block !important;
}

html body .hero-main .image-hero img[src]:not([src=""]) {
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  border-radius: 0 !important;
}

html body .hero-main .image-hero {
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body .artist-cutout-layer,
html body .artist-cutout-layer::after {
  background: transparent !important;
}

html body .artist-cutout-layer::after {
  display: none !important;
}

html body .artist-cutout-layer img,
html body .alok-media-card img,
html body .alok-media-card video,
html body iframe,
html body video {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* Audience highlight placeholder stays hidden. */
html body #section-audience .alok-audience-hero {
  display: none !important;
  visibility: hidden !important;
}

@media (max-width: 899px) {
  html body #headliner-static-atmosphere {
    display: block !important;
    visibility: visible !important;
  }
}

/*
 * Restore the split composition: the black tribal canvas belongs to the
 * whole page, while the original atmospheric artwork belongs only to Hero.
 */
html body {
  background: #000 !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

/* Dual-tone lives on `html body` — do not repaint raw bg-hero here. */
html body .hero-main {
  background: transparent !important;
  background-image: none !important;
}

@media (max-width: 899px) {
  html body .hero-main {
    background: transparent !important;
    background-image: none !important;
  }
}

/* Final visual lock: one fixed tribal canvas, with Hero art isolated to Hero. */
html body {
  position: relative !important;
  background: #000 !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

html body #headliner-static-atmosphere,
html body #headliner-section-smoke {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  display: block !important;
  visibility: visible !important;
  pointer-events: none !important;
  background: linear-gradient(
    180deg,
    var(--alok-accent-light) 0%,
    var(--alok-accent) 48%,
    var(--alok-accent-deep) 100%
  ) !important;
  -webkit-mask: url("/alok/assets/imgs/headliner-tribal.svg") center top / min(54rem, 106vw) 100% no-repeat !important;
  mask: url("/alok/assets/imgs/headliner-tribal.svg") center top / min(54rem, 106vw) 100% no-repeat !important;
  opacity: .42 !important;
  filter: none !important;
  transform: none !important;
  mix-blend-mode: normal !important;
}

html body::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  content: none !important;
  background: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body .hero-main,
html body #bio,
html body #photos,
html body #agenda,
html body #musics,
html body #contact,
html body .alok-block-section {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Keep the fixed artwork between the page canvas and each transparent block. */
html body::before {
  z-index: 1 !important;
}

html body > .hero-main,
html body > #bio,
html body > #photos,
html body > #agenda,
html body > #musics,
html body > #contact,
html body > .alok-block-section {
  position: relative !important;
  z-index: 2 !important;
}

/* Match the stable stacking order: the canvas is level 0 and blocks are 1. */
html body::before {
  z-index: 0 !important;
}

html body > .hero-main,
html body > #bio,
html body > #photos,
html body > #agenda,
html body > #musics,
html body > #contact,
html body > .alok-block-section {
  z-index: 1 !important;
}

html body .hero-main {
  background: transparent !important;
  background-image: none !important;
}

html body #section-audience.alok-audience-section {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html body .hero-main > *,
html body #bio > *,
html body #photos > *,
html body #agenda > *,
html body #musics > *,
html body #contact > *,
html body .alok-block-section > * {
  position: relative;
  z-index: 1;
}

/* Portrait plane must sit above the hero stage-light ::after. */
html body .hero-main > .container .images-hero {
  z-index: 5 !important;
}

html body .hero-main .shape,
html body .hero-main .fire-01,
html body .hero-main .fire-02,
html body .headliner-rune,
html body [data-headliner-rune],
html body .headliner-rune-button::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
}

/* Keep one artist portrait in the Hero. The original template renders four
   copies; the rear three are decorative duplicates and must never be visible. */
html body .hero-main .image-hero-02,
html body .hero-main .image-hero-03,
html body .hero-main .image-hero-04 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}

html body .hero-main .image-hero-01 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  animation: none !important;
  z-index: 4 !important;
}

html body .hero-main .image-hero-01 img {
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 899px) {
  /* Legacy tribal mask dim — do NOT fade the Atmosfera / photo Capas plate. */
  html body::before {
    -webkit-mask: none !important;
    mask: none !important;
    opacity: 1 !important;
  }

  html body .hero-main {
    background-position: center center !important;
  }
}

/* Remove legacy section washes so the fixed tribal canvas can read cleanly. */
html body #bio::before,
html body #bio::after,
html body #photos::before,
html body #photos::after,
html body #agenda::before,
html body #agenda::after,
html body #musics::before,
html body #musics::after,
html body #contact::before,
html body #contact::after,
html body .alok-block-section::before,
html body .alok-block-section::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: none !important;
}

/*
 * Final Headliner composition:
 * - preserve the one static smoke canvas (no per-section animation loops);
 * - keep the portrait immediately legible on a phone;
 * - retain a compact, named bio panel below it.
 *
 * This intentionally supersedes the old tribal-canvas experiment above,
 * whose final rules hid both the WebGL canvas and the CSS smoke fallback.
 */
html body {
  /* Final lock must keep Cor1/Cor2 dual-tone (color blend), not raw purple art. */
  background-color: var(--headliner-void) !important;
  background-image:
    linear-gradient(180deg, rgba(1, 1, 2, .10) 0%, rgba(1, 1, 2, .42) 100%),
    radial-gradient(ellipse 100% 80% at 50% 18%, rgba(var(--alok-accent-rgb), .28), transparent 64%),
    radial-gradient(ellipse 90% 70% at 14% 36%, rgba(var(--alok-accent-light-rgb), .22), transparent 66%),
    linear-gradient(
      118deg,
      rgb(var(--alok-accent-light-rgb)) 0%,
      rgb(var(--alok-accent-rgb)) 52%,
      rgb(var(--alok-accent-deep-rgb)) 100%
    ),
    var(--headliner-bg-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-blend-mode: normal, screen, screen, color, normal !important;
}

html[data-headliner-bg-tint="photo"] body {
  background-color: var(--headliner-void) !important;
  background-image: none !important;
  background-blend-mode: normal !important;
}

html[data-headliner-bg-tint="photo"] body #headliner-static-atmosphere {
  opacity: .28 !important;
}

html[data-headliner-bg-tint="photo"] body::after {
  opacity: .22 !important;
}

/* Hero stage stays transparent so the dual-tone body atmosphere shows through. */
html body .hero-main {
  /* Hero stage stays transparent so the dual-tone body atmosphere shows through */
  background: transparent !important;
  background-image: none !important;
}

html body #headliner-static-atmosphere {
  display: block !important;
  visibility: visible !important;
  opacity: var(--headliner-static-smoke-opacity) !important;
}

html body::before {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  content: none !important;
}

html body::after {
  display: block !important;
  visibility: visible !important;
  opacity: .56 !important;
  content: "" !important;
  background:
    radial-gradient(ellipse 70% 55% at 42% 62%, rgba(var(--alok-accent-rgb), .32), transparent 68%),
    radial-gradient(ellipse 55% 48% at 68% 38%, rgba(var(--alok-accent-light-rgb), .22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 22% 78%, rgba(var(--alok-accent-deep-rgb), .26), transparent 72%) !important;
  filter: blur(28px) saturate(1.25) !important;
  mix-blend-mode: screen !important;
}

/* The bio brand is a reading label, not the fixed hero lockup. Give it the
   card width and a smaller scale so real names never escape its frame. */
html body #bio .logo-bio {
  width: 100% !important;
}

html body #bio .logo-bio .bio-artist-name {
  font-size: clamp(1.8rem, 3.25vw, 2.65rem) !important;
  letter-spacing: -.055em !important;
  line-height: .9 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

@media (max-width: 900px) {
  html body {
    background-attachment: scroll !important;
    background-position: center top !important;
  }

  html body .hero-main {
    height: 100svh !important;
    height: 100dvh !important;
    min-height: 100svh !important;
    min-height: 100dvh !important;
    max-height: none !important;
    background: transparent !important;
    background-image: none !important;
  }

  /*
   * Full-bleed mobile portrait: fill from the top of the hero down to the
   * brand dock so the cutout reads full-screen (no mid-thigh crop + black gap).
   */
  html body .hero-main .images-hero,
  html body #top .images-hero {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  html body .hero-main .image-hero-01 {
    top: 0 !important;
    right: 0 !important;
    bottom: clamp(7.25rem, 17dvh, 9.5rem) !important;
    left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    transform: none !important;
  }

  html body .hero-main .image-hero-01 img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center top !important;
  }

  /* Signature stays at the base of the hero. Full-height container makes
     `absolute` resolve against the hero stage (not a short content box). */
  html body .hero-main > .container {
    height: 100% !important;
    min-height: 100% !important;
    position: relative !important;
  }

  html body .hero-main .hero-brand-dock {
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px) + 0.45rem) !important;
  }

  html body .hero-main .logo {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  html body .hero-main .artist-logo-text {
    font-size: clamp(2.1rem, 10.5vw, 3.25rem) !important;
    line-height: .92 !important;
  }

  html body .alok-hero-social {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: 18 !important;
  }

  html body #alok-user-meta {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 18 !important;
    margin: 0 !important;
    transform: none !important;
  }

  html body #bio {
    min-height: 0 !important;
    background: transparent !important;
  }

  html body #bio .artist-cutout-layer {
    height: min(48dvh, 25rem) !important;
    min-height: min(48dvh, 25rem) !important;
    max-height: min(48dvh, 25rem) !important;
  }

  html body #bio .artist-cutout-layer img {
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  html body #bio > .container {
    padding: .75rem max(1rem, env(safe-area-inset-left), env(safe-area-inset-right)) 2.25rem !important;
  }

  html body #bio .bio-content {
    width: 100% !important;
    margin: 0 !important;
    padding: 1.35rem 1.2rem 1.45rem !important;
    background:
      linear-gradient(145deg, rgba(25, 8, 23, .95), rgba(5, 5, 8, .94)) !important;
    box-shadow:
      0 0 0 1px rgba(var(--alok-accent-rgb), .52),
      0 0 42px rgba(var(--alok-accent-rgb), .24),
      0 20px 54px rgba(0, 0, 0, .55) !important;
  }

  html body #bio .logo-bio {
    width: 100% !important;
    min-height: 0 !important;
    margin-top: .15rem !important;
  }

  html body #bio .logo-bio .bio-artist-name {
    display: block !important;
    max-width: 100% !important;
    color: #fff !important;
    font-size: clamp(1.65rem, 7.2vw, 2.1rem) !important;
    letter-spacing: -.035em !important;
    line-height: .88 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    overflow: visible !important;
    text-shadow:
      0 0 24px rgba(var(--alok-accent-rgb), .62),
      0 0 48px rgba(var(--alok-accent-rgb), .25) !important;
  }

  html body #bio .content-text {
    margin-top: 1.15rem !important;
    padding-top: 1rem !important;
    border-top: 1px solid rgba(255, 255, 255, .15) !important;
  }

  html body #bio .content-text p {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: clamp(.94rem, 4vw, 1.04rem) !important;
    line-height: 1.64 !important;
  }
}

/* Fast boot: solid void until chrome is ready — never flash the default
   purple Alok plate through a translucent loader. */
html body #headliner-boot-loader {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: grid !important;
  place-items: center !important;
  gap: .8rem !important;
  align-content: center !important;
  color: rgba(255, 255, 255, .86) !important;
  background: #020203 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  font-family: Montserrat, sans-serif !important;
  font-size: .68rem !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  transition: opacity .24s ease, visibility .24s ease !important;
}

/* Once Capas/Atmosfera were seeded for first paint, let them read through. */
html[data-headliner-chrome-seeded] body #headliner-boot-loader {
  background: rgba(2, 2, 3, .42) !important;
}

html.headliner-ready body #headliner-boot-loader {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body .headliner-boot-loader__spinner {
  display: block !important;
  width: 2.2rem !important;
  height: 2.2rem !important;
  border: 2px solid rgba(255, 255, 255, .2) !important;
  border-top-color: var(--alok-accent-light, #ff6bc4) !important;
  border-right-color: var(--alok-accent, #d71da5) !important;
  border-radius: 50% !important;
  animation: headliner-boot-spin .72s linear infinite !important;
}

@keyframes headliner-boot-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Smoke / haze always under portraits and media. */
html body #headliner-static-atmosphere,
html body::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

html body .hero-main {
  isolation: isolate !important;
}

/* Beat the older `#top .images-hero { z-index: 1 !important }` ID rule so the
   portrait plane stays above the hero stage-light ::after. */
html body #top .images-hero,
html body #top .image-hero,
html body #top .image-hero-01,
html body #top .image-hero-01 img,
html body .hero-main .images-hero,
html body .hero-main .image-hero,
html body .hero-main .image-hero-01,
html body .hero-main .image-hero-01 img,
html body .artist-cutout-layer,
html body .artist-cutout-layer img,
html body .alok-photos-showcase,
html body .alok-photos-showcase img,
html body .alok-reel-card__frame,
html body .alok-videowall__cell,
html body #section-videos video,
html body #section-aftermovie video,
html body #photos .photos-gallery,
html body #photos .gallery-image {
  z-index: 5 !important;
  isolation: isolate !important;
  mix-blend-mode: normal !important;
}

/*
 * Music stages (Spotify / SoundCloud / Beatport): brand copy + CTA must read
 * on top of the decorative left cutout. The blanket cutout rule above would
 * otherwise bury "SOUNDCLOUD" / "BEATPORT" behind the portrait.
 */
html body #musics > .artist-cutout-layer,
html body #musics > .artist-cutout-layer img,
html body #section-soundcloud > .artist-cutout-layer,
html body #section-soundcloud > .artist-cutout-layer img,
html body #section-stores > .artist-cutout-layer,
html body #section-stores > .artist-cutout-layer img {
  z-index: 2 !important;
}

html body #musics > .container,
html body #section-soundcloud > .alok-music-stage__grid,
html body #section-stores > .alok-music-stage__grid {
  position: relative !important;
  z-index: 6 !important;
}

html body .hero-main::after,
html body #photos::before,
html body #photos::after,
html body #bio::before,
html body #agenda::before,
html body .alok-block-section::before {
  z-index: 0 !important;
}

html body #section-videos,
html body #section-flyers,
html body #photos,
html body .alok-reels-section,
html body .alok-stage-section {
  isolation: isolate !important;
}

/*
 * Category titles ("FOTOS", "VÍDEOS", …) used a clipped deep-purple gradient
 * that vanished into the smoke. Use a lightened accent title token so the
 * word stays related to the editor color but always reads on the haze.
 */
html body .photos-info h2,
html body #agenda h2,
html body .section-default header h2,
html body .alok-section-header h2,
html body .alok-career-header h2,
html body .alok-audience-header h2,
html body .alok-stage-spotlight__copy h2,
html body .alok-stage-videos__copy h2,
html body .alok-reels-copy h2,
html body .alok-stage-yt__copy h2,
html body .alok-press-copy h2,
html body .alok-logo-copy h2,
html body .alok-presave-copy h2,
html body #musics .col-left h2 {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--alok-accent-title, var(--alok-accent-light, #ff6bc4)) !important;
  -webkit-text-fill-color: var(--alok-accent-title, var(--alok-accent-light, #ff6bc4)) !important;
  text-shadow:
    0 0 1.4rem rgba(var(--alok-accent-rgb), .45),
    0 2px 16px rgba(0, 0, 0, .55) !important;
}

/* Press "KIT" stays vivid even when the artist accent is a dark/muddy tone. */
html body .alok-press-copy h2 .alok-press-kit-word,
html body .alok-press-copy h2 em.alok-press-kit-word,
html body .alok-presave-copy h2 .alok-presave-word,
html body .alok-presave-copy h2 em.alok-presave-word {
  color: color-mix(
    in srgb,
    var(--alok-accent-title, #ff4d6d) 78%,
    #fff 22%
  ) !important;
  -webkit-text-fill-color: color-mix(
    in srgb,
    var(--alok-accent-title, #ff4d6d) 78%,
    #fff 22%
  ) !important;
  text-shadow:
    0 0 2rem rgba(var(--alok-accent-title-rgb, var(--alok-accent-rgb)), .7),
    0 0 0.45rem rgba(255, 255, 255, .28),
    0 2px 16px rgba(0, 0, 0, .55) !important;
}

html body .photos-info h2 span,
html body #agenda h2 span,
html body .section-default header h2 span,
html body .alok-section-header h2 span,
html body .alok-career-header h2 span,
html body .alok-audience-header h2 span,
html body .alok-stage-spotlight__copy h2 span,
html body .alok-stage-videos__copy h2 span,
html body .alok-reels-copy h2 span,
html body .alok-stage-yt__copy h2 span,
html body .alok-press-copy h2 span,
html body .alok-logo-copy h2 span,
html body #musics .col-left h2 span {
  background: none !important;
  color: rgba(255, 255, 255, .88) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .88) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45) !important;
}

/* Mobile footer signature: only the artist's name remains. */
html body .footer-signature {
  display: inline-block;
  color: var(--alok-accent, #d71da5) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

@media (max-width: 900px) {
  html body {
    min-height: 100dvh !important;
    background-color: var(--headliner-void, #020203) !important;
  }

  /*
   * Mobile signature: absolute to the full-height hero container (above the
   * social row). Must NOT be `fixed` or the name sticks over later sections.
   */
  html body .hero-main > .container {
    height: 100% !important;
    min-height: 100% !important;
    position: relative !important;
  }

  html body .hero-main .hero-brand-dock {
    bottom: max(0.75rem, env(safe-area-inset-bottom, 0px) + 0.45rem) !important;
  }

  html body .hero-main .logo {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
  }

  html body .hero-main .artist-logo-text {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    font-size: clamp(2rem, 10vw, 3.1rem) !important;
    line-height: .92 !important;
    white-space: nowrap !important;
  }

  html body .footer-credit {
    display: none !important;
  }

  html body #contact .footer-note {
    width: 100% !important;
    margin: 1rem auto 0 !important;
    text-align: center !important;
  }

  html body #headliner-static-atmosphere {
    height: 100dvh !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .headliner-boot-loader__spinner {
    animation-duration: 1.8s !important;
  }
}

/*
 * Product decision: Headliner ships without smoke for every kit.
 * Keep dual-tone / Cosmic Melt / photo plates; kill WebGL smoke, CSS haze
 * plumes, hero stage fog, and section atmosphere modulators — even if a
 * cached runtime tries to restore them.
 */
:root {
  --headliner-static-smoke-opacity: 0 !important;
}

html body #headliner-static-atmosphere,
html body #headliner-section-smoke,
html body .headliner-section-smoke,
html body #smoke-canvas,
html body .alok-booking-cta__smoke {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body::after,
html body .hero-main::before,
html body .hero-main::after,
html body #bio::before,
html body #bio::after,
html body #agenda::before,
html body #agenda::after,
html body #photos::before,
html body #photos::after,
html body #musics::before,
html body #musics::after,
html body #contact::before,
html body #contact::after,
html body #section-text::before,
html body #section-career::before,
html body #section-audience::before,
html body #section-instagram::before,
html body #section-tiktok::before,
html body #section-videos::before,
html body #section-flyers::before,
html body #section-presave::before,
html body #section-soundcloud::before,
html body #section-stores::before,
html body #section-youtube::before,
html body #section-press::before,
html body #section-logo::before,
html body #section-drive::before,
html body #section-aftermovie::before,
html body .alok-block-section::before,
html body .alok-block-section::after {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  content: none !important;
  background: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
}

/*
 * Atmosfera (dual-tone): classic bg-hero plate with Cor1/Cor2 color-blend
 * so the neon ring / texture reads in preview and publish.
 * WebGL + CSS smoke stay killed above.
 *
 * Dual-tone AND photo Capas paint on a fixed viewport layer (`::before`).
 * Never put cover plates on the scrolling body — multi-thousand-px body
 * height zooms the art into a close-up inside the editor phone iframe
 * and on mobile. `position:fixed; inset:0` sizes to the real viewport.
 */
html body {
  background-color: var(--headliner-void) !important;
  background-image: none !important;
  background-blend-mode: normal !important;
  background-attachment: scroll !important;
}

/*
 * Atmosfera dual-tone plate on the fixed viewport layer.
 * (Photo Capas override this block via data-headliner-bg-tint="photo".)
 */
html:not([data-headliner-bg-tint="photo"]) body::before {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100dvh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-color: var(--headliner-void) !important;
  background-image:
    linear-gradient(180deg, rgba(1, 1, 2, 0.10) 0%, rgba(1, 1, 2, 0.42) 100%),
    radial-gradient(
      ellipse 100% 80% at 50% 18%,
      rgba(var(--alok-accent-rgb), 0.28),
      transparent 64%
    ),
    radial-gradient(
      ellipse 90% 70% at 14% 36%,
      rgba(var(--alok-accent-light-rgb), 0.22),
      transparent 66%
    ),
    linear-gradient(
      118deg,
      rgb(var(--alok-accent-light-rgb)) 0%,
      rgb(var(--alok-accent-rgb)) 52%,
      rgb(var(--alok-accent-deep-rgb)) 100%
    ),
    var(--headliner-bg-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-blend-mode: normal, screen, screen, color, normal !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: none !important;
  transform: translateZ(0);
}

/* Photo Capas: void on body; plate lives on the fixed viewport layer below. */
html[data-headliner-bg-tint="photo"] body {
  background-color: var(--headliner-void) !important;
  background-image: none !important;
  background-blend-mode: normal !important;
}

/*
 * Fixed viewport plate for photo Capas. `position:fixed; inset:0` sizes to the
 * real viewport (or editor iframe), so cover stays responsive on mobile
 * instead of scaling to the full document height.
 */
html[data-headliner-bg-tint="photo"] body::before {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100dvh !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background-color: var(--headliner-void) !important;
  background-image:
    linear-gradient(180deg, rgba(1, 1, 2, 0.18) 0%, rgba(1, 1, 2, 0.42) 100%),
    var(--headliner-bg-image) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-blend-mode: normal, normal !important;
  -webkit-mask: none !important;
  mask: none !important;
  filter: none !important;
  transform: translateZ(0);
}

@media (max-width: 899px) {
  html:not([data-headliner-bg-tint="photo"]) body::before {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
  }

  html[data-headliner-bg-tint="photo"] body {
    background-image: none !important;
  }

  html[data-headliner-bg-tint="photo"] body::before {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    /* Slight bias toward the visual center of festival/psy plates on phones. */
    background-position: center 42% !important;
  }
}

@media (max-width: 560px) {
  html[data-headliner-bg-tint="photo"] body::before {
    background-position: center 40% !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  html[data-headliner-bg-tint="photo"] body::before {
    background-position: center center !important;
  }
}