/* Big Magic Cat: a calm glossy desktop wallpaper he is slowly burning down. */
@font-face { font-family: "Baloo 2"; src: url("/font/baloo2.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/font/jbmono.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  --bg: #3C9A1E; --ink: #2A2140; --accent: #9B30FF;
  --sky: #1E5FD9; --grass: #4FAE28; --violet: #6A2A9E; --cream: #F4F1E6; --muted: #6C6380;
  --font-display: "Baloo 2", system-ui, sans-serif;
  --font-body: "Baloo 2", system-ui, sans-serif;
  --body: 18px; --label: 17px; --btn-h: 58px;
  --dialog-w: clamp(380px, 32vw, 660px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
html, body { overflow-x: hidden; }
body { background: var(--grass) url("/img/grass.webp") center top / 900px auto repeat; line-height: 1.3; }

/* ---------- world ---------- */
.world { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.scene { position: absolute; inset: 0; overflow: hidden; background: var(--sky); }
.stage { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 16 / 9; transform-origin: 0 0; }
.stage__bg { width: 100%; height: 100%; }
.stage__night { position: absolute; inset: 0; background: #0B0A3A; mix-blend-mode: multiply; opacity: 0; pointer-events: none; }
.stage__night.is-on { opacity: .88; }
.stage__hill { position: absolute; left: 34%; top: 60.5%; width: 30%; height: 9%; opacity: 0; transition: opacity 1.4s var(--ease-out);
  background: radial-gradient(ellipse 50% 70% at 50% 60%, rgba(18, 22, 10, .85), rgba(18, 22, 10, .55) 60%, transparent 100%); mix-blend-mode: multiply; }
.stage__hill.is-on { opacity: 1; }
.stage__marks { position: absolute; inset: 0; }
.mark { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.mark__hole { width: 100%; height: auto; animation: hole-in .5s var(--spring) both;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 42%, transparent 70%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 42%, transparent 70%); }
.mark__fire { position: absolute; left: 50%; bottom: 38%; width: 46%; transform: translateX(-50%); transform-origin: 50% 100%; transition: opacity 1.2s ease, transform 1.2s ease; }
.mark__fire img { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; opacity: 0; animation: flick .36s steps(1) infinite; }
.mark__fire img:nth-child(2) { animation-delay: -.12s; }
.mark__fire img:nth-child(3) { animation-delay: -.24s; }
.mark__fire.is-out { opacity: 0; transform: translateX(-50%) scale(.4); }
@keyframes flick { 0% { opacity: 1; } 33.3% { opacity: 0; } }
@keyframes hole-in { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }

.sky { position: absolute; inset: 0 0 40% 0; pointer-events: none; }
.cloud { position: absolute; left: 0; height: auto; will-change: transform; animation: drift linear infinite; }
.cloud--a { top: 8%;  width: clamp(180px, 17vw, 360px); animation-duration: 140s; animation-delay: -30s; }
.cloud--b { top: 30%; width: clamp(130px, 12vw, 250px); animation-duration: 180s; animation-delay: -120s; }
.cloud--c { top: 52%; width: clamp(90px, 7vw, 150px);  animation-duration: 230s; animation-delay: -60s; }
.cloud--d { top: 2%;  width: clamp(120px, 10vw, 210px); animation-duration: 200s; animation-delay: -170s; }
@keyframes drift { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }

.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.is-shaking .scene, .is-shaking .cat, .is-shaking .wordmark { animation: shake .32s linear; }
@keyframes shake {
  0% { transform: translate(0, 0); } 20% { transform: translate(-9px, 4px); } 40% { transform: translate(8px, -5px); }
  60% { transform: translate(-6px, 3px); } 80% { transform: translate(4px, -2px); } 100% { transform: translate(0, 0); }
}

/* ---------- wordmark + cat ---------- */
.wordmark { position: absolute; z-index: 3; left: 4vw; top: 5vh; margin: 0; width: min(44vw, 820px); animation: drop-in .7s var(--spring) .1s both; }
.wordmark img { width: 100%; height: auto; }
@keyframes drop-in { from { transform: translateY(-40px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

.cat { position: absolute; z-index: 2; left: 3vw; bottom: -8vh; width: min(76vh, 46vw); aspect-ratio: 1; pointer-events: none; }
.cat__img { width: 100%; height: 100%; transform-origin: 52% 86%; animation: sway 6s ease-in-out infinite alternate; pointer-events: auto; cursor: pointer; }
@keyframes sway {
  0% { transform: rotate(-1.1deg) scale(1, 1); }
  50% { transform: rotate(0deg) scale(1.012, .988); }
  100% { transform: rotate(1.1deg) scale(1, 1); }
}

/* ---------- spell.exe ---------- */
.spell {
  position: absolute; z-index: 4; right: 4vw; top: 50%; translate: 0 -50%; width: var(--dialog-w);
  border: 1px solid transparent;
  border-image: url("/img/dialog.webp") 158 198 33 418 fill / 58px 73px 12px 153px stretch;
  padding: 72px 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
  animation: pop .55s var(--spring) .35s both;
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.spell__line { margin: 0; font-size: clamp(19px, 1.25vw, 23px); font-weight: 800; line-height: 1.2; color: var(--ink); }
.spell__lore { margin: 2px 0 0; font-size: var(--body); font-weight: 600; line-height: 1.35; color: var(--ink); }
.spell__risk { display: block; margin-top: 8px; font-size: 16px; font-weight: 500; color: var(--muted); }

.cast { all: unset; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: 999px;
  transition: transform .6s var(--spring), filter .25s ease; }
.cast img { width: 100%; height: auto; }
.cast:hover { transform: translateY(-3px) scale(1.02); filter: brightness(1.06); transition: transform .25s var(--spring), filter .25s ease; }
.cast:active { transform: translateY(2px) scale(.97); filter: brightness(.95); transition: transform .035s linear; }
.cast:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }

.ca { display: flex; gap: 8px; align-items: stretch; }
.ca__field { flex: 1; min-width: 0; min-height: 58px; display: flex; align-items: center; padding: 10px 16px;
  border: 1px solid transparent; border-image: url("/img/plate-3.webp") 0 120 fill / 0 36px stretch;
  font: 600 16px/1.3 "JetBrains Mono", ui-monospace, monospace; color: var(--ink); }
.ca__copy { all: unset; box-sizing: border-box; min-width: 92px; min-height: 58px; padding: 0 20px; text-align: center; cursor: pointer;
  border: 1px solid transparent; border-image: url("/img/plate-4.webp") 0 170 fill / 0 44px stretch;
  font: 800 var(--label)/58px var(--font-body); color: var(--ink); transition: transform .6s var(--spring); }
.ca__copy:hover { transform: translateY(-2px); transition-duration: .25s; }
.ca__copy:active { transform: translateY(2px) scale(.96); transition: transform .035s linear; }
.ca__copy:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

.pair { display: grid; gap: 10px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--btn-h); padding: 14px 24px;
  border: 1px solid transparent; text-decoration: none; color: #fff; font: 800 var(--label)/1.15 var(--font-body);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35); cursor: pointer; transition: transform .6s var(--spring), filter .25s ease; }
.btn img { flex: none; width: 26px; height: 26px; }
.btn--x img { width: 20px; height: 20px; }
.btn--pump { border-image: url("/img/plate-1.webp") 0 270 fill / 0 62px stretch; font-size: 19px; }
.btn--x { border-image: url("/img/plate-2.webp") 0 240 fill / 0 55px stretch; }
.btn:hover { transform: translateY(-3px); filter: brightness(1.08); transition-duration: .25s; }
.btn:active { transform: translateY(2px) scale(.98); transition: transform .035s linear; }
.btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.btn.is-off { opacity: .5; filter: grayscale(.6); transform: none; }

/* short desktops: tighten the dialog */
@media (min-width: 821px) and (max-height: 760px) {
  :root { --btn-h: 52px; --dialog-w: clamp(360px, 30vw, 470px); }
  .spell { gap: 10px; padding-bottom: 18px; }
  .spell__lore { font-size: 17px; }
  .ca__field, .ca__copy { min-height: 52px; line-height: 52px; }
  .ca__field { line-height: 1.3; }
}

/* ---------- phone / narrow: recompose ---------- */
@media (max-width: 820px) {
  :root { --dialog-w: min(560px, 100% - 32px); }
  .world { min-height: 0; overflow: visible; padding-bottom: 32px; }
  .scene { position: relative; inset: auto; height: 100vh; height: 100svh; min-height: 560px; max-height: 1100px; }
  .wordmark { left: 50%; top: max(16px, 3svh); width: min(88vw, 560px); translate: -50% 0; }
  .cat { --w: min(112vw, 62svh, 640px); left: 50%; translate: -50% 0; bottom: auto; width: var(--w);
    top: calc(clamp(560px, 100svh, 1100px) - 206px - var(--w) * .86); }
  .spell { position: relative; right: auto; top: auto; translate: none; margin: -210px auto 0; }
  .sky { inset: 0 0 45% 0; }
  .spell { padding-inline: 20px; }
  .btn--pump { font-size: 17px; padding-inline: 18px; }
}
@media (max-width: 380px) {
  .spell { padding: 68px 18px 20px; }
  .ca__field { padding: 8px 16px; }
  .ca__copy { min-width: 78px; padding: 0 12px; }
  .btn--pump { font-size: 17px; padding: 14px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .cloud, .cat__img { animation: none !important; }
}