/* ═══════════════════════════════════════════════════════════════════════
   components.css — Boot, Buttons, Kanäle, Player, Filter, Karten, Toast
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Einblendung beim Scrollen ────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* ── Boot-Sequenz ─────────────────────────────────────────────────────── */

/* Zeitplan: bei 2400 ms fällt der Vorhang, die Seite kommt gleichzeitig
   hoch. Beides steckt in CSS, damit die Seite auch sichtbar wird, wenn
   app.js gar nicht lädt. FADE_AT in app.js muss zu diesen 2400 ms passen. */

.boot { display: none; }

html.is-booting .boot {
  position: fixed; inset: 0; z-index: 100;
  display: grid;
  place-items: center;
  background: var(--void);
  animation: boot-out 400ms var(--ease) 2400ms forwards;
}
html.is-booting .shell { animation: boot-in 760ms var(--ease) 2400ms backwards; }
html.is-booting .rain  { animation: boot-in 1400ms var(--ease) 2300ms backwards; }

/* Überspringen: Verzögerung auf null, beide Animationen starten sofort neu. */
html.is-skipping .boot,
html.is-skipping .shell,
html.is-skipping .rain { animation-delay: 0ms; }

@keyframes boot-out { to { opacity: 0; visibility: hidden; } }
@keyframes boot-in  { from { opacity: 0; } }

.boot__inner {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  width: min(88vw, 26rem);
}

.boot__log {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--code);
  text-shadow: 0 0 12px rgba(53, 240, 122, 0.45);
  white-space: pre-wrap;
}

.boot__caret {
  width: 0.52em; height: 1.05em;
  margin-bottom: 0.3em;
  background: var(--code);
  box-shadow: 0 0 12px rgba(53, 240, 122, 0.6);
  animation: caret 900ms steps(1) infinite;
}
@keyframes caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

.boot__skip {
  position: absolute;
  bottom: max(1.6rem, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%);
  padding: 0.5rem 1rem;
  background: none; border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--dimmer);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.boot__skip:hover { color: var(--code); border-color: var(--line-lit); }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 46px;
  padding: 0 0.9rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  cursor: pointer;
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  transition: border-color var(--t-fast), color var(--t-fast),
              background var(--t-fast), transform var(--t-fast);
}
.btn:hover { border-color: var(--line-lit); color: var(--code); background: var(--panel-lit); }
.btn:active { transform: scale(0.975); }

.ico-s { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico-s { width: 15px; height: 15px; }

/* ── Kanäle ───────────────────────────────────────────────────────────── */

.socials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: 0.4rem;
}
.socials a {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--dim);
  transition: color var(--t-fast), border-color var(--t-fast),
              transform var(--t) var(--ease), box-shadow var(--t-fast);
}
.socials svg { width: 19px; height: 19px; fill: currentColor; }
.socials .ico-s { fill: none; }
.socials a:hover {
  color: var(--code);
  border-color: var(--line-lit);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px -8px rgba(53, 240, 122, 0.5);
}

/* ── Spotify ──────────────────────────────────────────────────────────── */

.player {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  background: var(--void-2);
}
.player iframe { display: block; border: 0; }

/* ── Filter ───────────────────────────────────────────────────────────── */

.filters {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.55rem;
}
.chip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0 0.7rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--dim);
  cursor: pointer;
  transition: color var(--t-fast), border-color var(--t-fast),
              background var(--t-fast);
}
.chip i {
  font-style: normal;
  font-size: 0.58rem;
  color: var(--dimmer);
  transition: color var(--t-fast);
}
.chip:hover { color: var(--text); border-color: var(--line-lit); }
.chip.is-on {
  color: var(--code);
  background: rgba(53, 240, 122, 0.11);
  border-color: rgba(53, 240, 122, 0.55);
  font-weight: 600;
  box-shadow: inset 0 0 18px -8px rgba(53, 240, 122, 0.8);
}
.chip.is-on i { color: var(--code-2); }

.count {
  margin-bottom: 0.75rem;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dimmer);
}

