/* =====================================================================
   PALATIN PROJECT – FX (Header, Navigation, Bilder, Portrait, Musik)
   Einbinden: Template > Erweitert > user.css   (oder <link> im Template)
   ===================================================================== */
:root{
  --pp-cyan:#7fe3ff;
  --pp-blue:#2f8cff;
  --pp-pink:#ff5fd2;
  --pp-green:#5dffb0;
  --pp-ink:#05070f;
  --pp-panel:rgba(14,22,44,.72);
  --pp-line:rgba(127,227,255,.22);
  --pp-text:#dbe9ff;
  --pp-muted:#8aa0c4;
}

/* ---------- 1. HEADER-LOGO ------------------------------------------- */
.pp-logo{position:relative;display:inline-block;line-height:0;isolation:isolate;max-width:100%}
.pp-logo > img{position:relative;z-index:2;display:block;max-width:100%;height:auto;
  animation:pp-breathe 7s ease-in-out infinite}
.pp-logo canvas.pp-waves{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;mix-blend-mode:screen}
/* Lichtstreifen, der über Schrift + Emblem läuft (maskiert auf das Logo) */
.pp-logo .pp-shine{position:absolute;inset:0;z-index:4;pointer-events:none;
  -webkit-mask:var(--pp-logo-src) center/100% 100% no-repeat;mask:var(--pp-logo-src) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.95) 49%,rgba(160,230,255,.9) 51%,transparent 60%) no-repeat;
  background-size:45% 100%;background-position:-60% 0;mix-blend-mode:screen;
  animation:pp-shine 9s cubic-bezier(.6,0,.3,1) infinite 1.5s}
/* Emblem (Einhorn) – pulsierender Neon-Halo */
.pp-logo .pp-emblem{position:absolute;z-index:1;left:10%;top:10%;width:13%;height:52%;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(127,227,255,.55),rgba(47,140,255,.18) 55%,transparent);
  filter:blur(6px);animation:pp-pulse 3.2s ease-in-out infinite}
/* senkrechte Linie – Lichtimpuls läuft herunter */
.pp-logo .pp-beam{position:absolute;z-index:4;left:23.85%;top:1.5%;width:3px;height:69%;pointer-events:none;overflow:hidden;border-radius:2px}
.pp-logo .pp-beam::before{content:"";position:absolute;left:0;right:0;height:28%;top:-30%;
  background:linear-gradient(transparent,#fff 45%,var(--pp-cyan) 60%,transparent);
  box-shadow:0 0 10px var(--pp-cyan),0 0 22px var(--pp-blue);animation:pp-beam 4.5s ease-in infinite}
/* Slogan „ELECTRONIC MUSIC FROM OUTER SPACE“ – Neon-Flackern */
.pp-logo .pp-tag{position:absolute;inset:0;z-index:4;pointer-events:none;
  -webkit-mask:var(--pp-logo-src) center/100% 100% no-repeat;mask:var(--pp-logo-src) center/100% 100% no-repeat;
  clip-path:inset(45.5% 0 42% 56.5%);background:var(--pp-cyan);
  filter:drop-shadow(0 0 4px var(--pp-cyan)) drop-shadow(0 0 10px var(--pp-blue));
  opacity:0;animation:pp-flicker 6s steps(1) infinite}

@keyframes pp-breathe{50%{filter:brightness(1.12) drop-shadow(0 0 6px rgba(127,227,255,.35))}}
@keyframes pp-shine{0%{background-position:-60% 0}55%,100%{background-position:160% 0}}
@keyframes pp-pulse{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}}
@keyframes pp-beam{0%{top:-30%}60%,100%{top:110%}}
@keyframes pp-flicker{0%{opacity:.55}3%{opacity:.1}5%{opacity:.7}8%{opacity:.35}10%,62%{opacity:.6}63%{opacity:.05}64%{opacity:.75}66%,100%{opacity:.5}}

/* ---------- 1b. HEADER-HINTERGRÜNDE – langsamer Kamera-Flug ---------- */
.pp-kb-clip{overflow:hidden}
img.pp-kb-on{transform-origin:50% 50%;will-change:transform,filter;
  translate:var(--pp-px,0) var(--pp-py,0);transition:translate 1.2s cubic-bezier(.2,.8,.2,1);
  animation:pp-kb var(--pp-kd,28s) ease-in-out var(--pp-kdelay,0s) infinite alternate,
            pp-nebula 11s ease-in-out infinite alternate}
@keyframes pp-kb{
  0%{transform:scale(1.08) translate(0,0)}
  100%{transform:scale(1.22) translate(var(--pp-kx,-3%),var(--pp-ky,-2%))}
}
@keyframes pp-nebula{0%{filter:brightness(.95) saturate(1)}50%{filter:brightness(1.08) saturate(1.2) hue-rotate(-8deg)}100%{filter:brightness(1) saturate(1.1) hue-rotate(8deg)}}

