/* ============================================================
   RMN ELEVATION LAYER  (rmn-3-227)
   ============================================================
   Additiv. Wird NACH main.css geladen. Aendert kein Layout und
   kein Markup — nur Atmosphaere, Motion, Mikro-Interaktionen,
   Division-Handschrift und Typo-Feinschliff.

   A  Signature-Hero + Atmosphaere
   B  Division-Art-Direction (Records/Labs/Studio/Broadcast/Publishing)
   C  Micro-Interaction-Craft (site-wide)
   D  Typo-Feinschliff (site-wide)

   Alle Bewegungen sind in (prefers-reduced-motion: no-preference)
   gekapselt. Nutzt ausschliesslich bestehende Tokens.
   ============================================================ */

/* ============================================================
   A — ATMOSPHERE
   ============================================================ */

/* Film-Grain: fixe, nicht-interaktive Schicht ueber der ganzen Seite.
   Sehr dezent (Premium, nicht Gamer). */
html::after{
  content:"";
  position:fixed; inset:0;
  z-index:9999; pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:160px 160px;
  mix-blend-mode:overlay;
}
@media (prefers-reduced-motion: reduce){ html::after{ opacity:.025; } }

/* Orange Light-Bloom hinter dem Homepage-Hero — ein einziger, ruhiger
   Lichtpunkt statt flaechigem Verlauf. Inhalt bleibt darueber. */
.hero{ position:relative; isolation:isolate; }
.hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-12%; left:50%;
  width:min(960px, 120%); aspect-ratio:1.6/1;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,
              color-mix(in oklab, var(--orange) 26%, transparent) 0%,
              transparent 62%);
  filter:blur(36px);
  pointer-events:none;
}
.hero > .wrap{ position:relative; z-index:1; }

/* Hero-Punkt: leichtes Glimmen (statisch bei reduced-motion). */
.hero-title-dot{ color:var(--orange); }
@media (prefers-reduced-motion: no-preference){
  .hero-title-dot{
    text-shadow:0 0 0 transparent;
    animation:rmnDotGlow 4.5s ease-in-out infinite;
  }
  @keyframes rmnDotGlow{
    0%,100%{ text-shadow:0 0 14px color-mix(in oklab, var(--orange) 35%, transparent); }
    50%    { text-shadow:0 0 26px color-mix(in oklab, var(--orange) 60%, transparent); }
  }
}

/* ============================================================
   C — MICRO-INTERACTION CRAFT  (vor B, da site-wide Basis)
   ============================================================ */

/* Buttons: Icon zieht beim Hover leicht in Pfeilrichtung; Primary
   bekommt einen weichen Orange-Schein. Ergaenzt die bestehende
   translateY(-1px)-Anhebung, ohne sie zu ueberschreiben. */
.btn-icon{ transition:transform .25s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: no-preference){
  .btn:hover .btn-icon{ transform:translateX(3px); }
}
.btn--primary{ transition:background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .25s ease; }
.btn--primary:hover{
  box-shadow:0 6px 22px -8px color-mix(in oklab, var(--orange) 70%, transparent);
}

/* Inhaltslinks: animierter Underline-Draw in Orange (nur in Lese-Kontexten,
   nicht in Nav/Buttons/Listen-Strukturen). */
.entry-vertical-lead a,
.page-lead a,
.foot-col a{
  background-image:linear-gradient(var(--orange), var(--orange));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1.5px;
  transition:background-size .3s cubic-bezier(.2,.7,.2,1), color .2s ease;
  padding-bottom:1px;
}
.entry-vertical-lead a:hover,
.page-lead a:hover,
.foot-col a:hover{ background-size:100% 1.5px; color:var(--fg); }

/* entry-vertical-Cards: linke Akzentkante waechst beim Hover, Nummer
   wird orange. Subtil, kein Layout-Shift (Kante via box-shadow inset). */
