/* Enter-screen intro — frame wipe -> signature draws -> masthead and
   gradient boxes reveal. Layered on top of home.css; none of home.css's
   layout values are changed here.

   Render-blocking <link> means this is already applied on first paint, so
   the "masthead/boxes start at opacity 0" rule below never flashes visible
   before intro.js gets a chance to run. */

/* Screen-reader-only. Also defined in home.css so the <h1> never depends on
   this stylesheet loading; kept here for the elements that do. */
.home-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Signature ────────────────────────────────────────────────────────── */
.home-sig-wrap[hidden] { display: none; }
.home-sig-wrap .sig {
  width: min(100%, 420px);
  height: auto;
  display: block;
  overflow: visible;
}
.home-sig-wrap .sig path {
  fill: none;
  stroke: url(#home-siggrad);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
.home-sig-wrap .sig .s1 { stroke-width: 12; }
.home-sig-wrap .sig .s2 { stroke-width: 9.5; }
.home-sig-wrap .sig .s3 { stroke-width: 5; }
.home-sig-wrap .sig circle {
  fill: url(#home-siggrad);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.home-sig-wrap.signed .sig path {
  animation: home-sign var(--dur, 1s) cubic-bezier(.52, .04, .30, 1) forwards;
  animation-delay: var(--delay, 0s);
}
.home-sig-wrap.signed .sig circle {
  animation: home-inkdot .26s cubic-bezier(.2, 1.4, .4, 1) forwards;
  animation-delay: var(--delay, 0s);
}
/* Final drawn-on state applied with no animation — used both when a session
   has already played the intro once, and when an interaction skips it. */
.home-sig-wrap.static .sig path { stroke-dashoffset: 0; }
.home-sig-wrap.static .sig circle { opacity: 1; }

@keyframes home-sign { to { stroke-dashoffset: 0; } }
@keyframes home-inkdot { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }

/* ── Masthead + boxes reveal ───────────────────────────────────────────
   Default state is invisible so there is nothing to fade out on a fresh
   load — only `.intro-done` (JS, end of sequence or a skip) or `.no-intro`
   (repeat visit within the session, applied synchronously before paint)
   turns it on. */
.home-masthead,
.home-box {
  opacity: 0;
}

.home-box {
  /* Paired with the transform in the revealed state below — the boxes snap
     in rather than fade, which is what makes them read as plates being
     placed rather than a page loading. */
  transform: scale(.96);
}

body.intro-done .home-masthead {
  opacity: 1;
  transition: opacity .6s ease;
}

body.intro-done .home-box {
  opacity: 1;
  transform: scale(1);
  transition: opacity .45s var(--ease-out, cubic-bezier(.2,.7,.3,1)),
              transform .45s var(--ease-out, cubic-bezier(.2,.7,.3,1));
}

/* Stagger: 2.3 / 2.4 / 2.5s absolute, expressed as delays from the moment
   .intro-done lands (which JS schedules at 2.3s). */
body.intro-done .home-box:nth-child(1) { transition-delay: 0s; }
body.intro-done .home-box:nth-child(2) { transition-delay: .1s; }
body.intro-done .home-box:nth-child(3) { transition-delay: .2s; }

/* The rest of the resting state for a repeat-within-session visit — intro.js
   never runs at all in this case (see the top of that file), so unlike the
   skip path (which is JS setting classes) this has to be pure CSS.
   Mirrors the <noscript> block in index.html. */
html.no-intro .home-masthead,
html.no-intro .home-box {
  opacity: 1;
  transform: none;
  transition: none;
}
html.no-intro .home-sig-wrap {
  display: block;
}
html.no-intro .home-sig-wrap .sig path {
  stroke-dashoffset: 0;
}
html.no-intro .home-sig-wrap .sig circle {
  opacity: 1;
}

/* ── Reduced motion ────────────────────────────────────────────────────
   intro.js already lands straight on the resting state under this query;
   these rules make sure nothing animates even if it is reached by another
   path (a skip mid-sequence, or CSS applying before the script runs). */
@media (prefers-reduced-motion: reduce) {
  .home-sig-wrap.signed .sig path,
  .home-sig-wrap.signed .sig circle {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .home-masthead,
  .home-box {
    opacity: 1;
    transform: none;
    transition: none;
  }
}