/* ---------- 2. NAVIGATION – Glow erscheint bei Mouseover -------------
   Joomla: Menü-Modul > Erweitert > Modulklasse:  pp-nav
   Fallback greift auf alle Menüpunkte mit Icon-Bild in .mod-menu        */
.pp-nav a, .mod-menu a:has(> img){
  position:relative;transition:color .35s, text-shadow .35s, transform .35s;
  text-shadow:0 0 0 transparent;
}
.pp-nav a img, .mod-menu a:has(> img) img{
  transition:filter .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
  /* Ruhezustand: kein Glow (unsichtbare Schatten, damit der Übergang weich einblendet) */
  filter:brightness(1) drop-shadow(0 0 0 rgba(255,255,255,0)) drop-shadow(0 0 0 rgba(127,227,255,0)) drop-shadow(0 0 0 rgba(47,140,255,0));
}
.pp-nav a:hover, .pp-nav a:focus-visible, .mod-menu a:has(> img):hover, .mod-menu a:has(> img):focus-visible{
  color:#fff;transform:translateY(-2px);
  text-shadow:0 0 2px #fff,0 0 8px var(--pp-cyan),0 0 18px var(--pp-cyan),0 0 34px var(--pp-blue),0 0 60px var(--pp-blue);
}
.pp-nav a:hover img, .pp-nav a:focus-visible img, .mod-menu a:has(> img):hover img, .mod-menu a:has(> img):focus-visible img{
  transform:scale(1.1);
  filter:brightness(1.6) drop-shadow(0 0 4px rgba(255,255,255,.95)) drop-shadow(0 0 14px var(--pp-cyan)) drop-shadow(0 0 30px var(--pp-blue));
}

/* Menübild ohne ...1.png-Variante: im Ruhezustand abdunkeln */
.pp-nav a.pp-dim:not(:hover):not(:focus-visible) img, .mod-menu a.pp-dim:not(:hover):not(:focus-visible) img{filter:brightness(.72) saturate(.75)}

/* LED in den Menübildern (wird per JS an das grüne Quadrat gesetzt) */
.pp-navimg{position:relative;display:inline-block;line-height:0}
.pp-led{z-index:2;position:absolute;border-radius:1px;pointer-events:none;background:#d6ff3a;
  box-shadow:0 0 4px #c8ff3a,0 0 10px #9dff2a,0 0 18px rgba(157,255,42,.6);opacity:0;transition:opacity .3s}
a:hover .pp-led,a:focus-visible .pp-led{opacity:1;animation:pp-ledfast .35s steps(1) infinite}
.active > a .pp-led,a[aria-current="page"] .pp-led{opacity:1;animation:pp-ledon 1.6s ease-in-out infinite}
@keyframes pp-ledfast{0%{opacity:1}50%{opacity:.15}}
@keyframes pp-ledon{0%,100%{opacity:.75}50%{opacity:1;filter:brightness(1.4)}}

/* ---------- 3. INHALTSBILDER – Hover (alle *_sqr210-Bilder) ----------- */
.pp-hover{position:relative;display:inline-block;line-height:0;border-radius:10px;
  transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.8,.2,1);will-change:transform}
.pp-hover > img{display:block;max-width:100%;height:auto;border-radius:10px;transition:filter .4s}
.pp-hover::before{content:"";position:absolute;inset:-2px;border-radius:12px;z-index:-1;opacity:0;
  background:conic-gradient(from var(--pp-a,0deg),var(--pp-cyan),var(--pp-blue),var(--pp-pink),var(--pp-green),var(--pp-cyan));
  filter:blur(10px);transition:opacity .4s;animation:pp-spin 4s linear infinite}
.pp-hover::after{content:"";position:absolute;inset:0;border-radius:10px;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--pp-mx,50%) var(--pp-my,50%),rgba(255,255,255,.35),transparent 45%),
             repeating-linear-gradient(0deg,rgba(127,227,255,.08) 0 2px,transparent 2px 4px);
  mix-blend-mode:screen;transition:opacity .3s}
.pp-hover:hover::before,.pp-hover:hover::after{opacity:1}
.pp-hover:hover > img{filter:brightness(1.12) saturate(1.25) contrast(1.05)}
@property --pp-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes pp-spin{to{--pp-a:360deg}}
/* ohne JS: einfacher Glow direkt am Bild */
img[src*="_sqr210"]:not(.pp-hover > img){transition:transform .4s,filter .4s}
img[src*="_sqr210"]:not(.pp-hover > img):hover{transform:scale(1.05);
  filter:brightness(1.12) drop-shadow(0 0 10px var(--pp-cyan)) drop-shadow(0 0 24px var(--pp-blue))}