.entry-vertical{
  transition:box-shadow .3s ease;
  box-shadow:inset 0 0 0 0 var(--orange);
}
@media (prefers-reduced-motion: no-preference){
  .entry-vertical{ padding-left:0; transition:box-shadow .3s ease, padding-left .3s ease; }
  .entry-vertical:hover{ box-shadow:inset 2px 0 0 0 var(--orange); padding-left:18px; }
}
.entry-vertical:hover .entry-vertical-num{ color:var(--orange); }
.entry-vertical-num{ transition:color .25s ease; }

/* ============================================================
   D — TYPOGRAPHIC FINISH  (site-wide)
   ============================================================ */

/* Mono-Labels & Ziffern: Tabular + geschnittene Null, ruhigeres Bild. */
.mono,
.entry-vertical-num,
.hero-kicker,
.kicker{
  font-feature-settings:"tnum" 1, "zero" 1, "calt" 1;
  font-variant-numeric:tabular-nums slashed-zero;
}

/* Grosse Display-Typo optisch enger setzen (matcht --tr-display). */
.hero-title,
.page-title,
.sec-title{ letter-spacing:-0.02em; }

/* Headlines & Leads ausbalancieren (verhindert haengende Einzelwoerter). */
.page-title,
.hero-title,
.entry-vertical-title,
.sec-title{ text-wrap:balance; }
.page-lead,
.hero-strapline,
.entry-vertical-lead{ text-wrap:pretty; }

/* ============================================================
   B — DIVISION ART-DIRECTION
   ============================================================
   Jede Division bekommt eine eigene, dezente Handschrift.
   Scope: Homepage-Sektion (#id) UND Detail-Seiten (body.page-*).
   Rein dekorativ, position-sicher, geringe Deckkraft. */

/* RECORDS — Label: feines Spektrum-/Equalizer-Band ueber der Sektion. */
#records, .sec--records,
body.page-records-artist .page-hero,
body.page-records-release .page-hero{ position:relative; }
#records::before,
.sec--records::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,
     transparent 0%,
     color-mix(in oklab, var(--orange) 70%, transparent) 18%,
     var(--orange) 38%,
     color-mix(in oklab, var(--orange) 70%, transparent) 58%,
     transparent 100%);
  opacity:.55; pointer-events:none;
}

/* LABS — App/AI: feines technisches Raster im Sektionshintergrund. */
#labs,
body.page-labs-detail .page-hero{ position:relative; }
#labs::before,
body.page-labs-detail .page-hero::before{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
          mask-image:radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  opacity:.5;
}
#labs > *{ position:relative; z-index:1; }

/* STUDIO — Design/Editorial: kurze, kraeftige Akzentregel als Signatur. */
#studio,
body.page-studio .page-hero{ position:relative; }
#studio::before,
body.page-studio .page-hero::before{
  content:"";
  position:absolute; top:0; left:0; width:56px; height:4px;
  background:var(--orange); pointer-events:none;
}

/* BROADCAST — Now-Playing: bewegtes Waveform-Band (statisch bei reduced-motion). */
#broadcast,
body.page-broadcast-detail .page-hero{ position:relative; }
#broadcast::before,
body.page-broadcast-detail .page-hero::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:3px; pointer-events:none;
  background:repeating-linear-gradient(90deg,
     var(--orange) 0 3px, transparent 3px 9px);
  opacity:.5;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
@media (prefers-reduced-motion: no-preference){
  #broadcast::before,
  body.page-broadcast-detail .page-hero::before{
    animation:rmnWave 1.6s linear infinite;
    background-size:200% 100%;
  }
  @keyframes rmnWave{ from{ background-position:0 0; } to{ background-position:24px 0; } }
}

/* PUBLISHING — Verlag/Editorial: erste Lead-Zeile ruhiger, linke Lesekante. */
#publishing,
body.page-publishing-detail .page-hero,
body.page-publishing-author .page-hero{ position:relative; }
#publishing::before{
  content:"";
  position:absolute; top:0; left:0; width:2px; height:64px;
  background:linear-gradient(var(--orange), transparent);
  pointer-events:none;
}
body.page-publishing-detail .entry-vertical-lead:first-of-type,
body.page-publishing-detail .page-lead{ max-width:62ch; }