/* =========================================================
   Небывальщина — pastelina/clay themed cover page
   Original artwork, built entirely from CSS shapes — no
   images or text lifted from any existing game.
   ========================================================= */

:root {
  --clay-bg:     #241a12;
  --clay-brick:  #7a4a2e;
  --clay-brick2: #5c3620;
  --clay-mortar: #2c1a0f;
  --clay-floor:  #3c2515;
  --clay-cream:  #f2e6d2;
  --clay-red:    #c1440e;
  --clay-red-2:  #9c360b;
  --clay-skin:   #e7c9a3;
  --clay-skin-2: #d0ac7c;
  --clay-gold:   #e8a33d;
  --clay-gold-2: #c17f22;

  --font-display: 'Comfortaa', cursive;
  --font-body: 'Nunito', sans-serif;
  --font-scrawl: 'Caveat', cursive;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--clay-bg);
  color: var(--clay-cream);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0, transparent 1px),
    radial-gradient(circle at 70% 60%, #fff 0, transparent 1px),
    radial-gradient(circle at 40% 80%, #fff 0, transparent 1px);
  background-size: 6px 6px, 9px 9px, 7px 7px;
}

/* ---------- header ---------- */

.site-head {
  text-align: center;
  padding: 3.2rem 1.5rem 2rem;
}

.site-head__eyebrow {
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--clay-gold);
  opacity: 0.85;
  margin: 0 0 0.6rem;
}

.site-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.4rem, 6vw, 4rem);
  margin: 0;
  text-shadow: 0 4px 0 rgba(0,0,0,0.25);
}

.site-head__tag {
  max-width: 34rem;
  margin: 0.8rem auto 0;
  color: #d8c6ad;
  font-size: 1.05rem;
}

/* ---------- corridor stage ---------- */

.corridor {
  position: relative;
  height: min(78vh, 640px);
  min-height: 420px;
  margin: 0 auto 2.5rem;
  max-width: 1100px;
  border-radius: 22px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 38%, #4a2e1a 0%, #2c1a0f 65%, #190f08 100%);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.65);
}

.corridor__vignette {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, transparent 35%, rgba(0,0,0,0.55) 85%);
}

.corridor__floor-glow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 46%;
  height: 10%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(232,163,61,0.35) 0%, transparent 70%);
  z-index: 5;
  filter: blur(2px);
}

/* ---------- 3D receding tunnel ---------- */

.tunnel {
  position: absolute;
  inset: 0;
  perspective: 460px;
  perspective-origin: 50% 46%;
  overflow: hidden;
}

.tunnel__frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 210px;
  margin: -105px 0 0 -150px;
  transform: translateZ(calc(var(--i) * -160px));
  animation: flyTunnel 7.2s linear infinite;
  animation-delay: calc(var(--i) * -0.6s);
}

.tunnel__frame::before {
  /* the hollow "brick archway" ring itself */
  content: "";
  position: absolute;
  inset: 0;
  border-style: solid;
  border-width: 34px 46px;
  border-image: repeating-linear-gradient(
      100deg,
      var(--clay-brick) 0 26px,
      var(--clay-mortar) 26px 30px,
      var(--clay-brick2) 30px 56px,
      var(--clay-mortar) 56px 60px
    ) 60;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.5),
    0 0 24px rgba(0,0,0,0.35);
}

@keyframes flyTunnel {
  0%   { transform: translateZ(-1600px); opacity: 0; }
  8%   { opacity: 0.9; }
  92%  { opacity: 0.9; }
  100% { transform: translateZ(0); opacity: 0; }
}

/* ---------- graffiti (hand-scrawled anecdote bits on the walls) ---------- */

.graffiti {
  position: absolute;
  z-index: 8;
  font-family: var(--font-scrawl);
  color: rgba(242, 230, 210, 0.35);
  transform: rotate(-4deg);
  pointer-events: none;
  white-space: nowrap;
}

