/* ===================================================================
   llamacoids-hero.css — the hero, tightened
   2026-10-07. Additive. The engraved headline, the grid, the glow and
   the corner marks are untouched; this closes the dead space the SVG
   was reserving and gives the three text blocks a settled entrance.
   =================================================================== */

/* The stage's viewBox was 1080x360 but the two lines of type end at
   about y=250, so roughly 30% of the box was empty and pushed the
   paragraph a long way down the page. The box is retuned in the
   markup; this keeps the stage from stretching on wide screens. */
.engrave-stage { max-width: 1040px; margin-inline-start: -4px; }

.hero { padding: 88px 0 104px; }
.hero-sub { margin-top: 26px; }
.hero-cta { margin-top: 34px; }

/* A settled entrance. The headline engraves itself, so the three
   supporting blocks should arrive rather than appear. */
@media (prefers-reduced-motion: no-preference) {
  .hero-kicker, .hero-sub, .hero-cta {
    opacity: 0;
    transform: translateY(10px);
    animation: llmHeroIn .7s cubic-bezier(.2,.75,.25,1) forwards;
  }
  .hero-kicker { animation-delay: .10s; }
  .hero-sub    { animation-delay: 1.15s; }   /* as the first line finishes */
  .hero-cta    { animation-delay: 1.32s; }
}
@keyframes llmHeroIn {
  to { opacity: 1; transform: none; }
}

/* the swap from engraved outline to solid fill, eased rather than cut */
.engrave-fill { transition: opacity .5s cubic-bezier(.3,.7,.3,1); }
.engrave-text { transition: opacity .32s ease .06s; }

/* the laser head should not jitter on sub-pixel moves */
.laser-head { will-change: transform; }
#llm-sparks circle { will-change: transform, opacity; }

/* primary CTA: a little more presence, same shape and palette */
.llm-site a.llm-btn-primary { transition: background .22s ease, color .22s ease, transform .22s ease; }
.llm-site a.llm-btn-primary:hover { transform: translateY(-1px); }
.llm-btn .arrow { transition: transform .22s ease; }
.llm-btn:hover .arrow { transform: translateX(3px); }

@media (max-width: 760px) {
  .hero { padding: 56px 0 68px; }
  .hero-sub { margin-top: 22px; }
}

/* -------------------------------------------------------------------
   The reveal is now a clip sweep driven by hero-engrave.js, not a
   stroke-dash trick, so the solid type is always "on" and the clip
   decides how much of it you can see. The outline is what has not
   been cut yet.
   ------------------------------------------------------------------- */
/* NOTE on specificity: the homepage's own rules live in a <style> block
   inside the body, so they come after this file and win any tie. These
   selectors are deliberately id-qualified to sit above them. */
#llm-stage .engrave-fill { opacity: 1; }
#llm-stage .engrave-text { opacity: .26; transition: opacity .45s ease; }
#llm-stage.done .engrave-fill { opacity: 1; }
#llm-stage.done .engrave-text { opacity: 0; }

/* a hairline warmth where the beam has just passed */
#llm-stage:not(.done) .engrave-fill { filter: drop-shadow(0 0 10px rgba(255,120,60,.16)); }
#llm-stage.done .engrave-fill { filter: none; transition: filter .5s ease; }