/* pages/home.css: the home page. */

/* The Drone Show (docs/ROUND2_DRONESHOW_SPEC.md 1.1): one stage pinned behind the hero and The Pack.
   Desktop: full-bleed, the swarm performs on the right while the content scrolls over the left.
   Phones: the stage is the top band and the content scrolls beneath it. */
.page-home {
  --sky-top: #FFFFFF;
  --sky-horizon: var(--mist);
}
[data-theme="dark"] .page-home {
  --sky-top: #060C26;
  --sky-horizon: #0B1640;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .page-home { --sky-top: #060C26; --sky-horizon: #0B1640; }
  :root:not([data-theme="light"]) .show-poster { background-image: url("/img/show/poster-night.webp"); }
}

/* The header floats over the sky on home. */
.page-home .site-header {
  position: absolute;
  inset: 0 0 auto;
  background: transparent;
}

/* Stage and content share one grid cell, so the sticky stage stays inside the show and never
   spills over the sections after it. */
.show { position: relative; display: grid; }
.show > .show-stage,
.show > .show-content { grid-area: 1 / 1; }

.show-stage {
  position: sticky;
  top: 0;
  z-index: 0;
  align-self: start;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--sky-top) 0%, var(--sky-top) 35%, var(--sky-horizon) 100%);
  opacity: var(--show-fade, 1);
}

.show-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}
.show-stage.is-live .show-canvas { opacity: 1; }
.show-canvas { touch-action: pan-y; }
.show-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: -8px; }

/* The one-time grab hint, placed under the yellow center by the show. */
.show-hint {
  position: absolute;
  top: var(--hint-y, 60%);
  left: var(--hint-x, 72%);
  z-index: 2;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--canvas);
  color: var(--text);
  box-shadow: var(--shadow-1);
  font: 600 15px/1.2 var(--font-body);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.show-hint.is-shown { opacity: 1; transform: translate(-50%, 0); }
.show-hint[hidden] { display: none; }

/* The poster: the Cycles render of the formed triskele, for no JavaScript, reduced motion or no WebGL. */
.show-poster {
  position: absolute;
  top: 50%;
  left: 72%;
  width: min(46vw, 76vh);
  aspect-ratio: 1;
  transform: translate(-50%, -48%);
  background: url("/img/show/poster-day.webp") center / contain no-repeat;
  /* Feather the render's square edge so its halo drones fade into the sky. */
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}
.show-poster::after {
  content: "";
  position: absolute;
  inset: auto 18% -6% 18%;
  height: 9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(11 22 64 / .14), rgb(11 22 64 / 0));
}
[data-theme="dark"] .show-poster { background-image: url("/img/show/poster-night.webp"); }
[data-theme="dark"] .show-poster::after { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .show-poster { display: none; }
  .js .show-fallback .show-poster { display: block; }
}

/* Pause motion / Play motion (WCAG 2.2.2): the stage's bottom-right corner. */
.show-pause {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s-5);
  z-index: 2;
  min-height: 44px;
  padding: 0 var(--s-5);
  border: 1.5px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--canvas);
  color: var(--text);
  font: 600 15px/1 var(--font-body);
  cursor: pointer;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.show-pause:hover { border-color: var(--text-2); }
.show-pause[aria-pressed="true"] { background: var(--tint); border-color: var(--link); }
.show-pause[hidden] { display: none; }

/* Content scrolls over the stage; only real content takes the pointer, so the swarm can feel it. */
.show-content {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.show-content .hero > *,
.show-content .pack-head-block,
.show-content .pack-panel { pointer-events: auto; }

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 46%;
  padding-block: 128px var(--s-8);
}
.hero-title { max-width: 9.5em; }
.hero-lead { margin-top: var(--s-6); max-width: 30em; }
.hero .button-row { margin-top: var(--s-7); }

.pack-section { max-width: 46%; }
.pack-head-block .lead { max-width: 30em; }

/* When the swarm draws each glyph beside the panels, the panels' static glyphs step aside. */
.show-live .pack-glyph { visibility: hidden; }

@media (max-width: 900px) {
  .show { display: block; }
  .show-stage {
    height: 46vh;
    height: 46svh;
    z-index: 2;
    box-shadow: 0 1px 0 var(--line);
  }
  .show-poster {
    left: 50%;
    top: 56%;
    width: min(80vw, 38svh);
  }
  .show-pause { bottom: var(--s-3); right: var(--s-4); }
  .page-home .site-header { position: relative; background: var(--sky-top); }
  .hero { min-height: 0; max-width: none; padding-block: var(--s-6) var(--s-8); }
  .pack-section { max-width: none; }
}

/* The Pack */
.pack-section { padding-block: var(--s-8) var(--s-7); }
.pack-section .pack-list { position: relative; }
/* From the lab follows The Pack inside the show, a step apart. */
.lab-section { padding-block: var(--s-6) var(--s-7); }

/* Services on home: a typographic list, not cards */
.home-service-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-7) var(--s-8);
  padding: 0;
  list-style: none;
}
.home-service-title { font-size: var(--h3-size); }
.home-service-title a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); text-decoration: none; }
.home-service-title a:hover { color: var(--link); text-decoration: underline; }
.home-service-summary { margin-top: var(--s-3); color: var(--text-2); }
.home-service-link { margin-top: var(--s-2); }

/* How we work strip */
.how-strip .how-list { margin-top: var(--s-6); }
.how-link { margin-top: var(--s-6); }

/* Contact band: the reversed blue field */
.contact-band {
  padding: var(--s-8) var(--s-7);
  border-radius: var(--r-xl);
  background: var(--accent-fill);
  color: var(--on-accent);
}
.contact-band-title { max-width: 12em; font-size: var(--h1-size); line-height: var(--h1-lh); }
.contact-band-body { margin-block: var(--s-5) var(--s-6); font-size: var(--lead-size); line-height: var(--lead-lh); }
.contact-band-body a { color: inherit; }
.button-on-blue { background: var(--on-accent); color: var(--accent-fill); }
.button-on-blue:hover { background: var(--canvas); color: var(--text); }
.button-outline-on-blue { background: transparent; border-color: currentColor; color: var(--on-accent); }
.button-outline-on-blue:hover { background: rgb(255 255 255 / .12); color: var(--on-accent); }

@media (max-width: 900px) {
  .home-service-list { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .contact-band { padding: var(--s-7) var(--s-5); }
}