.graffiti--1 { top: 18%; left: 6%;  font-size: 1.6rem; transform: rotate(-7deg); }
.graffiti--2 { bottom: 30%; right: 5%; font-size: 1.3rem; transform: rotate(4deg); }
.graffiti--3 { top: 12%; right: 9%; font-size: 1.4rem; transform: rotate(6deg); color: rgba(232,163,61,0.3); }

@media (max-width: 640px) {
  .graffiti--2 { display: none; }
}

.corridor__caption {
  position: absolute;
  left: 1.4rem;
  bottom: 1rem;
  z-index: 20;
  margin: 0;
  font-size: 0.85rem;
  color: #e9dcc4;
  opacity: 0.75;
  max-width: 70%;
}

/* =========================================================
   Walker — original stop-motion-style clay figure
   ========================================================= */

.walker {
  position: absolute;
  z-index: 20;
  bottom: 18%;
  left: 50%;
  width: 100px;
  height: 210px;
  transform: translateX(-50%);
  animation: bob 0.9s steps(1) infinite;
}

@keyframes bob {
  0%   { transform: translateX(-50%) translateY(0)   rotate(-1deg); }
  16%  { transform: translateX(-50%) translateY(-5px) rotate(1deg); }
  33%  { transform: translateX(-50%) translateY(-8px) rotate(-0.5deg); }
  50%  { transform: translateX(-50%) translateY(-3px) rotate(1.5deg); }
  66%  { transform: translateX(-50%) translateY(-8px) rotate(-1deg); }
  83%  { transform: translateX(-50%) translateY(-2px) rotate(0.5deg); }
  100% { transform: translateX(-50%) translateY(0)   rotate(-1deg); }
}

.walker__shadow {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 70px;
  height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,0.55) 0%, transparent 75%);
  z-index: -1;
}

/* --- head --- */

.walker__head {
  position: absolute;
  left: 22px;
  top: 0;
  width: 58px;
  height: 54px;
  background: var(--clay-skin);
  border-radius: 46% 50% 42% 48% / 55% 52% 48% 45%;
  box-shadow:
    inset -8px -10px 0 rgba(0,0,0,0.14),
    inset 6px 8px 0 rgba(255,255,255,0.08);
}

.walker__lump {
  position: absolute;
  border-radius: 50%;
  background: inherit;
  filter: brightness(0.97);
}
.walker__lump--1 { width: 12px; height: 10px; top: 4px; left: 8px; }
.walker__lump--2 { width: 9px;  height: 8px;  top: 30px; right: 4px; }
.walker__lump--3 { width: 16px; height: 13px; top: 8px; left: 2px; background: var(--clay-red-2); border-radius: 50%; opacity: 0.5; }
.walker__lump--4 { width: 12px; height: 10px; bottom: 10px; right: 3px; background: var(--clay-red-2); border-radius: 50%; opacity: 0.45; }

.walker__seam {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 1px;
  height: 40px;
  background: rgba(0,0,0,0.08);
  transform: translateX(-50%) rotate(2deg);
}

.walker__eye {
  position: absolute;
  top: 21px;
  width: 13px;
  height: 15px;
  background: #fdf7ec;
  border-radius: 50%;
  box-shadow: inset 0 -2px 2px rgba(0,0,0,0.15);
}
.walker__eye--l { left: 12px; }
.walker__eye--r { right: 10px; }

.walker__pupil {
  position: absolute;
  top: 4px;
  left: 3px;
  width: 6px;
  height: 6px;
  background: #241a12;
  border-radius: 50%;
  animation: blink 4.5s steps(1) infinite;
}

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}

.walker__mouth {
  position: absolute;
  bottom: 9px;
  left: 50%;
  width: 20px;
  height: 9px;
  transform: translateX(-50%);
  border-bottom: 4px solid #6b3a17;
  border-radius: 0 0 14px 14px;
  animation: talk 0.6s steps(2) infinite;
}

@keyframes talk {
  0%, 100% { height: 6px; }
  50%      { height: 10px; }
}