/* ---------- 4. PORTRAIT – Hologramm ----------------------------------- */
.pp-holo{position:relative;display:inline-block;line-height:0;overflow:hidden;border-radius:6px;
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.pp-holo > img{display:block;position:relative;z-index:1;max-width:100%;height:auto}
.pp-holo .pp-holo-r,.pp-holo .pp-holo-b{position:absolute;inset:0;z-index:2;background:var(--pp-src) center/100% 100%;
  mix-blend-mode:screen;opacity:0;transition:opacity .4s,transform .4s;pointer-events:none}
.pp-holo .pp-holo-r{filter:sepia(1) saturate(6) hue-rotate(-50deg) brightness(.7)}
.pp-holo .pp-holo-b{filter:sepia(1) saturate(6) hue-rotate(160deg) brightness(.7)}
.pp-holo .pp-holo-scan{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);opacity:.35;mix-blend-mode:multiply}
.pp-holo .pp-holo-sweep{position:absolute;left:0;right:0;height:22%;top:-25%;z-index:4;pointer-events:none;
  background:linear-gradient(transparent,rgba(127,227,255,.22) 45%,rgba(220,250,255,.55) 50%,rgba(127,227,255,.22) 55%,transparent);
  mix-blend-mode:screen;animation:pp-sweep 5.5s ease-in-out infinite}
.pp-holo .pp-holo-glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 45% 50% at 50% 38%,rgba(47,140,255,.9),transparent 70%);
  mix-blend-mode:screen;animation:pp-hologlow 4s ease-in-out infinite}
.pp-holo:hover .pp-holo-r{opacity:.55;transform:translate(-5px,0)}
.pp-holo:hover .pp-holo-b{opacity:.55;transform:translate(5px,0)}
.pp-holo:hover > img{animation:pp-glitch 2.4s steps(1) infinite}
@keyframes pp-sweep{0%{top:-25%}70%,100%{top:105%}}
@keyframes pp-hologlow{0%,100%{opacity:.25}50%{opacity:.6}}
@keyframes pp-glitch{0%,100%{clip-path:none;transform:none}
  12%{clip-path:inset(18% 0 62% 0);transform:translateX(-6px)}13%{clip-path:none;transform:none}
  57%{clip-path:inset(64% 0 22% 0);transform:translateX(5px)}58%{clip-path:none;transform:none}}

/* ---------- 5. MUSIK -------------------------------------------------- */
.pp-music{--r:14px;color:var(--pp-text);font-family:"Exo 2",system-ui,sans-serif;display:grid;gap:28px}
.pp-music *{box-sizing:border-box}
.pp-music h2,.pp-music h3{font-family:"Saira Condensed","Exo 2",sans-serif;letter-spacing:.08em;text-transform:uppercase;margin:0;font-weight:500}
.pp-player{display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:24px;align-items:center;padding:22px;border-radius:var(--r);
  background:linear-gradient(140deg,rgba(47,140,255,.16),rgba(255,95,210,.06) 60%,rgba(93,255,176,.06)),var(--pp-panel);
  border:1px solid var(--pp-line);box-shadow:0 0 40px rgba(47,140,255,.15) inset,0 20px 50px rgba(0,0,0,.45)}
.pp-disc{position:relative;aspect-ratio:1;max-width:100%;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 2px rgba(127,227,255,.35),0 0 30px rgba(47,140,255,.45)}
.pp-disc img{width:100%;height:100%;object-fit:cover;display:block}
.pp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,var(--pp-ink) 0 7%,rgba(255,255,255,.12) 7.5% 8.5%,transparent 9%),
             repeating-radial-gradient(circle,rgba(0,0,0,.18) 0 1px,transparent 1px 4px)}
