/* ============================================================
   ZilFerd — чёрно-белая графика
   1. Листья по бокам
   2. Музыкальная плашка сверху
   3. Череп (skull.png) по центру
   4. Сноска внизу
   5. Кресты, вращающиеся вокруг черепа
   ============================================================ */

:root {
  --ink:   #0b0b0b;   /* чёрный */
  --paper: #ffffff;   /* белый  */

  /* диаметр орбиты крестов = размер сцены */
  --stage: clamp(260px, 40vmin, 440px);

  /* размер одного креста */
  --cw: clamp(13px, 2.8vmin, 26px);
  --ch: calc(var(--cw) * 68 / 48);

  --orbit-time: 24s;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 3vh, 32px) 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 1. Листья по бокам ---------- */

.leaves {
  position: fixed;
  top: 0;
  height: 100%;
  width: clamp(96px, 14vw, 190px);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.leaves--left  { left: 0; }
.leaves--right { right: 0; transform: scaleX(-1); }

.vine {
  fill: none;
  stroke: var(--ink);
  stroke-width: 4;
  stroke-linecap: round;
}

/* цвет задаётся на <use> и наследуется содержимым листа */
.leaf {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 3.4;
  stroke-linejoin: round;
}
.leaf--solid { fill: var(--ink); }

/* ---------- 2. Музыкальная плашка ---------- */

.music {
  position: relative;
  z-index: 1;
  width: min(560px, 88vw);
  padding: clamp(16px, 2.4vh, 24px) clamp(18px, 3vw, 28px);
  background: var(--paper);
  border: 3px solid var(--ink);
  text-align: center;
}

.music__caption {
  margin: 0 0 clamp(8px, 1.4vh, 12px);
  font-size: clamp(13px, 1.8vmin, 16px);
  line-height: 1.5;
}

/* мини-плеер: кнопка + полоса прогресса + время */
.player {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 18px);
  text-align: left;
}

.player__btn {
  flex: 0 0 auto;
  width: clamp(40px, 6vmin, 48px);
  height: clamp(40px, 6vmin, 48px);
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.player__btn:hover,
.player__btn:focus-visible { background: var(--ink); color: var(--paper); }
.player__btn:disabled { opacity: 0.4; cursor: default; }

.player__icon { width: 42%; height: 42%; fill: currentColor; }
.player__icon--stop { display: none; }
.player__btn.is-playing .player__icon--play { display: none; }
.player__btn.is-playing .player__icon--stop { display: block; }

.player__body { flex: 1 1 auto; min-width: 0; }

.player__bar {
  height: 3px;
  background: rgba(11, 11, 11, 0.16);
  overflow: hidden;
}

.player__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ink);
}

.player__time {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* сам виджет SoundCloud уводим за экран — он только источник звука */
.player__source {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.music__credit {
  margin: clamp(8px, 1.4vh, 12px) 0 0;
  font-size: 11px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.music__credit a {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.6;
}

.music__credit a:hover { opacity: 1; text-decoration: underline; }

/* ---------- 3. Череп ---------- */

.stage {
  position: relative;
  z-index: 1;
  margin: auto 0;
  width: var(--stage);
  height: var(--stage);
  display: grid;
  place-items: center;
}

/* растровый череп: PNG с прозрачным фоном */
.skull {
  width: 70%;
  height: auto;
  display: block;
}

/* ---------- 4. Сноска внизу ---------- */

.note {
  position: relative;
  z-index: 1;
  width: min(560px, 88vw);
  padding: clamp(34px, 5vh, 46px) clamp(22px, 4vw, 44px) clamp(20px, 3vh, 30px);
  background: var(--paper);
  border: 3px solid var(--ink);
  text-align: center;
}

.note__title {
  margin: 0 0 clamp(8px, 1.6vh, 14px);
  font-size: clamp(17px, 2.6vmin, 24px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.note__text {
  margin: 0;
  font-size: clamp(13px, 1.8vmin, 16px);
  line-height: 1.55;
}

/* бабочка сидит на верхнем крае сноски */
.note__butterfly {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(76px, 11vmin, 124px);
  height: auto;
  transform: translate(-50%, -72%) rotate(-7deg);
  pointer-events: none;
  user-select: none;
}

/* ---------- 5. Вращающиеся кресты ---------- */

.ring {
  position: absolute;
  inset: 0;
  animation: orbit var(--orbit-time) linear infinite;
}

.slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--cw);
  height: var(--ch);
  margin: calc(var(--ch) / -2) 0 0 calc(var(--cw) / -2);
  transform: rotate(var(--a)) translateY(calc(var(--stage) * -0.5));
}

/* гасим наклон слота, чтобы крест оставался вертикальным */
.unspin { display: block; transform: rotate(calc(-1 * var(--a))); }

.cross {
  display: block;
  width: 100%;
  height: 100%;
  fill: var(--ink);
  /* компенсируем вращение кольца */
  animation: orbit var(--orbit-time) linear infinite reverse;
}

@keyframes orbit {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- Адаптив и доступность ---------- */

@media (max-width: 760px) {
  :root { --stage: clamp(230px, 78vmin, 350px); }
  .leaves { width: clamp(52px, 13vw, 96px); }
  /* на узком экране кресты жмём ближе, чтобы не задевали листья */
  .slot { transform: rotate(var(--a)) translateY(calc(var(--stage) * -0.5)); }
}

@media (prefers-reduced-motion: reduce) {
  .ring, .cross { animation: none; }
}