/* ─────────────────────────────────────────────
   MSW Podcast · Linkseite
   Terminal Dark, Grün, ein Herz.
   ───────────────────────────────────────────── */

:root {
  --font-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --font-body: 'Satoshi', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, monospace;

  --bg: #0c0912;
  --bg-2: #140f1d;
  --surface: rgba(255, 255, 255, 0.035);
  --surface-hover: rgba(255, 255, 255, 0.07);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);

  --text: #f6f1fa;
  --text-2: #b3a9bf;
  --text-3: #78708a;

  --green: #ff3fd1;
  --green-deep: #4fe3ff;
  --green-glow: rgba(255, 63, 209, 0.38);
  --yellow: #ffd60a;
  --red: #ff4d5e;

  --yt: #ff0033;
  --sp: #1ed760;
  --ap: #b150e2;
  --rd: #ff4500;

  --radius: 18px;
  --radius-sm: 10px;
  --max: 560px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ── Background ─────────────────────────────── */

.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.bg-grid {
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(rgba(255, 63, 209, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 63, 209, 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 20%, transparent 100%);
}

.bg-glow {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55;
}
.bg-glow-a {
  width: 520px; height: 520px; left: 50%; top: -180px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 63, 209, 0.42), transparent 70%);
  animation: breathe 9s ease-in-out infinite;
}
.bg-glow-b {
  width: 420px; height: 420px; right: -160px; bottom: -120px;
  background: radial-gradient(circle, rgba(79, 227, 255, 0.22), transparent 70%);
  animation: breathe 12s ease-in-out infinite reverse;
}
@keyframes breathe {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.5; }
  50% { transform: translateX(-50%) scale(1.12); opacity: 0.7; }
}
.bg-glow-b { animation-name: breathe-b; }
@keyframes breathe-b {
  0%, 100% { transform: scale(1); opacity: 0.45; }
  50% { transform: scale(1.15); opacity: 0.6; }
}

.bg-noise {
  position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: overlay;
  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'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0 0.6 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ── Ticker ─────────────────────────────────── */

.ticker {
  position: relative; z-index: 2;
  border-bottom: 1px solid var(--line);
  background: rgba(12, 9, 18, 0.7);
  backdrop-filter: blur(8px);
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track {
  display: inline-flex; gap: 0; white-space: nowrap;
  padding: 10px 0;
  animation: scroll 42s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.tick { padding: 0 22px; border-right: 1px solid var(--line); }
.tick.up { color: var(--green-deep); }
.tick.down { color: var(--red); }
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ── Layout ─────────────────────────────────── */

.wrap {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--max);
  margin: 0 auto;
  padding: 44px 20px 56px;
  display: flex; flex-direction: column; gap: 36px;
}

/* ── Hero ───────────────────────────────────── */

.hero { text-align: center; display: flex; flex-direction: column; align-items: center; }

.avatar-ring {
  position: relative;
  width: 168px; height: 168px;
  border-radius: 50%;
  padding: 6px;
  background:
    conic-gradient(from 210deg, var(--green), var(--green-deep), var(--green), var(--green-deep), var(--green));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 24px 60px -18px var(--green-glow);
  animation: rise 0.9s var(--ease-out) both;
}
.avatar-ring::before {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, var(--green-glow), transparent 70%);
  z-index: -1; filter: blur(12px);
}
.avatar {
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  background: #1a0f2a;
  object-fit: cover;
  padding: 0;
  transition: transform 0.6s var(--ease-out);
}
.avatar-ring:hover .avatar { transform: rotate(-6deg) scale(1.04); }

.live-dot {
  position: absolute; right: 8px; bottom: 10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--bg);
  display: grid; place-items: center;
}
.live-pulse {
  width: 14px; height: 14px; border-radius: 50%; background: var(--green-deep);
  box-shadow: 0 0 0 0 var(--green-glow);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 227, 255, 0.6); }
  100% { box-shadow: 0 0 0 12px rgba(79, 227, 255, 0); }
}

.eyebrow {
  margin: 26px 0 8px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--green);
  animation: rise 0.9s 0.08s var(--ease-out) both;
}
.prompt { color: var(--text-3); margin-right: 6px; }
.cursor { animation: blink 1.1s steps(2) infinite; color: var(--green-deep); }
@keyframes blink { to { opacity: 0; } }

.title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 12vw, 68px);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--text);
  animation: rise 0.9s 0.14s var(--ease-out) both;
}
.title-accent {
  color: var(--green);
  text-shadow: 0 0 28px var(--green-glow);
}

.tagline {
  margin: 18px 0 0;
  max-width: 400px;
  font-size: 16px;
  color: var(--text-2);
  animation: rise 0.9s 0.2s var(--ease-out) both;
}

