/* Focus — hero section. All rules are scoped to .fh so they don't leak into the rest of the site. */
body { margin: 0; background: #070708; }

.fh {
  --ground: #070708;
  --ink: #ECEAE4;
  --muted: #9E9B92;
  --line: rgba(236,234,228,0.16);
  --faint: rgba(236,234,228,0.06);
  --accent: #C8A464;
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 760px;
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
}
.fh *, .fh *::before, .fh *::after { box-sizing: border-box; }
.fh a { color: inherit; }
.fh a:hover { opacity: .7; }
.fh button:focus-visible, .fh a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---------- space ---------- */
.fh-space { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fh-galaxy { position: absolute; inset: -70px; background: url(assets/galaxy.jpg) center/cover no-repeat; transform: scale(1.04); transition: transform 1.8s cubic-bezier(.2,.7,.2,1), opacity 1.4s; }
.fh-starlayer { position: absolute; inset: -90px; transition: transform 1.4s cubic-bezier(.2,.7,.2,1); }
.fh-star { position: absolute; left: 0; top: 0; width: 1px; height: 1px; border-radius: 50%; background: transparent; }
.fh-star-lg { width: 2px; height: 2px; }
.fh-twinkle { animation: fh-twinkle 5s ease-in-out infinite; }
@keyframes fh-twinkle { 0%,100% { opacity: 1 } 50% { opacity: .45 } }

/* ---------- globe ---------- */
.fh-globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; touch-action: pan-y; opacity: 0; transition: opacity 1.8s ease; }
.fh.is-ready .fh-globe { opacity: 1; }

/* ---------- decoration layer ---------- */
.fh-deco { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fh-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,7,8,.78) 0%, rgba(7,7,8,.45) 34%, rgba(7,7,8,0) 58%); }

.fh-nw { position: absolute; will-change: transform, opacity; transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .7s, filter .7s; }
.fh.is-focusing .fh-nw { transition: transform 1.8s cubic-bezier(.2,.7,.2,1), opacity 1.3s, filter 1.3s; }
.fh-n { display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; color: var(--ink); opacity: 0; animation-name: fh-dissolve; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
.fh-n1 { font-size: 13px; --o: .32; }
.fh-n2 { font-size: 12px; --o: .22; filter: blur(.6px); }
.fh-n3 { font-size: 11px; --o: .14; filter: blur(1.2px); }
@keyframes fh-dissolve {
  0% { opacity: 0; transform: translateY(8px); filter: blur(2px) }
  18% { opacity: var(--o); transform: translateY(0); filter: blur(0) }
  62% { opacity: var(--o); transform: translateY(-6px); filter: blur(0) }
  100% { opacity: 0; transform: translateY(-22px); filter: blur(6px); letter-spacing: .12em }
}

.fh-gc { position: absolute; left: 66%; top: 50%; width: 0; height: 0; transition: transform .7s cubic-bezier(.2,.7,.2,1), opacity .6s; }
.fh-gc > * { position: absolute; left: 0; top: 0; transform: translate(-50%,-50%); }
.fh-ring-outer { border-radius: 50%; border: 1px solid var(--faint); }
.fh-ring { border-radius: 50%; border: 1px solid var(--line); }
.fh-breathe { animation: fh-breathe 9s ease-in-out infinite; }
@keyframes fh-breathe { 0%,100% { transform: translate(-50%,-50%) scale(1) } 50% { transform: translate(-50%,-50%) scale(1.025) } }
.fh-progress { transform: translate(-50%,-50%) rotate(-90deg) !important; overflow: visible; opacity: 0; transition: opacity 1.2s; }
.fh-progress circle { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1s linear; }
.fh.is-focusing .fh-progress { opacity: 1; }
.fh-orbitwrap { transition: transform 1s linear; }
.fh-orbit { animation: fh-orbit 40s linear infinite; }
@keyframes fh-orbit { to { transform: translate(-50%,-50%) rotate(360deg) } }
.fh-orbit-dot { position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--accent); }