/* ── Karten ───────────────────────────────────────────────────────────── */

.cards { display: grid; gap: 0.6rem; }

.card { position: relative; }
.card[hidden] { display: none; }

.card__body {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr 14px;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 0.85rem 0.65rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--panel);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  overflow: hidden;
  transition: border-color var(--t), background var(--t),
              box-shadow var(--t), transform var(--t) var(--ease);
}

/* Der Lichtstreifen, der beim Berühren einmal quer über die Karte läuft. */
.card__body::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(104deg,
    transparent 38%,
    rgba(53, 240, 122, 0.1) 49%,
    rgba(216, 255, 230, 0.06) 51%,
    transparent 62%);
  transform: translateX(-102%);
  transition: transform 760ms var(--ease);
  pointer-events: none;
}
.card:hover .card__body,
.card:focus-within .card__body {
  border-color: var(--line-lit);
  background: var(--panel-lit);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -18px rgba(53, 240, 122, 0.55);
}
.card:hover .card__body::after,
.card:focus-within .card__body::after { transform: translateX(102%); }
.card:active .card__body { transform: translateY(0) scale(0.993); }

.card__hit {
  position: absolute; inset: 0;
  z-index: 2;
  border-radius: var(--r);
}

.thumb {
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(53, 240, 122, 0.14);
}
.thumb img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  filter: saturate(0.68) brightness(0.84) contrast(1.06);
  transition: filter var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.card:hover .thumb img,
.card:focus-within .thumb img { filter: none; transform: scale(1.05); }

.card__text { min-width: 0; }

.tag {
  font-size: 0.55rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--code-2);
}
.tag--gold { color: var(--gold); opacity: 0.9; }

.card__title {
  margin: 0.15rem 0 0.12rem;
  font-family: var(--f-display);
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: 0.005em;
  color: var(--text);
}

.card__sub {
  font-size: 0.68rem;
  line-height: 1.4;
  color: var(--dim);
}

/* Der Rabattcode liegt über der Klickfläche, sonst öffnet er den Shop. */
.code {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  padding: 0.24rem 0.55rem;
  background: rgba(200, 169, 106, 0.09);
  border: 1px dashed rgba(200, 169, 106, 0.45);
  border-radius: 6px;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold-lit);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.code::after {
  content: '⧉';
  font-size: 0.72rem;
  opacity: 0.65;
}
.code:hover { background: rgba(200, 169, 106, 0.2); border-style: solid; }
.code.is-done { color: var(--code); border-color: var(--line-lit); background: rgba(53, 240, 122, 0.12); }
.code.is-done::after { content: '✓'; opacity: 1; }

.arrow {
  justify-self: end;
  width: 8px; height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  color: var(--dimmer);
  transition: color var(--t-fast), transform var(--t) var(--ease);
}
.card:hover .arrow,
.card:focus-within .arrow { color: var(--code); transform: rotate(45deg) translate(2px, -2px); }

/* Nach einem Filterwechsel kommen die sichtbaren Karten gestaffelt zurück. */
.cards.is-filtering .card:not([hidden]) {
  animation: card-in 460ms var(--ease) backwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
}

/* ── Toast ────────────────────────────────────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: max(1.4rem, env(safe-area-inset-bottom));
  z-index: 80;
  transform: translate(-50%, 150%);
  padding: 0.6rem 1.1rem;
  background: var(--code);
  color: var(--void);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  box-shadow: 0 10px 34px -10px rgba(53, 240, 122, 0.75);
  opacity: 0;
  pointer-events: none;
  transition: transform 420ms var(--ease), opacity 420ms var(--ease);
}
.toast.is-up { transform: translate(-50%, 0); opacity: 1; }

/* ── Glitch beim Antippen der Wortmarke ───────────────────────────────── */

.wordmark.is-glitching { animation: glitch 420ms steps(2) 2; }
@keyframes glitch {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2px, 1px) skewX(-2deg); }
  50%  { transform: translate(2px, -1px) skewX(2deg); }
  75%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}