.pp-player.is-playing .pp-disc{animation:pp-rot 9s linear infinite}
@keyframes pp-rot{to{transform:rotate(360deg)}}
.pp-now{min-width:0;display:grid;gap:10px}
.pp-now .pp-kicker{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--pp-cyan)}
.pp-now h3{font-size:clamp(1.4rem,3vw,2.1rem);color:#fff;text-shadow:0 0 14px rgba(127,227,255,.6)}
.pp-viz{width:100%;height:84px;display:block}
.pp-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pp-btn{appearance:none;border:1px solid rgba(127,227,255,.5);background:rgba(47,140,255,.15);color:#fff;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.25s;
  box-shadow:0 0 14px rgba(47,140,255,.35)}
.pp-btn:hover,.pp-btn:focus-visible{background:rgba(47,140,255,.35);box-shadow:0 0 22px var(--pp-cyan);outline:none}
.pp-btn.sm{width:38px;height:38px}
.pp-btn svg{width:46%;height:46%;fill:currentColor}
.pp-progress{flex:1;min-width:120px;height:6px;border-radius:3px;background:rgba(127,227,255,.15);cursor:pointer;position:relative}
.pp-progress i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--pp-blue),var(--pp-cyan));box-shadow:0 0 10px var(--pp-cyan)}
.pp-time{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--pp-muted);min-width:84px;text-align:right}
.pp-tracks{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:t}
.pp-tracks li{counter-increment:t;display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .2s}
.pp-tracks li::before{content:counter(t,decimal-leading-zero);font-variant-numeric:tabular-nums;color:var(--pp-muted);font-size:.8rem}
.pp-tracks li:hover,.pp-tracks li:focus-visible{background:rgba(47,140,255,.12);outline:none}
.pp-tracks li.is-active{background:rgba(47,140,255,.2);color:#fff;text-shadow:0 0 8px var(--pp-cyan)}
.pp-tracks li small{color:var(--pp-muted)}
.pp-filter{display:flex;gap:8px;flex-wrap:wrap}
.pp-chip{appearance:none;border:1px solid var(--pp-line);background:transparent;color:var(--pp-text);padding:7px 14px;border-radius:999px;
  font:inherit;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.25s}
.pp-chip[aria-pressed="true"],.pp-chip:hover{border-color:var(--pp-cyan);color:#fff;box-shadow:0 0 12px rgba(127,227,255,.45);background:rgba(47,140,255,.18)}
.pp-albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.pp-album{perspective:900px;cursor:pointer}
.pp-album-in{position:relative;aspect-ratio:1;transition:transform .7s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.pp-album.is-flipped .pp-album-in{transform:rotateY(180deg)}
.pp-face{position:absolute;inset:0;border-radius:10px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--pp-line);background:#0b1430}
.pp-face img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s,filter .6s}
.pp-album:hover .pp-face img{transform:scale(1.07);filter:brightness(1.1) saturate(1.2)}
.pp-album:hover .pp-face{box-shadow:0 0 22px rgba(127,227,255,.45)}
.pp-face .pp-ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;padding:12px;
  font-family:"Saira Condensed",sans-serif;font-size:1.3rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 12px var(--pp-cyan)}
.pp-badge{position:absolute;top:8px;left:8px;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:999px;
  background:rgba(5,7,15,.75);border:1px solid currentColor;backdrop-filter:blur(4px)}
.pp-face .pp-badge{opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s}
.pp-album:hover .pp-badge,.pp-album:focus-visible .pp-badge{opacity:1;transform:none}
.pp-badge.rel{color:var(--pp-green)} .pp-badge.wip{color:var(--pp-pink)} .pp-badge.arc{color:var(--pp-muted)}
.pp-back{transform:rotateY(180deg);padding:14px;display:flex;flex-direction:column;gap:6px;font-size:.82rem;line-height:1.45;
  background:linear-gradient(160deg,rgba(47,140,255,.3),rgba(5,7,15,.95))}
.pp-back b{font-family:"Saira Condensed",sans-serif;font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;font-weight:500}
.pp-back span{color:var(--pp-muted)}
.pp-cap{display:flex;justify-content:space-between;gap:8px;padding:8px 2px 0;font-size:.85rem}
.pp-cap b{font-weight:500;color:#fff} .pp-cap span{color:var(--pp-muted);font-variant-numeric:tabular-nums}
@media (max-width:620px){.pp-player{grid-template-columns:1fr}.pp-disc{max-width:200px;margin:0 auto}}

/* ---------- Bewegung reduzieren -------------------------------------- */
@media (prefers-reduced-motion:reduce){
  img.pp-kb-on, .pp-led, .pp-logo *, .pp-logo > img, .pp-holo *, .pp-hover::before, .pp-nav a, .mod-menu a, .pp-disc{animation:none!important}
}

/* Hochformat-Cover (Kassetten): ganz zeigen, Hintergrund unscharf aus dem Cover */
.pp-face.pp-tall{background:var(--pp-cover) center/cover}
.pp-face.pp-tall::before{content:"";position:absolute;inset:0;backdrop-filter:blur(14px) brightness(.45);-webkit-backdrop-filter:blur(14px) brightness(.45)}
.pp-face.pp-tall img{position:relative;object-fit:contain}

/* Platzhalter-Cover, falls ein Bild fehlt */
.pp-album:nth-child(4n+1) .pp-ph{background:radial-gradient(circle at 30% 30%,#2f8cff,#0b1430 70%)}
.pp-album:nth-child(4n+2) .pp-ph{background:radial-gradient(circle at 70% 40%,#ff5fd2,#140b30 70%)}
.pp-album:nth-child(4n+3) .pp-ph{background:radial-gradient(circle at 40% 70%,#24c98a,#071a24 70%)}
.pp-album:nth-child(4n+4) .pp-ph{background:conic-gradient(from 200deg at 50% 60%,#0b1430,#2f8cff,#7fe3ff,#0b1430)}