/* Home: interactive Coolby hero — header + hero always fit one screen.
 *
 * The hero is laid out on a "canvas" designed at a fixed height (--D: 830 / 770 / 740 px
 * for desktop / tablet / phone). --k = min(1px, available height / --D) scales every
 * vertical measure, so a short window shrinks the whole composition instead of scrolling;
 * a tall window keeps the original size and centres it.
 * Breakpoints: ≥1500, 1001–1499 (default), 701–1000, ≤700, ≤380.
 */
.page-home { height: 100svh; min-height: 540px; overflow: hidden; overflow: clip; } /* clip: can't be scrolled sideways when something inside gets focus */
.hero { position: relative; flex: 1 1 0; min-height: 0; container-type: size; isolation: isolate; }
.hero-canvas {
  --D: 830;
  --k: min(1px, 100cqh / var(--D));
  position: absolute; left: 0; right: 0; top: 50%;
  height: calc(var(--D) * var(--k));
  transform: translateY(-50%);
}

.hero h1 { position: relative; z-index: 0; margin: calc(-4 * var(--k)) 0 0; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: min(max(90px, 13.8vw), 220px, calc(236 * var(--k))); line-height: 1.18; letter-spacing: -.075em; white-space: nowrap; }
.hero h1 em { position: relative; font-weight: 600; cursor: pointer; border-radius: 12px; }