.walker__neck {
  position: absolute;
  left: 43px;
  top: 50px;
  width: 20px;
  height: 10px;
  background: var(--clay-skin-2);
  border-radius: 6px;
}

/* --- torso --- */

.walker__body {
  position: absolute;
  left: 18px;
  top: 58px;
  width: 64px;
  height: 78px;
  background: var(--clay-red);
  border-radius: 42% 42% 38% 38% / 46% 46% 40% 40%;
  box-shadow:
    inset -10px -12px 0 rgba(0,0,0,0.16),
    inset 8px 10px 0 rgba(255,255,255,0.06);
}

/* --- arms --- */

.walker__arm {
  position: absolute;
  top: 64px;
  width: 15px;
  height: 52px;
  background: var(--clay-red-2);
  border-radius: 10px;
  transform-origin: top center;
  animation: armSwing 0.9s steps(6) infinite;
}
.walker__arm--l { left: 8px;  animation-delay: 0.45s; }
.walker__arm--r { right: 8px; }

.walker__hand {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 15px;
  height: 15px;
  transform: translateX(-50%);
  background: var(--clay-skin);
  border-radius: 50%;
}

@keyframes armSwing {
  0%   { transform: rotate(-24deg); }
  50%  { transform: rotate(24deg); }
  100% { transform: rotate(-24deg); }
}

/* --- legs --- */

.walker__leg {
  position: absolute;
  bottom: 0;
  width: 19px;
  height: 60px;
  background: var(--clay-gold);
  border-radius: 8px;
  transform-origin: top center;
  animation: legSwing 0.9s steps(6) infinite;
}
.walker__leg--l { left: 28px; animation-delay: 0.45s; }
.walker__leg--r { right: 28px; }

.walker__foot {
  position: absolute;
  bottom: -6px;
  left: -4px;
  width: 27px;
  height: 12px;
  background: var(--clay-gold-2);
  border-radius: 8px 8px 10px 4px;
}

@keyframes legSwing {
  0%   { transform: rotate(26deg); }
  50%  { transform: rotate(-26deg); }
  100% { transform: rotate(26deg); }
}

/* ---------- speech bubble ---------- */

.walker__bubble {
  position: absolute;
  bottom: 210px;
  left: 50%;
  transform: translateX(-50%) scale(0.85);
  min-width: 210px;
  max-width: 300px;
  padding: 0.75rem 1.05rem;
  background: var(--clay-cream);
  color: #2a1c10;
  font-weight: 600;
  font-size: 0.92rem;
  text-align: center;
  border-radius: 16px;
  opacity: 0;
  z-index: 25;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.55);
}

.walker__bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 9px 8px 0 8px;
  border-style: solid;
  border-color: var(--clay-cream) transparent transparent transparent;
}

.walker__bubble.is-visible {
  animation: bubblePop 6s ease-out both;
}

@keyframes bubblePop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.7) translateY(8px); text-shadow: 0 0 0 rgba(232,163,61,0); }
  10%  { opacity: 1; transform: translateX(-50%) scale(1.05) translateY(0); text-shadow: 0 0 20px rgba(232,163,61,0.95); }
  22%  { transform: translateX(-50%) scale(1) translateY(0); text-shadow: 0 0 4px rgba(232,163,61,0.25); }
  86%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(0.9) translateY(-4px); }
}

/* ---------- footer ---------- */

.site-foot {
  text-align: center;
  padding: 1.5rem 1.5rem 3rem;
  font-size: 0.82rem;
  color: #a8916d;
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .corridor { border-radius: 14px; height: 66vh; min-height: 380px; }
  .walker { transform: translateX(-50%) scale(0.78); bottom: 15%; }
  .site-head { padding: 2.2rem 1.2rem 1.2rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .tunnel__frame,
  .walker,
  .walker__arm,
  .walker__leg,
  .walker__pupil,
  .walker__mouth {
    animation: none !important;
  }
  .walker__bubble.is-visible {
    animation-duration: 0.01s !important;
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}