/* ==========================================================================
   Maintenance hero (the animated scene Codex built)
   ==========================================================================

   The supplied hero.css carried global rules for body, h1 and nav, plus its
   own @import of Anton and Space Grotesk, plus the authoring panel's styles.
   None of that can come into a site that already has all three. What is
   kept is only the layout of the scene and the copy over it, every rule
   scoped under [data-maintenance-hero], and the type left to the site's own
   .ap-display / .ap-lead so the page matches the other five services.

   The canvas is decorative and aria-hidden; the headline, the lead and the
   buttons above it are ordinary accessible markup. */

.ap-maint-hero{
  position:relative; isolation:isolate; overflow:hidden;
  width:100%; min-height:0; height:100vh; height:100svh; max-height:100vh; padding:0;
}
/* behind the copy, and behind the site's own starfield canvas too */
.ap-maint-scene{position:absolute; inset:0; width:100%; height:100%; z-index:-1}

/* The scene's bright machine reaches into the copy column at wide
   viewports and the last line of the lead was sitting on top of it. A
   gradient veil over the left third fixes the reading without moving the
   composition, which the handoff asks to preserve. It sits above the
   canvas and below the text. */
.ap-maint-hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(3,5,9,.94) 0%, rgba(3,5,9,.9) 32%, rgba(3,5,9,.66) 46%,
    rgba(3,5,9,.28) 58%, transparent 72%);
}
.ap-maint-hero .ap-shell{position:relative; z-index:1; height:100%}
.ap-maint-copy{
  position:absolute; left:0; top:23%;
  width:min(39vw, 690px);
}
.ap-maint-copy .ap-lead{max-width:590px}

/* While the five images are still arriving the scene is empty, so the note
   says so rather than leaving a black rectangle unexplained. It disappears
   the moment the renderer sets data-ready. */
.ap-maint-hero .load-status{
  position:absolute; right:30px; bottom:20px; z-index:1;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:rgba(238,240,246,.4);
  transition:opacity .4s ease;
}
.ap-maint-hero[data-ready="true"] .load-status{opacity:0}

@media (min-width:1800px){ .ap-maint-copy{top:22%} }

/* Keep mobile within one viewport, with compact copy above the scene. */
@media (max-width:800px){
  .ap-maint-hero{height:100vh; height:100svh; min-height:0; max-height:100vh; padding:0;}
  .ap-maint-copy{position:relative; top:0; padding-top:96px; width:100%}
  /* stacked, the copy has the top of the scene to itself */
  .ap-maint-hero::before{
    background:linear-gradient(180deg,
      rgba(3,5,9,.92) 0%, rgba(3,5,9,.8) 34%, transparent 58%);
  }
  .ap-maint-copy .ap-lead{max-width:490px; font-size:14px; line-height:1.5; margin-top:18px}
  .ap-maint-copy .ap-display{font-size:clamp(32px,8vw,56px); line-height:1.05}
  .ap-maint-copy .ap-buttons{margin-top:18px; gap:10px}
  .ap-maint-copy .ap-btn{padding:12px 14px; font-size:10px}
  .ap-maint-copy .ap-eyebrow{font-size:9px; letter-spacing:.12em}
}

@media (prefers-reduced-motion:reduce){
  /* the renderer already paints one static frame; nothing here should move */
  .ap-maint-hero .load-status{transition:none}
}

/* ---------------- the planet, as a layer of its own ----------------
   It used to be drawn into the canvas on every frame. As CSS it paints
   once, costs nothing to keep on screen, and shows up without waiting for
   the renderer. The entrance matches .ap-brand-hero-bg: zoomed in and
   blurred, settling to sharp and at rest. */
.ap-maint-bg{
  position:absolute; inset:0; z-index:-2;
  /* the plate is 1536x1024; the renderer covered a 1920x1080 box with it
     (width fills, 7.8% cropped off each of top and bottom) and stretched
     that box to the hero. 100% wide by 1080/1280 overscale, centred, is
     the same framing. */
  background-size:100% 118.52%; background-position:center;
  transform:scale(1.12);
  filter:blur(26px);
  animation:apMaintBgIn 1.6s cubic-bezier(.19,.82,.22,1) forwards;
}
@keyframes apMaintBgIn{
  from{transform:scale(1.12); filter:blur(26px)}
  to{transform:scale(1); filter:blur(0)}
}

/* The canvas now carries only the character, over a transparent ground,
   and fades up as the figure slides in. */
.ap-maint-scene{
  opacity:0;
  transition:opacity .5s ease;
}
.ap-maint-hero[data-ready="true"] .ap-maint-scene{opacity:1}

@media (prefers-reduced-motion: reduce){
  .ap-maint-bg{animation:none; transform:none; filter:none}
  .ap-maint-scene{transition:none}
}

/* ----------------------------------------------------------------------
   The phone hero, matching the other five.
   This sheet loads after service.css, so the shared phone block there
   cannot reach these: .ap-shell at height:100% made the copy box fill the
   screen and left the scene nowhere to sit, and the type here was two or
   three steps under every other hero's.
   ---------------------------------------------------------------------- */
@media (max-width:760px){
  .ap-maint-hero{height:100svh; max-height:none}
  .ap-maint-hero .ap-shell{height:auto; min-height:0; padding-bottom:18px}
  /* .ap-svc-hero .ap-shell already pads the copy off the bar; this one was
     adding its own 104px on top, which is the gap between the header and the
     headline that had no business being there */
  .ap-maint-copy{position:relative; top:0; padding-top:0; width:100%}
  .ap-maint-copy .ap-display{font-size:clamp(42px,12vw,62px); line-height:1.02}
  .ap-maint-copy .ap-lead{max-width:100%; font-size:14.5px; line-height:1.55; margin-top:14px}
  .ap-maint-copy .ap-buttons{margin-top:20px; gap:10px}
  .ap-maint-copy .ap-btn{padding:13px 13px; font-size:11.5px; letter-spacing:.06em}
  /* The portrait render puts the lit machine higher than the old scene did,
     and at 360px the lead wraps one line further down onto it: measured 1.98:1
     against the glowing rim, where every other hero sits above 10:1. The scrim
     reaches further down and holds longer to cover it. */
  .ap-maint-hero::before{
    z-index:1;
    background:linear-gradient(180deg,
      rgba(3,5,9,.94) 0%, rgba(3,5,9,.9) 38%, rgba(3,5,9,.72) 52%,
      rgba(3,5,9,.34) 64%, rgba(3,5,9,.08) 76%, transparent 86%);
  }
}