/*
  Homepage layout. Coordinates are carried over directly from the AxureRP
  export's files/index/styles.css so every element lands at the same pixel
  position and size as the original prototype. Where Axure recomputed a
  near-identical offset per nav item (a few px of drift from its own
  bounding-box math), the offsets are unified here as one rule reused by
  all three nav items, vertically centered instead of hard-coded per item.
*/

body {
  overflow: hidden;
  height: 100vh;
}

.hero {
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -501px;
  margin-top: -275px;
  width: 1202px;
  height: 750px;
}

/* The rail sits ON the outline's old centreline (206,147) — the pieces are 1px
   now, so there is no half-stroke to offset for.
   Opacity (0 at rest, animated to 0.5) comes from the shared .intro-animate
   rules in components.css. */
.rail {
  left: 206px;
  top: 147px;
  width: 1069px;
  height: 533px;
}

/* The home-page wordmark. Deliberately NOT called .logo -- components.css owns
   that name for the round client-logo badge on the case-study cards, and its
   border-radius/background/display would leak in here. */
.wordmark {
  position: absolute;
  left: 18px;
  top: 0;
  width: 844px;
  height: 136px;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 84px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(40px);
  /* See the failsafe note further down: the parking is unconditional, so
     something has to be able to undo it without JS. `intro-failsafe` is
     components.css's keyframe — they are global, and this is the same state. */
  animation: intro-failsafe 0.5s var(--ease-out-cubic) 2.5s forwards;
}
.wordmark .dim { color: rgba(255, 255, 255, 0.49); font-size: 95px; vertical-align: super; }
.wordmark .accent { color: var(--color-accent-dim); font-size: 95px; letter-spacing: -4.4px; vertical-align: super; }
.wordmark .name { color: var(--color-white); font-size: 106px; letter-spacing: 4.5px; }

.tagline {
  position: absolute;
  left: 217px;
  top: 117px;
  width: 632px;
  height: 34px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 27px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-40px);
  /* Its own keyframe, not the shared one: the tagline's settled state is not
     just visible, it is 315,450 — the end of the arc js/intro-timeline.js flies
     it along. A failsafe that only restored opacity would leave it parked at
     217,117, on top of the wordmark. */
  animation: tagline-failsafe 0.5s var(--ease-out-cubic) 2.5s forwards;
}

@keyframes tagline-failsafe {
  to { opacity: 1; transform: none; left: 315px; top: 450px; }
}

.tagline .accent { color: var(--color-accent); }

/* The entrance start state comes from .intro-panel in components.css, shared
   with the About page's overview block.

   ==========================================================================
   THE LEADING IS 30px, IT IS A LITERAL, AND IT MUST STAY ONE.
   ==========================================================================
   This is the source's own value — files/index/styles.css states
   `#u5 / #u24 / #u25 { font-size: 19px; line-height: 30px }`, and data.js
   confirms `lineSpacing: 30px` on all three widgets. The 209px boxes were drawn
   for it: six lines at 30 is 180, which sits inside 209 with room under the
   last item. At 22.5 the content is 135 and the columns float in their boxes.

   IT USED TO READ `var(--line-height-body)` AND THAT IS THE BUG. That token is
   base.css's SITE-WIDE reading voice — Axure's 30px body leading reduced 25% to
   22.5px, a decision about running prose on the About pages and the case
   studies. These three columns are not running prose; they are six one-word
   lines in a fixed box. Pointing them at the token meant every future
   adjustment to the site's body copy silently re-broke this page, which is
   exactly what kept happening. There is no longer any path from another page's
   stylesheet to this number.

   DO NOT re-tokenise this, and do not "tidy" it back to
   var(--line-height-body). If the site's body leading changes again, these
   columns must not move.

   The selector is `p.aspect`, not `.aspect`, on purpose. `.aspect` is (0,1,0),
   the same weight as a single-class rule in components.css — and components.css
   loads FIRST, so a future `.intro-panel { line-height: ... }` there would beat
   this by nothing more than file order. That trap has already cost this project
   once (see CLAUDE.md, "Equal specificity means file order decides"). The
   element selector makes it (0,1,1), which no single-class rule can reach. */
p.aspect {
  position: absolute;
  top: 213px;
  height: 209px;
  margin: 0;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 30px;
  white-space: nowrap;
}
.aspect .lead { color: rgba(255, 255, 255, 0.7); }
.aspect .colon { color: var(--color-accent); font-family: var(--font-body-black); font-weight: 900; }
.aspect .item { display: block; color: rgba(255, 255, 255, 0.39); }

.aspect-1 { left: 320px; width: 89px; }
.aspect-2 { left: 527px; width: 100px; }
.aspect-3 { left: 744px; width: 118px; }

.site-nav {
  --nav-spine: 187px;

  /* The group spans the whole hero, but the line belongs to the rail: it starts
     where the corner's arc ends (147 + 30.5) and runs to y=710, where the
     outline's leg used to — 40px short of the hero's 750.

     The .5 is the corner's own height, not a fudge — see .nav-line in
     components.css for why butting at 30.5 rather than 30 or 31. */
  --nav-line-top: 177.5px;
  --nav-line-bottom: 40px;
  position: absolute;
  left: 19px;
  width: 205px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The nav item lives in components.css and dresses itself. This page sets only
   where it goes. */
.nav-item {

  width: 205px;
  /* Entrance start state comes from .intro-animate .nav-item in components.css. */
}
.nav-about   { top: 197px; height: 62px; }
.nav-projects{ top: 276px; height: 57px; }
.nav-contact { top: 349px; height: 58px; }

/* Reduced-motion / no-JS fallback for the two pieces unique to this page. The
   nav items, the aspect columns and the outline are covered by the shared
   .intro-animate rules in components.css.

   NOTE: this used to target `.logo`, a leftover from before the home-page
   wordmark was renamed away from that class (components.css owns `.logo` for
   the round client badge — see CLAUDE.md). Nothing matched, so on a genuine
   reduced-motion or no-JS load the wordmark stayed at opacity 0 and the page
   opened with no name on it. */
/* Same arrangement as the shared .intro-animate rules in components.css, and
   for the same reason: `no-js` is in the markup, so using it to UNDO the
   parking made these two visible at first paint and then dropped them to
   nothing when the script removed the class. The parking stays unconditional
   and the fallback is a failsafe. */
html.no-motion .wordmark,
html.no-motion .tagline {
  opacity: 1;
  transform: none;
  animation: none;
}
html.no-motion .tagline {
  left: 315px;
  top: 450px;
}

html:not(.no-js) .wordmark,
html:not(.no-js) .tagline { animation: none; }

@media (scripting: none) {
  .wordmark, .tagline { opacity: 1; transform: none; animation: none; }
  .tagline { left: 315px; top: 450px; }
}