/* =====================================================================
   NAROMX — brand surface layer (Brand Asset Kit application).
   Direction: cinematic neon · holographic core · reactive music visuals.

   Loaded by the mu-plugin `brand-naromx.php`, AFTER the theme stylesheets,
   so it only layers on top. It adds no markup and rewrites no layout:
   every rule is a decorative surface, a brand asset, or a token re-tint.

   Asset URLs are relative to this file (assets/brand/).
   Reversible: delete this file + the mu-plugin to fully revert.
   ===================================================================== */

:root{
  --nxb-ease: cubic-bezier(.2,.8,.2,1);
  /* fallbacks so this file still renders correctly if tokens.css is missing */
  --nxb-accent:   var(--brand-accent, #2FE0BE);
  --nxb-accent-2: var(--brand-accent-2, #E24A6A);
  --nxb-bg:       var(--brand-bg, #05100E);
}

/* =====================================================================
   1. FRONT PAGE — hero: cinematic backdrop from hero-background.svg
   The hero sits on an opaque section background, so the kit artwork is
   layered as a screen-blended plate behind the hero content (.hero > *
   is already z-index:1; pseudo-elements stay at 0).
   The top band of the SVG carries its own baked-in "NAROMX" wordmark —
   it is bottom-anchored and top-masked so that band never doubles the
   live .hero-wm.
   ===================================================================== */
body:not(.nx-int) .hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url("hero-background.svg") no-repeat 50% 100% / cover;
  mix-blend-mode:screen;
  opacity:.40;
  transition:opacity .9s var(--nxb-ease);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 36%,#000 64%,#000 100%);
          mask-image:linear-gradient(to bottom,transparent 0,transparent 36%,#000 64%,#000 100%);
}
/* reactive: the backdrop opens up while the radio is transmitting */
body.is-live:not(.nx-int) .hero::after{opacity:.66}

/* wordmark bloom — neon, not glow-spam: two very wide, very low-alpha halos */
body:not(.nx-int) .hero-wm{
  text-shadow:
    0 0 44px color-mix(in srgb, var(--nxb-accent) 26%, transparent),
    0 0 130px color-mix(in srgb, var(--nxb-accent) 16%, transparent);
}
body:not(.nx-int) .hero-kicker{
  text-shadow:0 0 18px color-mix(in srgb, var(--nxb-accent) 45%, transparent);
}

/* =====================================================================
   2. FRONT PAGE — brand pattern on the opaque content surfaces
   pattern.svg ships with an opaque brand-bg base, so it is screen-blended
   over the section background: the base drops out, the grid + core marks
   stay. Direct children are lifted to z-index:1 so nothing is covered.
   ===================================================================== */
body:not(.nx-int) .releases::after,
body:not(.nx-int) .services::after,
body:not(.nx-int) .store::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url("pattern.svg") repeat 0 0 / clamp(420px,42vw,680px) auto;
  mix-blend-mode:screen;
  opacity:.16;          /* texture, not wallpaper — must never compete with artwork */
}
body:not(.nx-int) .releases > *,
body:not(.nx-int) .services > *,
body:not(.nx-int) .store    > *,
body:not(.nx-int) .radio    > *{position:relative;z-index:1}

/* =====================================================================
   3. FRONT PAGE — holographic core behind the live visualiser
   The radio section is the one surface the WebGL shader shows through;
   the core sits behind the FFT canvas and breathes with the transmission.
   ===================================================================== */
body:not(.nx-int) .radio-viz{position:relative;overflow:hidden}
body:not(.nx-int) .radio-viz::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(44% 58% at 50% 50%, color-mix(in srgb, var(--nxb-accent) 30%, transparent), transparent 70%),
    radial-gradient(24% 34% at 50% 50%, color-mix(in srgb, var(--nxb-accent-2) 26%, transparent), transparent 72%);
  opacity:.5;
  transition:opacity .7s var(--nxb-ease);
  animation:nxb-core 7.5s ease-in-out infinite alternate;
}
/* the FFT canvas must stay on top of the core */
body:not(.nx-int) .radio-viz canvas{position:relative;z-index:1}
body.is-live:not(.nx-int) .radio-viz::before{opacity:1}
@keyframes nxb-core{from{transform:scale(.9)}to{transform:scale(1.1)}}

body:not(.nx-int) .radio-panel{
  transition:border-color .6s var(--nxb-ease), box-shadow .6s var(--nxb-ease);
}
body.is-live:not(.nx-int) .radio-panel{
  border-color:color-mix(in srgb, var(--nxb-accent) 42%, transparent);
  box-shadow:0 0 80px -26px color-mix(in srgb, var(--nxb-accent) 90%, transparent);
}
body.is-live:not(.nx-int) .air-led{
  box-shadow:0 0 14px var(--nxb-accent-2), 0 0 4px var(--nxb-accent-2);
}

/* =====================================================================
   4. NEON — signal surfaces (CTAs, tags, marquee)
   ===================================================================== */
body:not(.nx-int) .cta-primary,
body:not(.nx-int) .tune{
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--nxb-accent) 50%, transparent),
    0 10px 40px -14px color-mix(in srgb, var(--nxb-accent) 85%, transparent);
  transition:transform .3s, background .3s, color .3s, box-shadow .4s var(--nxb-ease);
}
body:not(.nx-int) .cta-primary:hover,
body:not(.nx-int) .tune:hover{
  box-shadow:
    0 0 0 1px var(--nxb-accent),
    0 16px 56px -12px color-mix(in srgb, var(--nxb-accent) 95%, transparent);
}
body.is-live:not(.nx-int) .tune{
  box-shadow:
    0 0 0 1px var(--nxb-accent-2),
    0 16px 56px -12px color-mix(in srgb, var(--nxb-accent-2) 90%, transparent);
}
body:not(.nx-int) .radio-btn:hover{
  box-shadow:0 0 34px -8px color-mix(in srgb, var(--nxb-accent) 90%, transparent);
}
body:not(.nx-int) .sec-tag span,
body:not(.nx-int) .rel-code{
  text-shadow:0 0 16px color-mix(in srgb, var(--nxb-accent) 55%, transparent);
}
body:not(.nx-int) .marquee{
  box-shadow:0 0 70px -16px color-mix(in srgb, var(--nxb-accent) 90%, transparent);
}
/* Pre-existing RTL defect on this brand band, fixed here because the band is a
   brand surface: `.marquee` is display:flex with no direction, so on this RTL
   document the duplicated `.marquee-run` is laid out to the LEFT of the first
   one. Both runs then animate translateX(-100%) together, so once the first run
   scrolls off there is nothing behind it and the accent band runs empty for most
   of the 26s loop. Forcing LTR flow puts the duplicate where the animation
   expects it. Delete this one rule to restore the previous behaviour. */
