/*────────────────────────────────────────────────────────────
  unicorn.css
  • Fixed, full-viewport parallax overlay (behind page content)
  • City skyline (behind), unicorn (middle), grass (front)
  • Unicorn’s hooves now sit inside the grass strip by using bottom: 0;
  • Original z-index values preserved exactly:
      – z-city  = -4
      – unicorn-z = -3
      – z-front = -2
────────────────────────────────────────────────────────────*/

/* 1. DESIGN TOKENS (CSS variables) */
:root {
  /* === Unicorn === */
  --unicorn-width: clamp(60px, 15vw, 200px);
  --unicorn-speed: 60s;
  --unicorn-z: -3;               /* exactly as originally set */

  /* === Grass foreground === */
  --layer-front-height: 50px;    /* height of the grass strip */
  --parallax-speed-front: 680s;
  --z-front: -2;                 /* exactly as originally set */
}

/* 2. BASE RESET */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #87ceeb; /* “sky” behind everything */
  overflow-x: hidden;  /* prevent horizontal scrollbar */
}

/* 3. FIXED SCENE OVERLAY */
/*    --------------------- */
/* Pushed behind all normal content by z-index: -5, so it never alters your layout */
.scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* clicks still go to forms/buttons above */
  overflow: hidden;     /* clip anything outside viewport */
  z-index: -5;          /* behind all page content */
}

/* 5. GRASS FOREGROUND LAYER (frontmost) */
.parallax__layer--front {
  position: absolute;
  bottom: 0;                           /* flush with bottom of viewport */
  left: 0;
  width: 200%;
  height: var(--layer-front-height);

  background-image: url('/static/img/grass.png');
  background-repeat: repeat-x;
  background-size: auto 100%;

  z-index: var(--z-front);             /* –2 */
  animation: scroll-front var(--parallax-speed-front) linear infinite;
}

/* 6. UNICORN: FEET AT BOTTOM (inside grass) */
.unicorn-walker {
  position: absolute;

  /* Place the unicorn so its hooves sit at the very bottom of the viewport.
     The grass (also bottom: 0) will cover its lower legs automatically. */
  bottom: 0;

  left: calc(-1 * var(--unicorn-width));  /* start fully off-screen to the left */
  width: var(--unicorn-width);

  z-index: var(--unicorn-z);           /* –3 */
  pointer-events: none;                 /* never blocks interactions */
  animation: unicorn-glide var(--unicorn-speed) linear infinite;
}
.unicorn-walker img {
  display: block;
  width: 100%;
  height: auto;
}

/* 8. KEYFRAMES FOR GRASS SCROLL */
@keyframes scroll-front {
  from { background-position: 0 0; }
  to   { background-position: 100% 0; }
}

/* 9. KEYFRAMES FOR UNICORN WALK */
@keyframes unicorn-glide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + var(--unicorn-width))); }
}

/* 10. RESPONSIVE TWEAKS FOR VERY SMALL SCREENS */
@media (max-width: 400px) {
  :root {
    --layer-city-height: 120px;
    --layer-front-height: 60px;      /* slightly larger grass on tiny screens */
    --unicorn-speed: 15s;
    --parallax-speed-front: 15s;
    --parallax-speed-city: 45s;
  }
}