/* catmoo: one empty field from an old 3D game. Desktop = one screen; phone = the field, then the cloud and the tag. */
@font-face { font-family: "Lilita One"; src: url("/fonts/lilita-one-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --bg: #7FA52C; --ink: #2B2118; --accent: #2A63F0;
  --cream: #FFF6DC; --brown: #3A2F29; --tag-ink: #3A2A10; --tag-soft: #6B4A0E;
  --font-display: "Lilita One", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --ease-out: cubic-bezier(.22, .9, .3, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
body { background: #4F86F7 linear-gradient(#4F86F7, #7FA52C 60%); overflow-x: hidden; }
p { margin: 0; }

/* ---------- desktop: one screen, a 100u x 56.25u composition centred in the field ---------- */
.world {
  --H: max(100svh, 700px);
  --u: min(1vw, calc(var(--H) * .017778));
  --ox: calc((100% - 100 * var(--u)) / 2);
  --oy: calc((var(--H) - 56.25 * var(--u)) / 2);
  --mx: 0; --my: 0;
  position: relative; height: var(--H); overflow: hidden;
}
.field { position: absolute; inset: 0; }
.px { translate: calc(var(--mx) * var(--d) * -1px) calc(var(--my) * var(--d) * -.6px); }

.sky {
  position: absolute; inset: -24px;
  background: url("/img/scene.webp") center 46% / cover no-repeat;
}

.clouds { position: absolute; inset: 0 0 50% 0; pointer-events: none; }
.cloud { position: absolute; left: 100%; height: auto; animation: drift linear infinite; }
.cloud-a { top: 6%;  width: calc(17 * var(--u)); animation-duration: 140s; animation-delay: -40s; }
.cloud-b { top: 30%; width: calc(10 * var(--u)); animation-duration: 110s; animation-delay: -85s; }
.cloud-c { top: 48%; width: calc(6 * var(--u));  animation-duration: 90s;  animation-delay: -20s; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(calc(-100vw - 120%)); } }

.word { position: absolute; margin: 0; left: calc(var(--ox) + 3 * var(--u)); top: calc(var(--oy) + 3 * var(--u)); width: calc(31 * var(--u)); }
.word img { width: 100%; height: auto; filter: drop-shadow(0 6px 0 rgba(58, 47, 41, .25)); animation: drop 900ms var(--spring) 250ms both; }
@keyframes drop { from { transform: translateY(-140%) rotate(-6deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; } }

.cat-wrap { position: absolute; left: calc(var(--ox) + 13 * var(--u)); top: calc(var(--oy) + 16.5 * var(--u)); width: calc(40 * var(--u)); }
.cat { position: relative; aspect-ratio: 584 / 518; animation: walk-in 1100ms var(--ease-out) 100ms both; cursor: pointer; }
@keyframes walk-in { from { transform: translateX(-90vw); } 70% { transform: translateX(2%); } to { transform: none; } }
.cat-body { position: absolute; inset: 0; transform-origin: 60% 100%; animation: breathe 3.6s ease-in-out infinite; transition: scale 250ms var(--spring); }
@keyframes breathe { 50% { transform: scale(1.012, 1.018); } }
.cat:hover .cat-body { scale: 1.025 .985; }
.frame { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; user-select: none; -webkit-user-drag: none; }
.frame.on { opacity: 1; }
.cat.fade .frame { transition: opacity 320ms ease-in-out; }
.cat.is-chewing .cat-body { animation: chew 260ms steps(2) infinite; }
@keyframes chew { 50% { transform: scale(1.006, .99); } }
.cat.is-mooing .cat-body { animation: moo-shake 180ms ease-in-out 6 alternate; }
@keyframes moo-shake { from { transform: rotate(-.6deg) scale(1.01); } to { transform: rotate(.6deg) scale(1.02, 1.03); } }
.cat-shadow { position: absolute; left: 14%; right: 6%; bottom: -4%; height: 14%; background: radial-gradient(closest-side, rgba(52, 32, 14, .45), rgba(52, 32, 14, 0)); }

.spit { position: absolute; left: -60%; top: -30%; width: 110%; height: 130%; pointer-events: none; }

/* the moo: a cream speech plate out of his mouth, three pixel question marks */
.say { position: absolute; left: -16.5%; top: -2%; width: 46%; container-type: inline-size; opacity: 0; scale: .4; transform-origin: 88% 100%; transition: opacity 160ms ease-out, scale 160ms ease-out; pointer-events: none; }
.say img { width: 100%; height: auto; transform: scaleX(-1); }
.say span { position: absolute; inset: 4% 8% 24% 8%; display: grid; place-items: center; font: 16.5cqw/1 var(--font-display); color: var(--brown); white-space: nowrap; }
.say.on { opacity: 1; scale: 1; transition: opacity 120ms ease-out, scale 420ms var(--spring); }
.q { position: absolute; height: auto; opacity: 0; pointer-events: none; }
.q1 { left: 2%; top: -10%; width: 6.5%; }
.q2 { left: 21%; top: -19%; width: 8%; }
.q3 { left: 38%; top: -6%; width: 5.5%; }
.cat.is-mooing .q { animation: q-rise 1400ms var(--ease-out) both; }
.cat.is-mooing .q2 { animation-delay: 180ms; }
.cat.is-mooing .q3 { animation-delay: 360ms; }
@keyframes q-rise { from { opacity: 0; transform: translateY(40%) scale(.5); } 25% { opacity: 1; transform: translateY(0) scale(1.1) rotate(-8deg); } 70% { opacity: 1; } to { opacity: 0; transform: translateY(-60%) rotate(8deg); } }

/* MOO: the one big action */
.moo-wrap { position: absolute; left: calc(var(--ox) + 55.5 * var(--u)); top: calc(var(--oy) + 40.5 * var(--u)); width: calc(18 * var(--u)); min-width: 200px; }
.moo {
  display: block; width: 100%; aspect-ratio: 548 / 234; min-height: 0; padding: 0; border: 0; cursor: pointer;
  background: url("/img/btn.webp") center / 100% 100% no-repeat; container-type: inline-size;
  filter: drop-shadow(0 8px 0 rgba(58, 47, 41, .35));
  animation: pop 700ms var(--spring) 1100ms both;
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1), filter 600ms;
}
.moo span { font: 17cqw/1 var(--font-display); color: var(--brown); letter-spacing: .02em; }
.moo:hover { transform: translateY(-4px) rotate(-1.5deg); transition-duration: 250ms; transition-timing-function: var(--spring); }
.moo:active { transform: translateY(6px) scale(.97, .92); filter: drop-shadow(0 2px 0 rgba(58, 47, 41, .35)) brightness(.97); transition-duration: 35ms; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

/* the thought cloud: lore */
.think {
  position: absolute; left: calc(var(--ox) + 38 * var(--u)); top: calc(var(--oy) + 2.5 * var(--u)); width: calc(29 * var(--u)); min-width: 360px;
  padding: max(22px, 2.3 * var(--u)) max(26px, 2.8 * var(--u)) max(52px, 5.4 * var(--u)) max(46px, 4.8 * var(--u));
  display: grid; gap: .45em; text-align: center; color: var(--brown);
  background: url("/img/think-plate.webp") center / 100% 100% no-repeat;
  animation: puff 700ms var(--spring) 1500ms both;
}
.think-head { font: clamp(21px, 1.75 * var(--u), 30px)/1.12 var(--font-display); }
.think-lore { font: 800 clamp(16px, 1.2 * var(--u), 20px)/1.35 var(--font-body); }
@keyframes puff { from { transform: scale(.6) translate(-14%, 18%); opacity: 0; } to { transform: none; opacity: 1; } }

/* the giant ear tag: contract window, last on the eye path */
.tag-hang { position: absolute; top: 0; right: calc(var(--ox) + 3 * var(--u)); width: clamp(320px, 23 * var(--u), 440px); }
.tag { position: relative; container-type: inline-size; transform-origin: 52% 0; animation: swing-in 1400ms var(--ease-out) 600ms both, swing 6s ease-in-out 2000ms infinite alternate; }
.tag:hover, .tag:focus-within { animation-play-state: running, paused; }
@keyframes swing-in { from { transform: translateY(-110%) rotate(-14deg); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-1.6deg); } to { transform: rotate(1deg); } }
@keyframes swing { from { transform: rotate(1deg); } to { transform: rotate(-1deg); } }
.rope {
  --rope-h: calc(var(--oy) + 2.5 * var(--u));
  position: relative; z-index: 1; width: 17cqw; margin-left: 44.8cqw; height: calc(var(--rope-h) + 16cqw); margin-bottom: -16cqw;
  background: url("/img/rope-2.webp") center bottom / 100% auto no-repeat, url("/img/rope-seg-2.webp") center top / 100% auto repeat-y;
}
.tag-cap { display: block; width: 100%; height: auto; margin-bottom: -1px; }
.tag-body {
  border: 0 solid transparent; border-image: url("/img/tag-body.webp") 6 54 96 54 fill / 1.4cqw 12.2cqw 21.8cqw 12.2cqw stretch;
  padding: clamp(21px, 5.6cqw, 26px) 9cqw 11cqw; display: grid; gap: 10px; justify-items: center; text-align: center; color: var(--tag-ink);
}
.tag-tick { font: clamp(28px, 10cqw, 42px)/1 var(--font-display); }
.tag-label { font: 18px/1 var(--font-display); letter-spacing: .08em; color: var(--tag-soft); }
.tag-ca { display: block; width: 100%; font: 800 16px/1.35 var(--font-body); color: var(--tag-ink); text-align: center; min-height: 1.35em; }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; width: 100%;
  padding: 10px 7cqw; border: 0 solid transparent; background: none; cursor: pointer; text-decoration: none; text-align: center;
  border-image: url("/img/btn.webp") 0 130 fill / 0 26px stretch;
  font: 17px/1.1 var(--font-display); color: var(--brown); text-wrap: balance;
  filter: drop-shadow(0 4px 0 rgba(90, 60, 10, .35));
  transition: transform 600ms cubic-bezier(.2, .8, .2, 1), filter 600ms;
}
.pill img { flex: none; width: 24px; height: 24px; object-fit: contain; }
.pill:hover { transform: translateY(-3px); transition-duration: 250ms; transition-timing-function: var(--spring); }
.pill:active { transform: translateY(3px) scale(.97); filter: drop-shadow(0 1px 0 rgba(90, 60, 10, .35)); transition-duration: 35ms; }
.pill.is-off, .pill.is-off:hover, .pill.is-off:active { transform: none; filter: grayscale(1) opacity(.55); }
.pill-copy { width: auto; min-width: 46%; min-height: 48px; }
.pill-buy { min-height: 58px; font-size: 18px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.pair .pill { padding-inline: 18px; }
.risk { font: 700 16px/1.3 var(--font-body); color: var(--tag-soft); opacity: .85; padding-inline: 2cqw; }

.tuft { position: absolute; height: auto; pointer-events: none; transform-origin: 50% 100%; animation: sway 4.2s ease-in-out infinite alternate; }
.tuft-a { left: -1%; bottom: -2%; width: calc(15 * var(--u)); min-width: 120px; }
.tuft-b { left: calc(var(--ox) + 50 * var(--u)); bottom: -1%; width: calc(8 * var(--u)); min-width: 70px; animation-duration: 3.4s; animation-delay: -1.3s; }
@keyframes sway { from { transform: rotate(-3deg) skewX(2deg); } to { transform: rotate(3deg) skewX(-2deg); } }

html.is-hidden *, html.is-hidden *::before { animation-play-state: paused !important; }

/* ---------- phone and narrow screens: the field first, then cloud and tag on the grass ---------- */
@media (max-width: 1099px), (max-aspect-ratio: 1/1) {
  .world { height: auto; overflow: hidden; --u: 1vw; }
  .px { translate: none; }
  .field {
    position: relative; inset: auto; height: auto; min-height: 100svh;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 14px 16px 26px; gap: 10px;
  }
  .sky { inset: 0; background-position: 50% 62%; }
  .clouds { inset: 0 0 55% 0; }
  .cloud-a { width: 34vw; } .cloud-b { width: 22vw; } .cloud-c { width: 13vw; }
  .word { position: relative; left: auto; top: auto; width: min(84vw, 520px); }
  .field > .think { position: relative; left: auto; top: auto; width: min(100%, 420px); min-width: 0; padding: 24px 24px 50px 44px; margin-bottom: auto; animation-delay: 900ms; }
  .think-head { font-size: 20px; }
  .cat-wrap { position: relative; left: auto; top: auto; width: max(200px, min(84vw, (100svh - 460px) * 1.127, 520px)); translate: 9% 0; margin-top: 8px; }
  .moo-wrap { position: relative; left: auto; top: auto; width: min(54vw, 280px); min-width: 0; }
  .tuft-a { width: 30vw; min-width: 0; }
  .tuft-b { left: auto; right: -2%; width: 20vw; min-width: 0; }
  .below {
    position: relative; padding: 26px 16px 48px; display: flex; flex-direction: column; align-items: center;
    background: url("/img/scene.webp") 0 100% / auto 200% no-repeat, #7FA52C;
  }
  .tag-hang { position: relative; top: auto; right: auto; width: min(100%, 400px); margin-top: -8px; }
  .tag { animation: swing 6s ease-in-out infinite alternate; }
  .rope { --rope-h: 64px; -webkit-mask: linear-gradient(transparent, #000 40%); mask: linear-gradient(transparent, #000 40%); }
}
@media (max-width: 379px) {
  .think-head { font-size: 20px; }
  .pill-buy { font-size: 16px; }
}

/* reduced motion: one still scene (base.css stops CSS motion; JS checks SITE.reduced) */
@media (prefers-reduced-motion: reduce) {
  .tag { animation: none; transform: rotate(1deg); }
  .cloud { animation: none; }
  .cloud-a { left: 58%; } .cloud-b { left: 22%; } .cloud-c { left: 80%; }
  .tuft, .cat-body { animation: none; }
}

/* 404 */
.lost .field { display: block; height: 100svh; min-height: 520px; }
.lost .think, .lost .moo { animation: none; }
.lost-cloud { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(92vw, 620px); }
.lost-cloud .think { position: relative; left: auto; top: auto; width: 100%; min-width: 0; }
.lost-cloud .moo-wrap { position: relative; left: auto; top: auto; width: min(60vw, 260px); margin: 18px auto 0; }
.lost-cloud .moo { display: grid; place-items: center; text-decoration: none; }
.lost-cloud .moo span { font-size: 15cqw; }
.lost h1 { margin: 0; }