:root {
  --ink: #111;
  --grass: #66bb3a;
  --sky-h: 57vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #5ec8ff;
  font-family: "Comic Sans MS", "Chalkboard SE", "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ---------- SKY ---------- */
.sky {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--sky-h);
  background: linear-gradient(#4db8f5 0%, #9fe0ff 70%, #d6f3ff 100%);
  overflow: hidden;
}

.hills {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sun {
  position: absolute;
  top: 3vh;
  right: 5vw;
  width: clamp(80px, 11vw, 150px);
  aspect-ratio: 1;
}
.sun svg { width: 100%; height: 100%; overflow: visible; }
.sun .rays { transform-origin: 70px 70px; animation: spin 40s linear infinite; }

.cloud {
  position: absolute;
  left: -260px;
  width: var(--w, 160px);
  animation: drift var(--dur, 90s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.cloud svg { display: block; width: 100%; height: auto; }

@keyframes drift { to { transform: translateX(calc(100vw + 560px)); } }
@keyframes spin  { to { transform: rotate(360deg); } }

/* ---------- TITLE ---------- */
.title {
  position: absolute;
  top: 4vh;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
  z-index: 5;
}
.title h1 {
  margin: 0;
  display: inline-block;
  font-family: Impact, "Arial Black", "Haettenschweiler", sans-serif;
  font-size: clamp(42px, 10vw, 128px);
  line-height: 1;
  letter-spacing: .02em;
  color: #fff;
  -webkit-text-stroke: 9px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 .06em 0 var(--ink);
  transform: rotate(-2deg);
}
.title h1 span { color: #ff4fa3; }
.tagline {
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 16px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 999px;
  font-weight: 700;
  font-size: clamp(13px, 2vw, 20px);
  transform: rotate(1deg);
  box-shadow: 3px 4px 0 var(--ink);
}

/* ---------- FLOCK CAM ---------- */
.spycam { cursor: pointer; }
.spycam .shake { transition: transform .25s ease; }
.spycam.duck .shake { transform: translateY(24px); }
.spycam .led { animation: led 1.8s steps(1) infinite; }
@keyframes led { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .15; } }

.camspot {
  position: absolute;
  z-index: 6;
  width: 0;
  height: 0;
  pointer-events: none;
}
.camspot .bubble { font-size: 13px; max-width: 180px; padding: 6px 10px; }

/* ---------- VIDEO ---------- */
.tv {
  position: absolute;
  z-index: 3;
  top: 23vh;
  right: 33vw;
  width: clamp(150px, 20vw, 320px);
  aspect-ratio: 16 / 9;
  background: #000;
  border: 4px solid var(--ink);
  border-radius: 10px;
  box-shadow: 4px 6px 0 var(--ink);
  transform: rotate(-2deg);
}
/* little wooden posts so it stands on the hill like a drive-in screen */
.tv::before, .tv::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 9px;
  height: 26px;
  background: #c98e50;
  border: 3px solid var(--ink);
  border-top: 0;
  z-index: -1;
}
.tv::before { left: 18%; }
.tv::after  { right: 18%; }
.tv iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 6px;
}

/* ---------- FIELD ---------- */
.field {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--sky-h);
  bottom: 0;
  z-index: 2;
  background: linear-gradient(var(--grass) 0%, #4fa82e 55%, #3f9425 100%);
}
.field::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 90px, transparent 90px 180px);
  pointer-events: none;
}
.fence {
  position: absolute;
  left: 0;
  top: -26px;
  z-index: 1;
  pointer-events: none;
}

.tuft {
  position: absolute;
  pointer-events: none;
}

/* ---------- SHEEP ---------- */
.sheep {
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  will-change: transform;
}
.sheep.talking { z-index: 50000 !important; }
.sheep svg { display: block; width: 100%; height: auto; overflow: visible; }
.sheep .flip { transform-origin: 50% 100%; }
.sheep.left .flip { transform: scaleX(-1); }

.tag {
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: -6px;
  transform: translateX(-50%);
  padding: 1px 9px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.sheep:hover .tag { opacity: 1; }

.bubble {
  position: absolute;
  left: 50%;
  bottom: 96%;
  width: max-content;
  max-width: 210px;
  padding: 8px 12px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 18px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 10px) scale(.6);
  transform-origin: 50% 100%;
  transition: opacity .18s, transform .22s cubic-bezier(.3, 1.6, .5, 1);
  pointer-events: none;
}
.bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -9px;
  border: 9px solid transparent;
  border-top-color: var(--ink);
}
.bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Sheep animation: pieces of the SVG */
.sheep .body { transform-origin: 90px 140px; }
.sheep .head { transform-origin: 138px 100px; transition: transform .45s ease; }
.sheep .eyes { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }

.sheep.walking .leg.la { animation: step .64s ease-in-out infinite; }
.sheep.walking .leg.lb { animation: step .64s ease-in-out infinite -.32s; }
.sheep.walking .body   { animation: strut .64s ease-in-out infinite; }
.sheep.walking .head   { animation: bob .64s ease-in-out infinite; }

.sheep.idle .body { animation: breathe 3.2s ease-in-out infinite; }
.sheep.grazing .head { transform: rotate(32deg); }
.sheep.grazing .body { animation: breathe 2s ease-in-out infinite; }

.sheep.pose .body { animation: wiggle .38s ease-in-out infinite; }
.sheep.pose .head { transform: rotate(-9deg) translateY(-2px); }
.sheep.pose .flip { animation: hop .5s ease-out; }

@keyframes step    { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }
@keyframes strut   { 0%, 100% { transform: rotate(-2.2deg) translateY(0); } 50% { transform: rotate(2.2deg) translateY(-3px); } }
@keyframes bob     { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-2px); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015, 1.03); } }
@keyframes wiggle  { 0%, 100% { transform: rotate(-4deg) translateX(-1px); } 50% { transform: rotate(4deg) translateX(1px); } }
@keyframes hop     { 0% { transform: translateY(0); } 40% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
@keyframes blink   { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }

.sheep.left.pose .flip { animation: hopL .5s ease-out; }
@keyframes hopL { 0% { transform: scaleX(-1) translateY(0); } 40% { transform: scaleX(-1) translateY(-14px); } 100% { transform: scaleX(-1) translateY(0); } }

/* floating hearts */
.heart {
  position: absolute;
  z-index: 60000;
  font-size: 26px;
  pointer-events: none;
  animation: floatUp 1.3s ease-out forwards;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) rotate(var(--r, 10deg)) scale(1.3); }
}

/* ---------- FARMER (pokes his head in now and then) ---------- */
.farmer {
  position: absolute;
  z-index: 80000;
  bottom: 5vh;
  width: clamp(130px, 17vw, 230px);
  pointer-events: none;
  transition: transform .75s cubic-bezier(.3, 1.5, .5, 1);
}
.farmer svg { display: block; width: 100%; height: auto; overflow: visible; }
.farmer.from-left  { left: 0;  transform: translateX(-110%); }
.farmer.from-right { right: 0; transform: translateX(110%); }
.farmer.from-left.in  { transform: translateX(-4%); }
.farmer.from-right.in { transform: translateX(4%); }
.farmer .bubble { bottom: 100%; max-width: 190px; }
.farmer .fhead  { transform-origin: 100px 150px; animation: fpeek 1.3s ease-in-out infinite alternate; }
.farmer .fpupils { animation: fscan 2.2s ease-in-out infinite alternate; }
@keyframes fpeek { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes fscan { 0% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 100% { transform: translateX(-2px); } }

/* ---------- PARTY MODE (secret) ---------- */
:root { --beat: .469s; --ball-x: 20vw; --ball-y: 40vh; }

.nightsky {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
  background: linear-gradient(#04001a 0%, #160a45 55%, #3a1670 100%);
}
.nightsky .star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: twinkle 3s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .25; transform: scale(.7); } to { opacity: 1; transform: scale(1.2); } }

.moon {
  position: absolute;
  top: 2vh;
  right: 5vw;
  width: clamp(85px, 11vw, 150px);
  aspect-ratio: 1;
  transform: translateY(45vh);
  opacity: 0;
  transition: transform 1.6s cubic-bezier(.2, .8, .3, 1), opacity 1s;
  filter: drop-shadow(0 0 22px rgba(255, 250, 200, .75));
}
.moon svg { width: 100%; height: 100%; overflow: visible; }
.sun { transition: transform 1.2s ease-in, opacity .9s; }

body.party .sun  { transform: translateY(45vh); opacity: 0; }
body.party .moon { transform: none; opacity: 1; }
body.party .nightsky { opacity: 1; }
body.party .cloud { opacity: .18; }
.cloud { transition: opacity 1.2s; }