body:not(.nx-int) .marquee{direction:ltr}

/* =====================================================================
   5. HOLOGRAPHIC SHEEN — product / release artwork on hover
   ===================================================================== */
body:not(.nx-int) .rf-cover,
body:not(.nx-int) .prod-img{position:relative}
body:not(.nx-int) .rf-cover::after,
body:not(.nx-int) .prod-img::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,
    transparent 30%,
    color-mix(in srgb, var(--nxb-accent) 32%, transparent) 46%,
    color-mix(in srgb, var(--nxb-accent-2) 24%, transparent) 55%,
    transparent 70%);
  mix-blend-mode:screen;
  opacity:0;
  transform:translateX(-16%);
  transition:opacity .45s var(--nxb-ease), transform .9s var(--nxb-ease);
}
body:not(.nx-int) .rf-cover:hover::after,
body:not(.nx-int) .prod:hover .prod-img::after{opacity:1;transform:translateX(0)}

/* =====================================================================
   6. LOGO MARK — logo-mark.svg replaces the wordmark dot in both headers.
   Higher specificity + !important so it wins over the earlier
   brand-identity mu-plugin, which paints an inline equaliser glyph here.
   ===================================================================== */
body:not(.nx-int) .site-head .wm .dot{
  width:20px !important;
  height:20px !important;
  border-radius:0 !important;
  background:url("logo-mark.svg") no-repeat 50% 50% / contain !important;
  filter:drop-shadow(0 0 8px color-mix(in srgb, var(--nxb-accent) 55%, transparent));
}
body.nx-int .int-head .int-wm .int-dot{
  width:18px !important;
  height:18px !important;
  border-radius:0 !important;
  background:url("logo-mark.svg") no-repeat 50% 50% / contain !important;
  box-shadow:none !important;
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--nxb-accent) 55%, transparent));
}

/* =====================================================================
   7. LOGO LOCKUP — signature plate in both footers.
   .foot-lines is a flex column in both templates, so the lockup drops in
   as a trailing item without touching the footer grid/flex structure.
   ===================================================================== */
.site-foot .foot-lines::after,
body.nx-int .int-foot .foot-lines::after{
  content:"";
  display:block;
  align-self:flex-start;
  margin-top:16px;
  width:clamp(160px,20vw,224px);
  aspect-ratio:4 / 1;
  background:url("logo-lockup.svg") no-repeat left 50% / contain;
  /* the lockup ships on an opaque brand-bg plate; screen drops that plate out
     so it sits flush on surfaces that are not exactly --brand-bg */
  mix-blend-mode:screen;
  opacity:.92;
}

/* =====================================================================
   8. INTERNAL PAGES — cinematic band from the kit hero artwork.
   .nx-atmos is a fixed, pointer-events:none backdrop; ::before becomes
   its bottom-most layer. Masked top and bottom so it reads as atmosphere.
   ===================================================================== */
body.nx-int .nx-atmos::before{
  content:"";
  position:absolute;
  inset:0;
  background:url("hero-background.svg") no-repeat 50% 100% / cover;
  opacity:.26;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,transparent 30%,#000 58%,#000 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,transparent 30%,#000 58%,#000 84%,transparent 100%);
}
/* retint the header signal line to the brand accents (was acid-lime) */
body.nx-int .int-head::before{
  background:linear-gradient(90deg, var(--nxb-accent), var(--nxb-accent-2) 58%, transparent);
}

/* =====================================================================
   9. Motion / accessibility
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  body:not(.nx-int) .radio-viz::before{animation:none}
  body:not(.nx-int) .rf-cover::after,
  body:not(.nx-int) .prod-img::after{transition:none}
}