.fh-att { position: absolute; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; white-space: nowrap; color: var(--ink); opacity: 0; }
.fh-att.fh-attA { animation: fh-attA 2.8s cubic-bezier(.2,.7,.2,1) forwards; }
.fh-att.fh-attB { animation: fh-attB 2.8s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes fh-attA { 0% { opacity: 0; transform: translate(-50%,-20%); filter: blur(4px) } 15% { opacity: .85; transform: translate(-50%,-50%); filter: blur(0) } 55% { opacity: .6; transform: translate(-50%,-50%); filter: blur(0) } 100% { opacity: 0; transform: translate(-50%,-110%); filter: blur(8px) } }
@keyframes fh-attB { 0% { opacity: 0; transform: translate(-50%,-20%); filter: blur(4px) } 15% { opacity: .85; transform: translate(-50%,-50%); filter: blur(0) } 55% { opacity: .6; transform: translate(-50%,-50%); filter: blur(0) } 100% { opacity: 0; transform: translate(-50%,-110%); filter: blur(8px) } }
.fh-st { position: absolute; left: -4px; right: -4px; top: 52%; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.fh-attA .fh-st { animation: fh-stA 2.8s ease-in-out forwards; }
.fh-attB .fh-st { animation: fh-stB 2.8s ease-in-out forwards; }
@keyframes fh-stA { 0%,22% { transform: scaleX(0) } 42%,100% { transform: scaleX(1) } }
@keyframes fh-stB { 0%,22% { transform: scaleX(0) } 42%,100% { transform: scaleX(1) } }

.fh-lens { position: absolute; left: 0; top: 0; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; border: 1px solid var(--line); opacity: 0; transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.fh-lens::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--accent); }

/* ---------- chrome ---------- */
.fh-chrome { position: relative; z-index: 2; pointer-events: none; transition: opacity 1.2s; }
.fh-chrome a, .fh-chrome button, .fh-col { pointer-events: auto; }
.fh.is-focusing .fh-header, .fh.is-focusing .fh-footer { opacity: .3; }

.fh-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px clamp(20px, 4vw, 56px); }
.fh-logo { font-family: 'Instrument Serif', Georgia, serif; font-size: 30px; line-height: 1; text-decoration: none; letter-spacing: -0.01em; }
.fh-logo span { color: var(--accent); }
.fh-nav { display: flex; gap: 36px; font-size: 14px; }
.fh-nav a { text-decoration: none; color: var(--muted); }
.fh-btn-outline { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1px solid var(--line); border-radius: 2px; font-size: 14px; text-decoration: none; }

.fh-main { flex: 1; display: flex; align-items: center; padding: 0 clamp(20px, 6vw, 104px) 40px; }
.fh-col { display: grid; width: min(640px, 100%); text-align: left; }
.fh-panel { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: flex-start; }
.fh-intro { transform-origin: left center; transition: opacity 1s, transform 1.2s cubic-bezier(.2,.7,.2,1), filter 1s; }
.fh.is-focusing .fh-intro { opacity: 0; transform: translateY(-24px) scale(.96); filter: blur(10px); pointer-events: none; }
.fh-timer { opacity: 0; transform: translateY(24px); filter: blur(10px); pointer-events: none; transition: opacity 1.1s .25s, transform 1.3s cubic-bezier(.2,.7,.2,1) .25s, filter 1.1s .25s; }
.fh.is-focusing .fh-timer { opacity: 1; transform: none; filter: none; pointer-events: auto; }

