/* The homepage's backdrop (.home-space) lives in its own file so /sales can use it without the rest of the scene. */
@import url('home-space.css');
/* Three actual planes: stationary space, slow cast, normally scrolling content. */
html { overflow-x: clip; }
body { isolation: isolate; }
/* The cast: Nate's Bunnybats, each one once (images/home-scene/cast/), drifting from the top of the
   page to the bottom slower than the page. assets/home-scene.js places them, sizes the layer
   (--cast-w, --cast-h) and moves it (--cast-y). */
.home-cast-viewport { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.home-cast {
  position: absolute; left: 50%; top: 65px; width: var(--cast-w, 100vw); height: var(--cast-h, 100vh);
  transform: translate3d(-50%,var(--cast-y,0px),0); will-change: transform; pointer-events: none;
}
.home-cast-tile { position: absolute; inset: 0; }
.home-cast .cast-bat { position: absolute; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* Castle Unity's key on phones and tablets: beside the pink-tentacled Bunnybat, placed by
   assets/home-scene.js. */
@media (max-width:899px) {
  .home-cast { top: 56px; }
}
/* Castle Unity's key on wide screens: the big yellow key painted in the backdrop, mid-top left
   (443,131 to 469,183 of the 2200 x 1042 collage). A layer the size and place of the backdrop's
   cover box carries the link, so it stays on that key at any window size. Phones see only the
   collage's dark centre, so there the key stays among the Bunnybats above. */
.home-space-keys { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; container-type: size; display: none; }
.home-space-map {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 211.13vh); width: max(100cqw, 211.13cqh);
  aspect-ratio: 2200 / 1042;
  transform: translate(-50%, -50%);
}
.castle-key-backdrop {
  position: absolute; left: 20.14%; top: 12.57%; width: 1.18%; height: 4.99%;
  pointer-events: auto; cursor: pointer; border-radius: 6px;
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}
.castle-key-backdrop:hover { background: rgba(243, 210, 122, 0.12); box-shadow: 0 0 14px 4px rgba(243, 210, 122, 0.45); }
.castle-key-backdrop:focus-visible { outline: 2px solid var(--accent-gold, #f3d27a); outline-offset: 3px; }
@media (min-width:900px) {
  .home-space-keys { display: block; }
  .home-cast .castle-key-hotspot { display: none; }
}
body .container { pointer-events: none; }
.container a, .container button, .container input, .container select { pointer-events: auto; }
.container .count, .container .meet, .container .about, .container footer { pointer-events: auto; }
body .hero { min-height: 720px; align-items: start; position: relative; padding-top: 45px; }
body .hero-art-wrap { width: 100%; max-width: 715px; margin: 0; align-self: start; }
.home-logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); }
body .hero-mark { display: none; }
body .hero-actions { align-self: start; margin-top: 330px; filter: drop-shadow(0 4px 12px #070318); }
body .count { padding: 28px 20px; border-radius: 24px; background: rgba(9,7,28,.78); backdrop-filter: blur(8px); }
/* The count's box holds the Full Gallery strip too (one box). */
body .count .meet { padding: 0; background: none; border-radius: 0; }
body .about, body footer { background: rgba(9,7,28,.84); backdrop-filter: blur(8px); border-radius: 24px; }
/* The links-and-conservation box hugs its text like the about box above it (not the full page width). */
body footer { width: fit-content; max-width: 100%; box-sizing: border-box; margin-left: auto; margin-right: auto; padding: 20px 24px; }
body footer .footer-links { margin-bottom: 0.9rem; }
body .meet-title { margin: 1.4rem 0 0; }
body .count .hero-subtitle { margin: 1.5rem 0 0; }
body .meet-gallery-link { display: inline-flex; align-items: center; gap: .5rem; padding: .28rem .58rem .28rem .38rem; border: 2px solid #2ec8f2; border-radius: 11px; background: linear-gradient(135deg, #d9f439 0%, #b8ec27 58%, #ffe24a 100%); box-shadow: 0 4px 0 #f04b3e, 0 7px 15px rgba(0,0,0,.25); color: #111; font-family: var(--font-display); text-align: left; text-shadow: .5px .5px 0 rgba(255,255,255,.7); transition: transform .16s ease, filter .16s ease; }
body .meet-gallery-link:hover { color: #000; filter: saturate(1.12) brightness(1.04); transform: translateY(-1px); }
body .meet-gallery-link img { display: block; width: clamp(54px, 7vw, 76px); height: auto; }
body .meet-gallery-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
body .meet-gallery-name { color: #111; font-size: clamp(.72rem, 1.3vw, .95rem); letter-spacing: .025em; text-transform: uppercase; }
body .meet-gallery-cue { align-self: flex-end; margin-top: .2rem; color: #000; font-family: var(--font-body); font-size: .48rem; font-weight: 700; letter-spacing: .01em; text-transform: none; white-space: nowrap; }
body .meet-gallery-cue span { display: inline-block; margin-left: .14rem; font-size: .65rem; line-height: .5; transition: transform .16s ease; }
body .meet-gallery-link:hover .meet-gallery-cue span { transform: translateX(2px); }
body .site-nav-wordmark { display: block; width: clamp(132px, 15vw, 190px); height: auto; object-fit: contain; }
@media (min-width:900px) { body .count { padding-inline: 2rem; } }
@media (min-width:900px) {
  body .hero { grid-template-columns: minmax(0,715px) minmax(0,1fr); grid-template-rows: 1fr; grid-template-areas: 'art actions'; column-gap: 1rem; }
  body .hero-art-wrap { align-self: center; }
}
@media (max-width:899px) {
  body .hero { display: flex; flex-direction: column; min-height: 900px; padding-top: 15px; }
  body .hero-art-wrap { flex: none; width: 95%; max-width: 525px; margin: 0 auto; align-self: center; }
  body .hero-actions { margin: 30px auto 0; align-self: center; }
  body .meet-gallery-link { gap: .42rem; }
}
@media (max-width:540px) {
  body .hero { min-height: 1050px; }
  body .hero-actions { margin-top: 12px; }
  body .count { padding-left: 12px; padding-right: 12px; }
  /* The swipeable strip reaches the box's edges, not past them. */
  body .count .meet-track { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; scroll-padding: 0 12px; }
}
@media (max-width:480px) {
  body .site-nav-wordmark { display: none; }
}
/* Reduced motion: the cast holds still behind the page. */
@media (prefers-reduced-motion:reduce) {
  .home-cast { transform: translateX(-50%); will-change: auto; }
}