/* ρῳíղ */

:root {
  --bg: #0a0a0c;
  --cream: #f5e8cf;
  --amber: #e6c070;
  --muted: #8a8073;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          "Noto Sans", "DejaVu Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font);
  overflow: hidden;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}

/* ── кликабельный слой ─────────────────────────────── */

.hit {
  position: fixed;
  inset: 0;
  z-index: 1;
}

.hit:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -8px;
}

/* ── фон: переливающиеся пятна ────────────────────── */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 40%, #100d09 0%, #08080a 55%, #050506 100%);
  animation: tint 46s ease-in-out infinite alternate;
}

@keyframes tint {
  from { filter: hue-rotate(0deg) saturate(1); }
  to   { filter: hue-rotate(-28deg) saturate(1.2); }
}

.bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(110% 80% at 50% 45%, transparent 25%, rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, .88) 100%);
}

/* медленный разворот цветовых пятен */
.swirl {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150vmax;
  height: 150vmax;
  margin: -75vmax 0 0 -75vmax;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #201606, #05242e, #240b13, #14210c, #201606);
  filter: blur(110px);
  opacity: .3;
  animation: swirl 84s linear infinite;
}

@keyframes swirl { to { rotate: 360deg; } }

.blob {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .5;
  transition: opacity .8s ease;
}

body:hover .blob { opacity: .66; }

.b1 {
  width: 58vmax; height: 58vmax;
  left: -16vmax; top: -20vmax;
  background: #4e3410;
  animation: drift1 28s ease-in-out infinite alternate;
}

.b2 {
  width: 54vmax; height: 54vmax;
  right: -20vmax; top: 14vmax;
  background: #0b2a36;
  animation: drift2 34s ease-in-out infinite alternate;
}

.b3 {
  width: 50vmax; height: 50vmax;
  left: 18vmax; bottom: -24vmax;
  background: #33111b;
  animation: drift3 40s ease-in-out infinite alternate;
}

@keyframes drift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(14vw, 10vh, 0) scale(1.25); }
}

@keyframes drift2 {
  from { transform: translate3d(0, 0, 0) scale(1.15); }
  to   { transform: translate3d(-12vw, -12vh, 0) scale(.9); }
}

@keyframes drift3 {
  from { transform: translate3d(0, 0, 0) scale(.95); }
  to   { transform: translate3d(10vw, -8vh, 0) scale(1.2); }
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-size: 180px 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage {
  position: relative;
  z-index: 2;
  pointer-events: none;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
}

/* картошки на орбите вокруг названия */
.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--h) / -2);
  scale: var(--k, 1);
  animation: spin var(--t) linear infinite;
  animation-delay: var(--d);
}

.orbit img {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--s) / var(--k, 1));
  margin-left: calc(var(--s) / var(--k, 1) / -2);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45));
  animation: bob var(--spin) ease-in-out infinite alternate,
             tumble 34s linear infinite,
             squeeze var(--sq, 7s) ease-in-out infinite;
}

/* картошки в свободном полёте */
.fly {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  margin-left: calc(var(--s) / -2);
  margin-top: calc(var(--s) / -2);
  opacity: var(--o, .5);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .4));
  animation: drift var(--dur) ease-in-out infinite alternate,
             roll var(--spin) linear infinite,
             flicker calc(var(--dur) / 2) ease-in-out infinite;
  animation-delay: var(--delay, 0s), var(--delay, 0s), var(--delay, 0s);
}

@keyframes spin     { to { rotate: 360deg; } }
@keyframes bob      { to { translate: 0px -16px; } }
@keyframes tumble   { from { rotate: var(--rot, 0deg); } to { rotate: calc(var(--rot, 0deg) + 360deg); } }
@keyframes roll     { from { rotate: var(--rot, 0deg); } to { rotate: calc(var(--rot, 0deg) + 360deg); } }

@keyframes squeeze {
  0%, 100% { scale: 1 1; }
  50%      { scale: 1.09 .91; }
}

@keyframes flicker {
  0%, 100% { opacity: calc(var(--o, .5) * .4); }
  50%      { opacity: var(--o, .5); }
}

@keyframes drift {
  from { translate: 0px 0px; }
  to   { translate: var(--dx, 20px) var(--dy, -30px); }
}

/* тёмный скрим + свечение за названием */
.glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(62vmin, 76vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(230, 192, 112, .2), transparent 68%),
    radial-gradient(circle, rgba(5, 4, 3, .85) 0%, rgba(5, 4, 3, .55) 48%, transparent 72%);
  filter: blur(12px);
  animation: pulse 7s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: .55; scale: 1; }
  50%      { opacity: 1;   scale: 1.12; }
}

/* расходящееся кольцо под названием */
.ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(46vmin, 52vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  border: 1px solid rgba(230, 192, 112, .3);
  border-radius: 50%;
  animation: ring 7s ease-out infinite;
}

@keyframes ring {
  0%   { scale: .55; opacity: 0; }
  25%  { opacity: .85; }
  100% { scale: 1.6; opacity: 0; }
}


.name {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(3.5rem, 19vmin, 13rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: .01em;
  color: var(--cream);
  text-shadow: 0 0 46px rgba(230, 192, 112, .28), 0 3px 0 rgba(0, 0, 0, .5);
  transition: color .4s ease;
}

body:hover .name { color: #fff6e2; }

.tag {
  position: relative;
  z-index: 2;
  margin: .9em 0 0;
  font-size: clamp(.62rem, 1.5vmin, .8rem);
  font-weight: 600;
  letter-spacing: .62em;
  text-indent: .62em;
  text-transform: uppercase;
  color: var(--muted);
}

.tag::before,
.tag::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: clamp(24px, 6vmin, 54px);
  height: 1px;
  margin: 0 1.2em .28em;
  background: currentColor;
  opacity: .5;
  animation: draw 6s ease-in-out infinite alternate;
}

.tag::after { animation-delay: -3s; }

@keyframes draw {
  from { width: clamp(20px, 4vmin, 40px); opacity: .25; }
  to   { width: clamp(44px, 11vmin, 104px); opacity: .8; }
}

.hint {
  position: relative;
  z-index: 2;
  margin: 2.2em 0 0;
  font-size: clamp(.72rem, 1.7vmin, .9rem);
  letter-spacing: .12em;
  color: var(--muted);
}

.hint i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: .9em;
  border-radius: 50%;
  background: var(--amber);
  animation: blink 2.4s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: .25; box-shadow: 0 0 0 0 rgba(230, 192, 112, .45); }
  50%      { opacity: 1;   box-shadow: 0 0 0 7px rgba(230, 192, 112, 0); }
}

/* на узких экранах оставляем меньше картошек, иначе они ложатся на текст */
@media (max-width: 860px) {
  .stage > span:nth-of-type(n + 7) { display: none; }
  .fly:nth-of-type(n + 7) { display: none; }
  .orbit { --k: 1.25; }
}

@media (max-width: 640px) {
  .fly { display: none; }
  .stage > span:nth-of-type(n + 4) { display: none; }
  .orbit { --k: 1.5; opacity: .85; }
  .name { font-size: clamp(3rem, 23vw, 9rem); }
  .tag { letter-spacing: .5em; text-indent: .5em; }
}

@media (prefers-reduced-motion: reduce) {
  .bg, .swirl, .blob, .orbit, .orbit img, .fly,
  .glow, .ring, .hint i, .tag::before, .tag::after { animation: none; }
  .fly { opacity: var(--o, .5); }
}