.fh-eyebrow { margin: 0 0 28px; display: flex; align-items: center; gap: 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.fh-eyeline { width: 28px; height: 1px; background: var(--accent); }
.fh-title { margin: 0; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(52px, 6.4vw, 112px); line-height: 0.92; letter-spacing: -0.025em; }
.fh-title em { font-style: italic; }
.fh-lede { margin: 32px 0 0; max-width: 470px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--muted); }
.fh-ctas { margin-top: 40px; display: flex; align-items: center; gap: 28px; }
.fh-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 30px; border-radius: 2px; background: var(--ink); color: var(--ground) !important; font-size: 15px; font-weight: 500; text-decoration: none; }
.fh-btn-primary:hover { opacity: .88 !important; }
.fh-btn-text { background: none; border: 0; padding: 0 4px; min-height: 44px; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.fh-btn-text:hover { opacity: .7; }
.fh-btn-line { margin-top: 32px; background: none; border: 1px solid var(--line); border-radius: 2px; min-height: 44px; padding: 0 22px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.fh-btn-line:hover { border-color: var(--ink); }

.fh-timer .fh-eyebrow { margin-bottom: 20px; gap: 12px; }
.fh-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: fh-pulse 2s ease-in-out infinite; }
@keyframes fh-pulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
.fh-time { font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(96px, 12vw, 196px); line-height: .9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fh-quote { margin: 20px 0 0; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: clamp(20px, 1.8vw, 26px); color: var(--muted); }
.fh-blocked { margin: 28px 0 0; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.fh-blocked-n { color: var(--ink); }

.fh-zoom { position: absolute; z-index: 3; right: clamp(16px, 3vw, 48px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fh-zbtn { width: 44px; height: 44px; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 50%; cursor: pointer; display: grid; place-items: center; padding: 0; }
.fh-zbtn:hover { border-color: var(--ink); }
.fh-zbtn:disabled { opacity: .35; cursor: default; }
.fh-zread { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; color: var(--muted); }

.fh-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 0 clamp(20px, 4vw, 56px) 28px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.fh-scroll { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.fh-cue-track { position: relative; width: 1px; height: 44px; background: var(--faint); overflow: hidden; }
.fh-cue { position: absolute; inset: 0; background: var(--ink); animation: fh-cue 2.6s ease-in-out infinite; }
@keyframes fh-cue { 0% { transform: scaleY(0); transform-origin: top } 45% { transform: scaleY(1); transform-origin: top } 55% { transform: scaleY(1); transform-origin: bottom } 100% { transform: scaleY(0); transform-origin: bottom } }

.fh-rise { animation: fh-rise 1.4s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fh-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px) } to { opacity: 1; transform: none; filter: blur(0) } }

/* ---------- phone ---------- */
@media (max-width: 820px) {
  .fh-hide-sm { display: none !important; }
  .fh-nav { display: none; }
  .fh-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
  .fh-lens { display: none; }
  .fh-gc { left: 50%; top: 24%; }
  .fh-main { align-items: flex-end; padding-bottom: 32px; }
  .fh-zoom { top: 24%; right: 12px; }
  .fh-scrim { background: linear-gradient(0deg, rgba(7,7,8,.85) 0%, rgba(7,7,8,.5) 40%, rgba(7,7,8,0) 60%); }
}

@media (prefers-reduced-motion: reduce) {
  .fh-n, .fh-breathe, .fh-orbit, .fh-cue, .fh-rise, .fh-pulse, .fh-twinkle { animation: none !important; }
  .fh-n { opacity: var(--o); }
}

/* ===== integration overrides — ours, not the packaged file =====
   Kept at the end so the delivered styles above can be replaced wholesale if
   a newer version of the hero arrives. */

/* The site nav is sticky and 69px tall, so a full viewport here would push
   the fold down by exactly that much and hide the scroll cue. */
.fh { height: calc(100vh - 69px); height: calc(100svh - 69px); min-height: 620px; }

/* The packaged hero had no note under its buttons; this site has always shown
   the platform line there, and dropping it would lose Windows 10/11. */
.fh-note { margin: 18px 0 0; font-size: 13px; color: var(--muted); letter-spacing: .01em; }

/* Without the packaged header the first panel sat too high against the nav. */
.fh-main { padding-top: 24px; }