/* Gelbe Hinweisbox, schwarz auf gelb, wie im Shop */
.banner {
  margin-top: 26px;
  width: 100%;
  background: var(--yellow);
  color: #111;
  border-radius: var(--radius-sm);
  padding: 12px 16px 11px;
  box-shadow: 0 14px 40px -16px rgba(255, 214, 10, 0.55);
  transform: rotate(-0.6deg);
  animation: rise 0.9s 0.26s var(--ease-out) both;
}
.banner-main {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.1;
}
.rockets { display: inline-block; letter-spacing: 0; }
.banner-sub {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #3a3000;
}

/* ── Links ──────────────────────────────────── */

.links { display: flex; flex-direction: column; gap: 12px; }

.link {
  --brand: var(--green);
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition:
    transform 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out),
    background 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
  animation: rise 0.8s var(--ease-out) both;
}
.link:nth-child(1) { animation-delay: 0.32s; }
.link:nth-child(2) { animation-delay: 0.38s; }
.link:nth-child(3) { animation-delay: 0.44s; }
.link:nth-child(4) { animation-delay: 0.5s; }

.link::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 60%);
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.link:hover, .link:focus-visible {
  transform: translateY(-2px);
  background: var(--surface-hover);
  border-color: color-mix(in srgb, var(--brand) 60%, var(--line-strong));
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--brand) 70%, transparent);
  outline: none;
}
.link:hover::before, .link:focus-visible::before { opacity: 1; }
.link:active { transform: translateY(0) scale(0.995); }

.link-icon {
  position: relative;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  transition: transform 0.35s var(--ease-out), background 0.35s var(--ease-out), color 0.35s var(--ease-out);
}
.link-icon svg { width: 26px; height: 26px; }
.link:hover .link-icon { transform: scale(1.06) rotate(-3deg); background: var(--brand); color: #0c0912; }
.link-apple:hover .link-icon, .link-youtube:hover .link-icon { color: #fff; }

.link-text { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.link-title { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: var(--text); }
.link-sub { font-size: 13.5px; color: var(--text-2); line-height: 1.4; }

.link-badge {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px;
  background: var(--brand); color: #fff;
  justify-self: end;
}
.link-arrow {
  position: relative;
  font-size: 20px; color: var(--text-3);
  transition: transform 0.35s var(--ease-out), color 0.35s var(--ease-out);
  justify-self: end;
}
.link:hover .link-arrow { transform: translateX(4px); color: var(--brand); }

/* Wenn ein Badge vorhanden ist, brauchen wir vier Spalten */
.link-youtube { grid-template-columns: 52px 1fr auto auto; }

.link-youtube { --brand: var(--yt); }
.link-spotify { --brand: var(--sp); }
.link-apple   { --brand: var(--ap); }
.link-reddit  { --brand: var(--rd); }

/* ── Herz ───────────────────────────────────── */

.heart {
  text-align: center;
  padding: 26px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 63, 209, 0.06), transparent);
  animation: rise 0.8s 0.6s var(--ease-out) both;
}
.heart-line { margin: 0; color: var(--text-2); font-size: 15px; }
.heart-strong { margin-top: 6px; font-weight: 700; font-size: 17px; color: var(--text); }
.heart-icon {
  display: inline-block; color: var(--red);
  animation: beat 1.6s ease-in-out infinite;
  transform-origin: center;
}
@keyframes beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.25); }
  28% { transform: scale(1); }
  42% { transform: scale(1.18); }
  56% { transform: scale(1); }
}

/* ── Footer ─────────────────────────────────── */

.foot { text-align: center; animation: rise 0.8s 0.68s var(--ease-out) both; }
.disclaimer {
  margin: 0 auto; max-width: 440px;
  font-size: 13px; color: var(--text-3); line-height: 1.55;
}
.legal {
  margin: 18px 0 0;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500; letter-spacing: 0.02em;
}
.legal a {
  color: var(--text-2);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color 0.25s, border-color 0.25s;
}
.legal a:hover { color: var(--green); border-color: var(--green); }
.sep { margin: 0 12px; color: var(--text-3); }
.colophon { margin: 14px 0 0; font-size: 12px; color: var(--text-3); }

/* ── Motion ─────────────────────────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.banner { animation-name: rise-banner; }
@keyframes rise-banner {
  from { opacity: 0; transform: translateY(14px) rotate(-0.6deg); }
  to { opacity: 1; transform: translateY(0) rotate(-0.6deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .banner { transform: rotate(-0.6deg); }
}

/* ── Responsive ─────────────────────────────── */

@media (max-width: 420px) {
  .wrap { padding: 32px 14px 44px; gap: 28px; }
  .avatar-ring { width: 144px; height: 144px; }
  .link { padding: 14px 14px; gap: 12px; grid-template-columns: 46px 1fr auto; }
  .link-youtube { grid-template-columns: 46px 1fr auto; }
  .link-badge { display: none; }
  .link-icon { width: 46px; height: 46px; border-radius: 12px; }
  .link-icon svg { width: 23px; height: 23px; }
  .link-title { font-size: 16px; }
  .link-sub { font-size: 13px; }
  .banner-main { font-size: 19px; }
}

@media (min-width: 900px) {
  .wrap { padding-top: 64px; }
}