.hills .dusk { opacity: 0; transition: opacity 1.4s; }
body.party .hills .dusk { opacity: .68; }

/* aliens + ship */
.partyonly { opacity: 0; transition: opacity 1.4s; pointer-events: none; }
body.party .partyonly { opacity: 1; }

.ufo { animation: ufobob 2.6s ease-in-out infinite alternate; }
@keyframes ufobob { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
.ufo-led { animation: ledchase .9s steps(1) infinite; }
@keyframes ledchase {
  0%   { fill: #ff2e7e; }
  33%  { fill: #2ee6ff; }
  66%  { fill: #ffe62e; }
}
.beam-light { animation: beampulse var(--beat) ease-in-out infinite alternate; }
@keyframes beampulse { from { opacity: .35; } to { opacity: .8; } }

.alien { transform-box: fill-box; transform-origin: 50% 100%; animation: abounce var(--beat) ease-in-out infinite alternate; }
.alien .arm { transform-box: fill-box; transform-origin: 50% 0%; }
.alien .arm.l { animation: armL var(--beat) ease-in-out infinite alternate; }
.alien .arm.r { animation: armR var(--beat) ease-in-out infinite alternate; }
@keyframes abounce { from { transform: translateY(0) scale(1.04, .94); } to { transform: translateY(-6px) scale(.97, 1.05); } }
@keyframes armL { from { transform: rotate(10deg); }  to { transform: rotate(150deg); } }
@keyframes armR { from { transform: rotate(-10deg); } to { transform: rotate(-150deg); } }

/* dance floor in the pasture */
.floorwrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1.4s;
  pointer-events: none;
  background: #0d0224;
}
body.party .floorwrap { opacity: 1; }

.floor {
  position: absolute;
  left: -70%;
  width: 240%;
  top: -80%;
  height: 280%;
  transform: perspective(420px) rotateX(58deg);
  transform-origin: 50% 50%;
  background: repeating-conic-gradient(#2c0b5e 0 25%, #14002e 0 50%) 0 0 / 96px 96px;
}
.floor.lit-a {
  background: repeating-conic-gradient(#ff2e7e 0 25%, transparent 0 50%) 0 0 / 96px 96px;
  animation: litA calc(var(--beat) * 2) ease-in-out infinite alternate;
}
.floor.lit-b {
  background: repeating-conic-gradient(#2ee6ff 0 25%, transparent 0 50%) 48px 0 / 96px 96px;
  animation: litB calc(var(--beat) * 2) ease-in-out infinite alternate;
}
@keyframes litA { from { opacity: .15; } to { opacity: .8; } }
@keyframes litB { from { opacity: .8; }  to { opacity: .15; } }

body.party .field::before, body.party .tuft { opacity: 0; }
.tuft { transition: opacity 1s; }
body.party .fence { filter: brightness(.45) saturate(1.4) drop-shadow(0 0 6px #ff2e7e); }
.fence { transition: filter 1.2s; }

body.party .title h1 { text-shadow: 0 .06em 0 var(--ink), 0 0 28px #ff2e7e, 0 0 60px #2ee6ff; }
body.party .tv { box-shadow: 4px 6px 0 var(--ink), 0 0 26px #2ee6ff; }

/* sheep get glowy + dance on the beat */
body.party .sheep .flip svg { filter: drop-shadow(0 0 7px var(--glow, #ff2e7e)); }
.sheep.dancing .flip svg { transform-origin: 50% 92%; animation: bounce var(--beat) ease-in-out infinite; }
.sheep.dancing .body { animation: shimmy calc(var(--beat) * 2) ease-in-out infinite; }
.sheep.dancing .head { animation: headbang var(--beat) ease-in-out infinite; }
.sheep.dancing .leg.la { animation: kick calc(var(--beat) * 2) ease-in-out infinite; }
.sheep.dancing .leg.lb { animation: kick calc(var(--beat) * 2) ease-in-out infinite calc(var(--beat) * -1); }
@keyframes bounce   { 0%, 100% { transform: translateY(0) scale(1.03, .96); } 50% { transform: translateY(-11px) scale(.98, 1.04); } }
@keyframes shimmy   { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes headbang { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(15deg); } }
@keyframes kick     { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }

/* disco ball */
.disco {
  position: absolute;
  z-index: 4;
  left: var(--ball-x);
  top: 0;
  width: 0;
  transform: translateY(-110vh);
  transition: transform 1.6s cubic-bezier(.3, 1.3, .5, 1);
  pointer-events: none;
}
body.party .disco { transform: none; }
.disco .string { position: absolute; left: -1px; top: 0; width: 2px; height: calc(var(--ball-y) - 46px); background: #d6dcea; }
.disco svg { position: absolute; left: -46px; top: calc(var(--ball-y) - 46px); width: 92px; height: 92px; overflow: visible; filter: drop-shadow(0 0 18px rgba(255, 255, 255, .85)); }
.disco .tiles { animation: tilescroll 3.2s linear infinite; }
@keyframes tilescroll { to { transform: translateX(24px); } }
.disco .glint { animation: glint 1.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.disco .glint:nth-of-type(2) { animation-delay: -.4s; }
.disco .glint:nth-of-type(3) { animation-delay: -.8s; }
@keyframes glint { from { opacity: 0; transform: scale(.3) rotate(0); } to { opacity: 1; transform: scale(1.1) rotate(45deg); } }

/* lasers + spotlights */
.partyfx {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s;
  mix-blend-mode: screen;
}
body.party .partyfx { opacity: 1; }
.lasers { position: absolute; left: var(--ball-x); top: var(--ball-y); width: 0; height: 0; }
.laser {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 150vmax;
  border-radius: 2px;
  transform-origin: 50% 0;
  background: linear-gradient(var(--c), transparent 90%);
  box-shadow: 0 0 6px var(--c), 0 0 16px var(--c);
  transform: rotate(var(--a1));
  animation: sweep var(--d) ease-in-out infinite alternate;
  animation-delay: var(--dl);
}
@keyframes sweep { from { transform: rotate(var(--a1)); } to { transform: rotate(var(--a2)); } }

.search {
  position: absolute;
  bottom: -6vh;
  width: 16vw;
  height: 120vh;
  transform-origin: 50% 100%;
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
  background: linear-gradient(to top, var(--c), transparent 85%);
  opacity: .5;
  animation: searchsweep var(--d) ease-in-out infinite alternate;
}
@keyframes searchsweep { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }

.blob {
  position: absolute;
  width: 34vmin;
  height: 34vmin;
  border-radius: 50%;
  background: radial-gradient(circle, var(--c) 0, transparent 65%);
  opacity: .4;
  animation: blobdrift var(--d) ease-in-out infinite alternate;
}
@keyframes blobdrift { from { transform: translate(0, 0); } to { transform: translate(var(--dx), var(--dy)); } }

/* ---------- UI ---------- */
.hint {
  position: absolute;
  z-index: 90000;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 14px;
  background: rgba(255,255,255,.9);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  transition: opacity .6s;
  pointer-events: none;
}
.hint.gone { opacity: 0; }

.more {
  position: absolute;
  z-index: 90000;
  right: 14px;
  bottom: 14px;
  padding: 10px 18px;
  font: 900 15px Impact, "Arial Black", sans-serif;
  letter-spacing: .05em;
  color: #fff;
  background: #ff4fa3;
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 3px 4px 0 var(--ink);
  cursor: pointer;
}
.mute { display: none; bottom: 66px; background: #14b8c4; font-size: 13px; padding: 7px 14px; }
.mute:hover { background: #0ea0ab; }
body.party .mute { display: block; }
.more:hover  { background: #ff2e8e; }
.more:active { transform: translate(3px, 4px); box-shadow: none; }
.more[disabled] { background: #999; cursor: not-allowed; }

.foot {
  position: absolute;
  z-index: 90000;
  left: 14px;
  bottom: 14px;
  max-width: 28vw;
  font-size: 10px;
  line-height: 1.3;
  padding: 3px 8px;
  background: rgba(255,255,255,.75);
  border-radius: 8px;
}

.noscript {
  position: fixed;
  inset: 40% 0 auto;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  z-index: 99999;
}

@media (max-width: 700px) {
  .foot { display: none; }
  .tv { right: auto; left: 50%; top: 27vh; width: 52vw; transform: translateX(-50%) rotate(-2deg); }
  .bubble { font-size: 13px; max-width: 170px; }
  .title h1 { -webkit-text-stroke-width: 7px; }
  :root { --ball-x: 80vw; --ball-y: 34vh; }
  .disco svg { width: 64px; height: 64px; left: -32px; top: calc(var(--ball-y) - 32px); }
  .disco .string { height: calc(var(--ball-y) - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}