/* Hai Matrix — animated hero. Namespaced hmh- so it can sit inside any page. */
.hmh {
  --hmh-ink: #0B0C0E; --hmh-inset: #07080A; --hmh-bone: #EEEAE3; --hmh-muted: #A09C95;
  --hmh-faint: #6A6761; --hmh-ember: #E8734F; --hmh-line: #363A42;
  --hmh-pad: 40px; --hmh-top: 104px;
  position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 640px; max-height: 1100px;
  overflow: hidden; background: var(--hmh-inset); color: var(--hmh-bone); isolation: isolate;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
}
.hmh * { box-sizing: border-box; }
.hmh-canvas, .hmh-poster, .hmh-scrim, .hmh-grain { position: absolute; inset: 0; width: 100%; height: 100%; }
.hmh-poster { object-fit: cover; object-position: 64% 45%; transition: opacity .6s; }
.hmh.is-live .hmh-poster { opacity: 0; }
.hmh-scrim {
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(11,12,14,.7) 0%, rgba(11,12,14,.35) 16%, rgba(11,12,14,0) 30%),
    linear-gradient(to top, rgba(11,12,14,.92) 0%, rgba(11,12,14,.55) 26%, rgba(11,12,14,0) 58%),
    linear-gradient(to right, rgba(11,12,14,.55) 0%, rgba(11,12,14,0) 52%);
}
.hmh-grain {
  inset: -60%; width: 220%; height: 220%; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: hmh-grain .9s steps(5) infinite;
}
@keyframes hmh-grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -2%); }
  60% { transform: translate(-2%, -4%); } 80% { transform: translate(4%, 2%); } 100% { transform: translate(0, 0); }
}

/* ---------- viewfinder */
.hmh-vf { position: absolute; inset: var(--hmh-top) 32px 32px 32px; pointer-events: none; }
.hmh-br { position: absolute; width: 24px; height: 24px; border: 0 solid rgba(238,234,227,.7); }
.hmh-br.tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.hmh-br.tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.hmh-br.bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.hmh-br.br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.hmh-lab {
  position: absolute; top: 14px; font: 400 11px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em;
  color: rgba(238,234,227,.82); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.hmh-lab.tl { left: 14px; display: flex; align-items: center; gap: 8px; }
.hmh-lab.tc { left: 50%; transform: translateX(-50%); }
.hmh-lab.tr { right: 14px; }
.hmh-rec { width: 7px; height: 7px; border-radius: 50%; background: var(--hmh-ember); animation: hmh-rec 1.2s steps(1) infinite; }
@keyframes hmh-rec { 50% { opacity: .15; } }

/* ---------- copy */
.hmh-copy { position: absolute; left: var(--hmh-pad); right: var(--hmh-pad); bottom: 104px; z-index: 2; }
.hmh-eyebrow {
  margin: 0 0 22px; display: flex; align-items: center; gap: 10px; min-height: 11px;
  font: 500 11px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
}
.hmh-eyebrow b { width: 7px; height: 7px; background: var(--hmh-ember); flex: none; }
.hmh-title {
  margin: 0; font-weight: 600; font-size: clamp(52px, 8.6vw, 132px); line-height: .92; letter-spacing: -.05em;
  color: var(--hmh-bone); text-wrap: balance;
}
.hmh-line { display: block; }
.hmh-m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.hmh-w { display: inline-block; transform: translateY(112%); transition: transform 1.1s cubic-bezier(.19, 1, .22, 1); }
.hmh-m:nth-child(2) .hmh-w { transition-delay: .09s; }
.hmh-m:nth-child(3) .hmh-w { transition-delay: .18s; }
.hmh.is-in .hmh-w { transform: none; }
.hmh-serif { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.012em; padding-right: .06em; }
.hmh-ch {
  display: inline-block; opacity: 0; filter: blur(18px); transform: translateY(.05em) scale(1.06);
  transition: opacity .8s ease, filter 1.2s cubic-bezier(.2, .7, 0, 1), transform 1.2s cubic-bezier(.2, .7, 0, 1);
  transition-delay: calc(var(--i) * 45ms);
}
.hmh.is-film .hmh-ch { opacity: 1; filter: blur(0); transform: none; }
.hmh-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-top: 28px; }
.hmh-sub, .hmh-reel { opacity: 0; transform: translateY(10px); transition: opacity 1s ease .7s, transform 1s ease .7s; }
.hmh.is-in .hmh-sub, .hmh.is-in .hmh-reel { opacity: 1; transform: none; }
.hmh-sub { margin: 0; max-width: 380px; font-size: 17px; line-height: 1.55; color: rgba(238,234,227,.82); order: 2; }
.hmh-reel {
  display: inline-flex; align-items: center; gap: 12px; color: var(--hmh-bone); text-decoration: none;
  font: 500 15px/1 "Geist", sans-serif; white-space: nowrap; order: 1;
}
.hmh-reel i { width: 36px; height: 36px; border: 1px solid rgba(238,234,227,.7); border-radius: 2px; position: relative; flex: none; transition: border-color .2s, background .2s; }
.hmh-reel i::after { content: ""; position: absolute; left: 14px; top: 11px; border: 7px solid transparent; border-left: 10px solid var(--hmh-bone); border-right: 0; }
.hmh-reel span { font: 400 12px/1 "Geist Mono", monospace; color: var(--hmh-muted); }
.hmh-reel:hover i { border-color: var(--hmh-ember); background: rgba(232,115,79,.12); }
.hmh-reel:focus-visible, .hmh-stages button:focus-visible { outline: 2px solid var(--hmh-ember); outline-offset: 3px; }

