/* =========================================================
   HOME HERO — scroll-driven letters
   Everything is namespaced "hx-" so it can't touch the rest of the site.
   Used only by index.html.
========================================================= */
:root{ --hx-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

/* Tall scroller; .hx-pin stays stuck while the line of letters is scrubbed by scroll.
   The height below is only a first guess - hero-scroll.js sets the exact value. */
.hx-scroller{ position:relative; height:calc(100vh + 230vh); height:calc(100svh + 230vh); }
.hx-pin{
  position:sticky; top:0;
  height:100vh; height:100svh;
  padding-top:var(--hx-nav,78px);            /* the nav is position:fixed, so reserve its height here */
  display:flex; flex-direction:column;
  overflow:hidden;                            /* trims letters at the left/right screen edge only */
}
.hx-wrap{ flex:1; display:flex; flex-direction:column; width:100%; min-height:0; }
.hx-mid{ flex:1; display:flex; flex-direction:column; justify-content:center; position:relative; min-height:0; }  /* eyebrow + headline sit centred between nav and buttons */
.hx-low{ padding-bottom:clamp(22px,4.5vh,52px); }

.hx-eyebrow{
  display:flex; align-items:center; gap:14px;
  margin:0 0 clamp(14px,2vw,22px);
  font:700 12px/1 var(--hx-mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-soft);
}
.hx-eyebrow i{ display:block; width:28px; height:1px; background:currentColor; opacity:.5; }
/* the page has a global font-family !important on span/p/div, so the mono label needs its own */
.hx-eyebrow, .hx-eyebrow span, .hx-cue, .hx-cue span{ font-family:var(--hx-mono) !important; }

.hx-h1{
  margin:0; position:relative;
  font-size:clamp(44px,8.4vw,96px);           /* hero-scroll.js fits the exact size so the headline never overflows */
  line-height:1.06; letter-spacing:-.045em; font-weight:700; color:var(--ink);
}
.hx-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }  /* real text for screen readers / search engines */

/* full-width window, NOT a mask: letters fly in free from the right screen edge */
.hx-stage{ display:block; position:relative; left:50%; width:100vw; margin-left:-50vw; height:1.34em; }
.hx-track{ position:absolute; left:0; top:.1em; white-space:nowrap; isolation:isolate; will-change:transform; transform:translate3d(60vw,0,0); }
.hx-wd{ display:inline-block; white-space:nowrap; }
.hx-sp{ display:inline-block; width:.26em; }
.hx-ch{ display:inline-block; will-change:transform; transform-origin:50% 60%; transition:opacity .5s ease; }
.hx-sep{ display:inline-block; margin:0 .42em; color:var(--neon); font-weight:500; }

/* final headline: "Craft Meets Clarity." */
.hx-fin{ display:inline-block; vertical-align:top; white-space:nowrap; }
.hx-u{ position:relative; display:inline-block; }
.hx-u::after{
  content:""; position:absolute; top:.1em; bottom:-.06em; left:-.07em; right:-.05em;
  background:#000; z-index:-1; border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .7s var(--ease-io,cubic-bezier(.76,0,.24,1)) .1s;
}
.hx-u .hx-ch{ transition:color .3s ease .45s, opacity .5s ease; }
.hx-landed .hx-ch:not(.hx-fl){ opacity:0; }   /* words scrolled past fade away, only the headline remains */
.hx-landed .hx-u::after{ transform:scaleX(1); }
.hx-landed .hx-u .hx-ch{ color:var(--neon); }

.hx-cue{
  position:absolute; left:0; bottom:clamp(14px,4vh,36px);
  display:flex; align-items:center; gap:10px;
  font:500 11px/1 var(--hx-mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-faint); transition:opacity .3s;
}
.hx-cue span{ display:inline-block; animation:hxNudge 1.6s ease-in-out infinite; }
@keyframes hxNudge{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }

.hx-btns{ display:flex; gap:14px; flex-wrap:wrap; }

/* the intro paragraph now follows right under the buttons */
.hx-scroller + section{ padding-top:clamp(28px,4vw,56px); }

@media (max-width:600px){
  .hx-h1{ font-size:clamp(44px,13vw,60px); }
  .hx-fin{ white-space:normal; width:calc(100vw - 2 * var(--gutter)); }   /* final headline wraps: "Craft Meets" / "Clarity." */
}
@media (max-height:640px){ .hx-low{ padding-bottom:16px; } }
@media (prefers-reduced-motion:reduce){
  .hx-cue span{ animation:none; }
  .hx-ch, .hx-u::after, .hx-u .hx-ch{ transition-duration:.01ms !important; transition-delay:0s !important; }
}