/* A clipped title suggests the next section on desktop and mobile. */
.scene-stick > .scene-peek {
  --peek-visible: 42px;
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: var(--peek-top, calc(100svh - 42px));
  bottom: auto;
  height: var(--peek-visible);
  overflow: hidden;
  border: 0;
  border-top: 1px solid #2d4964;
  border-radius: 0;
  background: #050d20;
  box-shadow: 0 -4px 16px #00122540, 0 -1px 0 #2d4964;
  pointer-events: none;
  opacity: var(--peek-opacity, 1);
  transform: translateY(var(--peek-offset, 0px)) !important;
  will-change: opacity, transform;
}
.scene-stick > .scene-peek::after {
  content: '';
  position: absolute;
  inset: 0;
  background: none;
  pointer-events: none;
}
.scene-peek-title {
  display: block;
  position: absolute;
  top: 24px;
  left: max(56px, calc((100% - 1560px) / 2));
  right: max(56px, calc((100% - 1560px) / 2));
  color: #f3f7ff;
  font-size: 32px;
  font-weight: 700;
  line-height: 42px;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.motion-toggle { bottom: 72px; }
@media (max-width: 1100px) {
  .scene-peek-title { left: 36px; right: 36px; }
}
@media (max-width: 760px) {
  .motion-toggle { bottom: calc(130px + env(safe-area-inset-bottom)); }
  .motion-ready .scene-copy { bottom: calc(190px + env(safe-area-inset-bottom)); }
  .scene-stick > .scene-peek {
    /* Halve the visible blank space above the glyphs: 32px to 16px. */
    --peek-visible: 26px;
    height: var(--peek-visible);
    background: #050d20;
    border-top-color: #2d4964;
    box-shadow: 0 -4px 16px #00122540, 0 -1px 0 #2d4964;
  }
  .scene-peek-title {
    display: block;
    position: absolute;
    top: 9px;
    left: 20px;
    right: 20px;
    color: #f3f7ff;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -.045em;
    white-space: nowrap;
  }
}
@media (max-width: 380px) {
  .scene-peek-title { left: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .scene-stick > .scene-peek { transform: none !important; will-change: opacity; }
}
@media print { .scene-stick > .scene-peek { display: none !important; } }

/* Match the approved phone composition, including on taller screens. */
@media (max-width: 760px) {
  .header .brand { font-size: clamp(20px, 6vw, 26px); }
}
@media (max-width: 760px) and (min-height: 521px) {
  .scene-cosmos img {
    height: var(--sunrise-height, 100%);
    object-position: var(--sunrise-x, 61%) 0%;
  }
  .hero-copy h1, body:not(.motion-ready) .hero-copy h1 {
    font-size: clamp(29px, 9.2vw, 39.5px);
    line-height: 1.35;
  }
  .hero-copy p, body:not(.motion-ready) .hero-copy p {
    font-size: clamp(16px, 5vw, 21px);
    line-height: 1.8;
  }
  .hero-copy .button {
    min-width: clamp(126px, 39.375vw, 170px);
    min-height: clamp(50px, 15.625vw, 64px);
    font-size: clamp(15px, 4.7vw, 20px);
  }
}

/* Keep the static hero's controls above the fixed mobile controls as well. */
@media (max-width: 760px) {
  body:not(.motion-ready) .scene-stick {
    grid-template-rows: minmax(0, 100svh) minmax(560px, 82svh);
  }
  body:not(.motion-ready) .scene-copy.hero-copy {
    align-self: end;
    padding-top: calc(var(--header) + 24px);
    padding-bottom: calc(190px + env(safe-area-inset-bottom));
  }
}

/* A landscape phone must leave room below the header for the full heading. */
@media (max-height: 520px) {
  .scene-copy h1, .scene-copy h2,
  body:not(.motion-ready) .scene-copy h1,
  body:not(.motion-ready) .scene-copy h2 {
    font-size: 28px;
    line-height: 1.2;
  }
  .scene-copy p, body:not(.motion-ready) .scene-copy p {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 12px;
  }
  .scene-copy .actions { margin-top: 18px; }
  .scene-copy .button { min-height: 44px; padding: 10px 20px; font-size: 15px; }
  body:not(.motion-ready) .scene-stick {
    grid-template-rows: minmax(0, 100svh) minmax(390px, 82svh);
  }
  body:not(.motion-ready) .scene-copy.hero-copy {
    align-self: center;
    padding-top: var(--header);
    padding-bottom: 42px;
  }
}

/* Compact landscape phones keep all copy below the header and above the cue. */
@media (max-width: 760px) and (max-height: 520px) {
  .motion-ready .scene-copy {
    top: calc(var(--header) + 16px) !important;
    bottom: auto !important;
  }
  .scene-copy h1, .scene-copy h2,
  body:not(.motion-ready) .scene-copy h1,
  body:not(.motion-ready) .scene-copy h2 {
    font-size: 22px;
    line-height: 1.16;
  }
  .scene-copy p, body:not(.motion-ready) .scene-copy p {
    font-size: 14px;
    line-height: 1.4;
    margin-top: 8px;
  }
  .scene-copy .actions { margin-top: 12px; }
  .scene-copy .button { min-height: 44px; }
  body:not(.motion-ready) .scene-copy.hero-copy {
    align-self: start;
    padding-top: calc(var(--header) + 16px);
    padding-bottom: 134px;
  }
}