/* ---------- stage control: the pipeline as a scrubber */
.hmh-stages {
  position: absolute; left: calc(var(--hmh-pad) + 24px); bottom: 50px; z-index: 3;
  display: flex; align-items: center; gap: 22px; opacity: 0; transition: opacity 1s ease 1s;
}
.hmh.is-in .hmh-stages { opacity: 1; }
.hmh-stages button {
  appearance: none; background: none; border: 0; padding: 4px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font: 500 11px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--hmh-muted);
  transition: color .3s;
}
.hmh-stages button::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; transition: background .3s, border-color .3s; }
.hmh-stages button:hover { color: var(--hmh-bone); }
.hmh-stages button[aria-pressed="true"] { color: var(--hmh-bone); }
.hmh-stages button[aria-pressed="true"]::before { background: var(--hmh-ember); border-color: var(--hmh-ember); }
.hmh-stages .hmh-replay::before { display: none; }
.hmh-stages .hmh-replay { font-size: 14px; letter-spacing: 0; }
.hmh-progress { width: 120px; height: 1px; background: var(--hmh-line); position: relative; }
.hmh-progress i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); background: var(--hmh-ember); }

/* ---------- scene tabs: architecture / cinema */
.hmh-scenes {
  position: absolute; top: calc(var(--hmh-top) + 44px); right: 46px; z-index: 3;
  display: flex; gap: 18px; opacity: 0; transition: opacity 1s ease 1s;
}
.hmh.is-in .hmh-scenes { opacity: 1; }
.hmh-scenes button {
  appearance: none; background: none; border: 0; border-bottom: 1px solid transparent; padding: 4px 0; cursor: pointer;
  font: 500 11px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(238,234,227,.72); transition: color .3s, border-color .3s;
}
.hmh-scenes button:hover { color: var(--hmh-bone); }
.hmh-scenes button[aria-pressed="true"] { color: var(--hmh-bone); border-bottom-color: var(--hmh-ember); }
.hmh-scenes button:focus-visible { outline: 2px solid var(--hmh-ember); outline-offset: 3px; }

/* Under an in-flow (not overlaid) header, as on the phone page. */
.hmh--flow { --hmh-top: 16px; height: calc(100svh - 64px); min-height: 560px; }

@media (max-width: 760px) {
  .hmh { --hmh-pad: 20px; --hmh-top: 84px; min-height: 600px; max-height: 900px; }
  .hmh.hmh--flow { --hmh-top: 14px; }
  .hmh-vf { inset: var(--hmh-top) 14px 14px 14px; }
  .hmh-lab.tc { display: none; }
  .hmh-lab.tr { font-size: 10px; }
  .hmh-copy { bottom: 84px; }
  .hmh-title { font-size: clamp(46px, 13.4vw, 64px); }
  .hmh-foot { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 20px; }
  .hmh-sub { order: 1; font-size: 15px; }
  .hmh-reel { order: 2; }
  .hmh-stages { left: 34px; bottom: 34px; gap: 16px; }
  .hmh-scenes { top: calc(var(--hmh-top) + 34px); right: 28px; gap: 14px; }
  .hmh-scenes button { font-size: 10px; }
  .hmh-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hmh-grain, .hmh-rec { animation: none; }
  .hmh-w, .hmh-ch, .hmh-sub, .hmh-reel, .hmh-stages { transform: none !important; filter: none !important; opacity: 1 !important; transition: none !important; }
}