.orbit { position: absolute; left: 50%; border: 1px solid #c1a08020; border-radius: 50%; pointer-events: none; z-index: -1; }
.orbit-one { width: calc(700 * var(--k)); height: calc(540 * var(--k)); top: calc(120 * var(--k)); transform: translateX(-50%) rotate(-18deg); }
.orbit-two { width: calc(570 * var(--k)); height: calc(660 * var(--k)); top: calc(70 * var(--k)); transform: translateX(-50%) rotate(35deg); }

/* Dog */
.dog-stage { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; width: calc(620 * var(--k)); height: calc(620 * var(--k)); top: calc(155 * var(--k)); } /* sits over the title, the top of the letters stays visible */
.floor-shadow { position: absolute; width: 55%; height: 6%; bottom: 1%; left: 23%; border-radius: 50%; background: #7b715b40; filter: blur(17px); }
.dog { position: absolute; inset: 0; border: 0; padding: 0; background: none; transform-origin: 50% 87%; animation: breathe 5s ease-in-out infinite; cursor: pointer; }
.dog img, .dog .face { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.eye { transform-box: view-box; transform-origin: 0 0; }
.happy-mouth { opacity: 0; transition: opacity .14s ease; pointer-events: none; }
.dog.happy .happy-mouth, .dog.snack .happy-mouth { opacity: 1; }
.dog.sleeping .happy-mouth { opacity: 0; }
.dog.happy { animation: happy .6s ease-in-out 2; }
.dog.snack { animation: snack .35s ease-in-out 4; }
.dog.sleeping { animation: breathe 7s ease-in-out infinite; filter: saturate(.82); }
/* head tilt (叫名字 / looking for you): cross-fade to the head-tilted frame (tools/make_tilt.py —
   the original body with a redrawn head). The tilted frame comes in first and the base leaves a
   moment later, so the dog never turns see-through; the eye/tongue overlay belongs to the upright
   head and hides meanwhile. */
.dog > .tilt-frame { opacity: 0; transition: opacity .22s ease .08s; }
.dog > img.base { transition: opacity .15s ease; }
.dog .face { transition: opacity .12s ease; }
.dog.tilt-left .tilt-frame { opacity: 1; transition: opacity .22s ease; }
.dog.tilt-left > img.base { opacity: 0; transition: opacity .18s ease .1s; }
.dog.tilt-left .face { opacity: 0; }
.ask { position: absolute; left: -4%; top: 17%; z-index: 4; white-space: nowrap; pointer-events: none;
  font: italic 17px Georgia, 'PingFang TC', serif; color: #7d5f49; letter-spacing: 1px;
  padding: 7px 16px 8px; background: #fffaf2; border: 1px solid #e6d2bb; border-radius: 20px; box-shadow: 0 6px 18px #65432f14;
  transform-origin: 90% 100%; animation: ask-pop 1.9s ease-out forwards; }
/* the bubble's tail, pointing down-right at his head */
.ask::after { content: ""; position: absolute; right: 14px; bottom: -6px; width: 11px; height: 11px; background: inherit;
  border-right: 1px solid #e6d2bb; border-bottom: 1px solid #e6d2bb; transform: rotate(45deg); }
@keyframes ask-pop { 0% { opacity: 0; transform: scale(.6) rotate(-4deg); } 14% { opacity: 1; transform: scale(1.05) rotate(-4deg); } 24% { transform: scale(1) rotate(-4deg); } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px) rotate(-4deg); } }
.heart { position: absolute; font-family: Arial, sans-serif; color: #be786d; font-size: 26px; animation: float-up 1.6s ease-out forwards; pointer-events: none; }

/* Hot zones over the head and the right front paw (invisible, keyboard-focusable) */
/* the stage box overlaps the title: only the hot zones take clicks, so the letters of "coolby."
   behind the transparent corners stay clickable (叫名字) */
.dog-stage { pointer-events: none; }
.zone { position: absolute; border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 50%; pointer-events: auto; }
.zone-head { left: 20%; top: 4%; width: 60%; height: 46%; }
.zone-paw { left: 52%; top: 64%; width: 19%; height: 34%; border-radius: 40% 40% 30% 30%; }
.zone:focus-visible { outline: 2px dashed #b58c66; outline-offset: -2px; }

/* Handwritten hints around the dog */
.hint { position: absolute; z-index: 3; margin: 0; display: flex; align-items: flex-end; gap: 8px; font: italic 17px Georgia, 'PingFang TC', serif; line-height: 1.55; color: #90725b; pointer-events: none; }
.hint svg { width: 46px; height: 31px; flex: none; }
.hint-head { left: calc(50% - 560 * var(--k)); top: calc(315 * var(--k)); transform: rotate(-5deg); }
.hint-paw { left: calc(50% + 300 * var(--k)); top: calc(595 * var(--k)); transform: rotate(4deg); }
.hint-paw svg { transform: translateY(-14px); }
.hint-name .short { display: none; }
/* the name hint lives inside <em>coolby.</em>, so it follows the word whatever size the title is */
.hint-name { left: calc(100% + 16px); top: 30%; transform: rotate(-4deg); letter-spacing: normal; text-align: left; }
@media (max-width: 1280px) { .hint-name { font-size: 14px; } }
.hint-zzz { left: calc(50% + 400 * var(--k)); top: calc(295 * var(--k)); flex-direction: column; align-items: flex-start; gap: 2px; pointer-events: auto; cursor: pointer; border: 0; background: transparent; padding: 6px 10px; border-radius: 14px; transform: rotate(6deg); transition: background .2s; }
@media (hover: hover) { .hint-zzz:hover { background: #f0e1cd; } }
.hint-zzz .zzz { font: italic 600 30px var(--serif); color: #a17e60; letter-spacing: 1px; }
.hint-zzz .zzz-label { font: 11px var(--sans); letter-spacing: 1.5px; color: #947c67; }
.hint-zzz[aria-pressed="true"] .zzz { font-size: 24px; }
.hint-zzz .sun { width: 26px; height: 26px; display: block; color: #c9a25a; }

/* 握手: crossfade to a redrawn "paw up" frame (see tools/make_paw.py); the paw layer bobs on top */
.shake-rig { position: absolute; inset: 0; opacity: 0; transition: opacity .32s ease; pointer-events: none; }
.shake-rig img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; }
.shake-paw { transform-origin: 57% 71%; }   /* elbow */
.dog > img { transition: opacity .32s ease; }
.dog.shaking > img { opacity: 0; }
.dog.shaking .shake-rig { opacity: 1; }
.dog.shaking .shake-paw { animation: paw-bob 2s ease-in-out .35s both; }

@keyframes paw-bob {
  0%, 100% { transform: none; }
  22%, 66% { transform: translate(.3%, -1.4%) rotate(-4deg); }
  44%      { transform: translate(.1%, .3%) rotate(1deg); }
  85%      { transform: translate(.1%, .2%); }
}
@keyframes breathe { 50% { transform: translateY(-5px) scale(1.006); } }
@keyframes happy { 25% { transform: rotate(-3deg) translateY(-8px); } 75% { transform: rotate(3deg) translateY(-8px); } }
@keyframes snack { 50% { transform: translateY(5px) rotate(1deg); } }
@keyframes float-up { 0% { opacity: 0; transform: translateY(0) scale(.5); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-120px) rotate(15deg) scale(1.3); } }

@media (min-width: 1500px) {
  .hero-canvas { max-width: 1500px; margin-inline: auto; }
  .dog-stage { width: calc(670 * var(--k)); height: calc(670 * var(--k)); top: calc(160 * var(--k)); }
}
@media (max-width: 1000px) {
  .hero-canvas { --D: 770; }
  .hint { font-size: 15px; }
  /* narrow tablets: keep the hints inside the viewport */
  .hint-head { left: max(10px, calc(50% - 470 * var(--k))); top: calc(290 * var(--k)); }
  .hint-paw { left: min(calc(100% - 230px), calc(50% + 255 * var(--k))); top: calc(580 * var(--k)); }
  .hint-zzz { left: min(calc(100% - 150px), calc(50% + 330 * var(--k))); top: calc(270 * var(--k)); }
  .hint-name { left: auto; right: 0; top: calc(100% - 2px); text-align: right; transform: rotate(-3deg); } /* under the end of the word */
  .dog-stage { width: calc(575 * var(--k)); height: calc(575 * var(--k)); top: calc(135 * var(--k)); }
  .floor-shadow { bottom: 7%; }
}
@media (max-width: 700px) {
  /* Phones: a top-to-bottom stack instead of hints in the corners (which kept colliding with the
     ears). The canvas fills the hero; Coolby's size is whatever fits between the title (--T) and
     the hint strip at the bottom (--B), capped at 112vw, and he is centred in that space. */
  .page-home { min-height: 520px; }
  .hero-canvas { --T: 150px; --B: 76px; --S: min(120vw, 100cqh - var(--T) - var(--B)); --top: calc(var(--T) + (100cqh - var(--T) - var(--B) - var(--S)) / 2);
    top: 0; height: 100%; transform: none; }
  .hero h1 { font-size: min(16.5vw, 64px); margin-top: 30px; }
  .dog-stage { width: var(--S); height: var(--S); top: var(--top); }
  .floor-shadow { bottom: 1%; }
  .orbit-one { width: calc(var(--S) * .92); height: calc(var(--S) * .9); top: calc(var(--top) + var(--S) * .06); }
  .orbit-two { width: calc(var(--S) * .78); height: calc(var(--S) * 1.02); top: calc(var(--top) - var(--S) * .02); }

  /* the hint strip */
  .hint { font-size: 13px; gap: 4px; line-height: 1.5; white-space: nowrap; }
  .hint svg { display: none; } /* no arrows on phones */
  /* 摸摸頭: upper right of his head, the other side from the 叫我嗎？ bubble */
  .hint-head { left: auto; right: 18px; top: max(118px, calc(var(--top) - var(--S) * .02 - 22px)); text-align: right; transform: rotate(3deg); }
  /* bottom row under his paws: zzz on the left, 握手 on the right, level with each other */
  .hint-paw { left: auto; right: 18px; top: min(calc(var(--top) + var(--S) * .99 + 22px), calc(100% - 56px)); bottom: auto; flex-direction: column; align-items: flex-end; text-align: right; transform: rotate(3deg); }
  .hint-zzz { left: 10px; right: auto; top: min(calc(var(--top) + var(--S) * .99 + 16px), calc(100% - 66px)); bottom: auto; transform: rotate(-3deg); flex-direction: column; align-items: flex-start; gap: 0; padding: 6px 10px; white-space: nowrap; }
  .hint-zzz .zzz { font-size: 20px; }
  .hint-zzz .zzz-label { font-size: 10px; }
  .hint-zzz .sun { width: 20px; height: 20px; }

  /* name hint: one small line under "hello," */
  /* under "hello,": the hint is positioned on the h1 (em made static); "hello" starts 2.33 title
     font-sizes left of centre (Playfair italic, measured) */
  .hero h1 em { position: static; }
  .hint.hint-name { font-size: 14px; left: calc(50% - 2.33 * min(16.5vw, 64px) + 6px); right: auto; top: calc(100% + 2px); bottom: auto; transform: rotate(-3deg); }
  /* the name hint gets a short one-line label on phones */
  .hint-name .long { display: none; }
  .hint-name .short { display: inline; }

  /* 叫我嗎？ bubble: over the empty corner left of his head */
  .ask { left: max(0px, calc((var(--S) - 100vw) / 2 + 14px)); top: 2%; font-size: 14px; padding: 5px 13px 6px; } /* 14px in from the screen edge (the stage is wider than the screen) */
}
@media (prefers-reduced-motion: reduce) { .heart { opacity: 0; } .dog { transition: none; } .ask { animation-duration: .01s; } }