/* ===========================================================================
   Home — HERO (prefix hx-)
   Ported from context-port/page.css (bg layers + hero section) and
   context-port/sculpture/hero-overlay.css (+ the Tailwind utilities used in
   hero-overlay.tsx, translated to plain CSS).
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Fixed page background layers
   gradient (z -1) → WebGL sculpture canvas (z 0) → noise (z 1).
   Page content must sit above z 1 (the original wraps all content in a
   `position:relative; z-index:2` layer — .hx-hero does this for itself).
   --------------------------------------------------------------------------- */
.hx-bg-gradient,
.hx-bg-canvas__loading {
  background: radial-gradient(
    176.57% 161.52% at 50% 50%,
    #3a1819 0%,
    #1a0b0b 100%
  );
}

.hx-bg-gradient {
  position: fixed;
  inset: 0;
  z-index: -1;
}

.hx-bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  touch-action: pan-x pan-y pinch-zoom; /* let swipes on the background scroll the page */
}

.hx-bg-canvas__loading {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hx-bg-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hx-bg-noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url('../../images/noise.png');
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.35;
  mix-blend-mode: soft-light;
}

/* ---------------------------------------------------------------------------
   Hero section (Screen 1) — full viewport height
   Horizontal padding = the original page-content wrapper (px-3 sm:px-5 xl:px-7)
   --------------------------------------------------------------------------- */
.hx-hero {
  --site-nav-height: 62px;
  position: relative;
  z-index: 2;
  width: 100%;
  padding-inline: 0.75rem;
}

@media (min-width: 640px) {
  .hx-hero { padding-inline: 1.25rem; }
}
@media (min-width: 1280px) {
  .hx-hero { padding-inline: 1.75rem; }
}

.hx-hero__frame {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
}

/* "svh" = the screen height with the phone's address bar showing. Unlike
   "dvh" it doesn't change while scrolling, so the hero doesn't jump. */
@supports (height: 100svh) {
  .hx-hero__frame {
    height: 100svh;
    min-height: 100svh;
  }
}

.hx-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Entrance transitions (the original flips `isVisible` 400ms after mount)
   --------------------------------------------------------------------------- */
.hx-reveal {
  opacity: 0;
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.hx-reveal--wordmark { transform: translateY(0.75rem); transition-duration: 1200ms; }
.hx-reveal--headline { transform: translateY(1.25rem); transition-duration: 1400ms; transition-delay: 150ms; }
.hx-reveal--sub      { transform: translateY(1.25rem); transition-duration: 1400ms; transition-delay: 250ms; }
.hx-reveal--trusted  { transform: translateY(1rem);    transition-duration: 1800ms; transition-delay: 500ms; }

.hx-overlay.hx-is-visible .hx-reveal {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------------------
   Announcement / docket banner
   --------------------------------------------------------------------------- */
.hx-announce {
  position: absolute;
  top: calc(var(--site-nav-height, 62px) + max(0.6rem, env(safe-area-inset-top)));
  left: 50%;
  z-index: 30;
  width: min(760px, calc(100% - 2.2rem));
  transform: translate(-50%, -8px);
  opacity: 0;
  transition:
    opacity 600ms ease-out,
    transform 600ms ease-out;
}

.hx-overlay.hx-is-visible .hx-announce {
  transform: translate(-50%, 0);
  opacity: 1;
}

.hx-announce__panel {
  border: 0.5px solid rgba(251, 245, 238, 0.3);
  background: rgba(251, 245, 238, 0.06);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 4px;
  padding: 0.52rem;
  pointer-events: auto;
}

.hx-announce__ticker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 34px;
  border: 0.5px solid rgba(251, 245, 238, 0.22);
  background: rgba(25, 12, 12, 0.5);
  border-radius: 2px;
  padding: 0.3rem 0.5rem;
}

.hx-announce__docket {
  flex-shrink: 0;
  margin: 0;
  color: rgba(251, 245, 238, 0.63);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-right: 0.5px solid rgba(251, 245, 238, 0.2);
  padding-right: 0.55rem;
}

.hx-announce__summary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  border: none;
  background: transparent;
  color: rgba(251, 245, 238, 0.88);
  text-align: left;
}

.hx-announce__summary-open {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.hx-announce__summary-open:focus-visible {
  outline: 1px solid rgba(251, 245, 238, 0.45);
  outline-offset: 2px;
  border-radius: 2px;
}

.hx-announce__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(251, 245, 238, 0.85);
  cursor: pointer;
}

.hx-announce__summary-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-garamond, 'EB Garamond', Georgia, serif);
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  transition: color 200ms ease-out;
}

.hx-announce__summary-open:hover .hx-announce__summary-text,
.hx-announce__summary-open:focus-visible .hx-announce__summary-text,
.hx-announce__summary-open:active .hx-announce__summary-text {
  color: rgba(251, 245, 238, 1);
}

.hx-announce__summary-cite {
  flex-shrink: 0;
  color: rgba(251, 245, 238, 0.62);
  font-family: var(--font-garamond, 'EB Garamond', Georgia, serif);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.01em;
  position: relative;
  top: -0.24em;
  text-decoration: none;
  border-bottom: 0.5px solid transparent;
  transition:
    color 200ms ease-out,
    border-color 200ms ease-out,
    opacity 200ms ease-out;
}

.hx-announce__summary-cite:hover,
.hx-announce__summary-cite:focus-visible,
.hx-announce__summary-cite:active {
  color: rgba(251, 245, 238, 1);
  border-color: rgba(251, 245, 238, 0.66);
}

.hx-announce__chevron {
  display: block;
  flex-shrink: 0;
  color: rgba(251, 245, 238, 0.75);
  transition: transform 220ms ease-out;
}

.hx-announce__toggle[aria-expanded='true'] .hx-announce__chevron {
  transform: rotate(180deg);
}

.hx-announce__table {
  margin-top: 0.5rem;
  border: 0.5px solid rgba(251, 245, 238, 0.14);
  background: rgba(22, 10, 10, 0.52);
  border-radius: 2px;
  padding: 0.28rem;
}

.hx-announce__table[hidden] { display: none; }

.hx-announce__table-head {
  display: grid;
  grid-template-columns: 34px 96px minmax(0, 1fr);
  align-items: center;
  gap: 0.58rem;
  border-bottom: 0.5px solid rgba(251, 245, 238, 0.14);
  padding: 0.46rem 0.74rem;
  color: rgba(251, 245, 238, 0.38);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hx-announce__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: 0;
}

.hx-announce__item {
  display: grid;
  grid-template-columns: 34px 96px minmax(0, 1fr);
  align-items: start;
  gap: 0.58rem;
  border-top: 0.5px solid rgba(251, 245, 238, 0.1);
  padding: 0.72rem 0.74rem 0.78rem;
}

.hx-announce__item:first-child { border-top: none; }

.hx-announce__row-id {
  color: rgba(251, 245, 238, 0.56);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: 0.04em;
}

.hx-announce__row-date {
  color: rgba(251, 245, 238, 0.56);
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.hx-announce__row-text {
  margin: 0;
  color: rgba(251, 245, 238, 0.86);
  font-family: var(--font-garamond, 'EB Garamond', Georgia, serif);
  font-size: 12.5px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.hx-announce__row-kind,
.hx-announce__summary-kind {
  color: rgba(251, 245, 238, 0.93);
}

.hx-announce__row-cite {
  color: rgba(251, 245, 238, 0.6);
  font-size: 10px;
  line-height: 1;
  position: relative;
  top: -0.24em;
  white-space: nowrap;
}

.hx-announce__row-cite-link {
  color: rgba(251, 245, 238, 0.6);
  text-decoration: none;
  border-bottom: 0.5px solid transparent;
  transition:
    color 200ms ease-out,
    border-color 200ms ease-out;
}

.hx-announce__row-cite-link:hover,
.hx-announce__row-cite-link:focus-visible,
.hx-announce__row-cite-link:active {
  color: rgba(251, 245, 238, 1);
  border-color: rgba(251, 245, 238, 0.66);
}

.hx-announce__row-cite-link:hover .hx-announce__row-cite,
.hx-announce__row-cite-link:focus-visible .hx-announce__row-cite,
.hx-announce__row-cite-link:active .hx-announce__row-cite {
  color: rgba(251, 245, 238, 1);
}

.hx-announce__col-id,
.hx-announce__col-date,
.hx-announce__col-text {
  justify-self: start;
}

.hx-announce__col-date,
.hx-announce__col-text {
  font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

@media (max-width: 639px) {
  .hx-announce { width: calc(100% - 1.5rem); }

  .hx-announce__table-head,
  .hx-announce__item {
    grid-template-columns: 24px 78px minmax(0, 1fr);
    gap: 0.38rem;
  }

  .hx-announce__summary-text { font-size: 11px; }
  .hx-announce__row-text { font-size: 11.5px; }
  .hx-announce__row-date { font-size: 10px; }
}

@media (min-width: 640px) {
  .hx-announce { width: min(760px, calc(100% - 3.6rem)); }

  .hx-announce__table-head,
  .hx-announce__item {
    grid-template-columns: 38px 104px minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  .hx-announce { width: min(760px, calc(100% - 5.6rem)); }
  .hx-announce__summary-text { font-size: 13px; }
  .hx-announce__row-text { font-size: 13px; }
  .hx-announce__row-date { font-size: 11px; }
  .hx-announce__table-head { font-size: 9.5px; }
}

@media (max-height: 700px) {
  .hx-announce {
    top: calc(var(--site-nav-height, 62px) + max(0.4rem, env(safe-area-inset-top)));
  }
  .hx-announce__summary-text { font-size: 11px; }
  .hx-announce__row-text {
    font-size: 11px;
    letter-spacing: 0.01em;
  }
}

/* ---------------------------------------------------------------------------
   Centre: wordmark + headline + sub
   --------------------------------------------------------------------------- */
.hx-center {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hx-center__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hx-wordmark {
  position: relative;
  display: inline-flex;
  margin-bottom: 48px;
}

.hx-wordmark > svg { display: block; }

/* The "1" superscript on the wordmark — opens the demo request */
.hx-subscript {
  position: absolute;
  right: -0.75rem;
  top: -0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.hx-subscript svg { display: block; }

.hx-subscript:focus-visible {
  outline: 1px solid rgba(251, 245, 238, 0.45);
  outline-offset: 2px;
}

.hx-subscript__gradient { opacity: 1; transition: opacity 300ms ease-out; }
.hx-subscript__glow     { opacity: 0; transition: opacity 300ms ease-out; }
.hx-subscript__solid    { opacity: 0; transition: opacity 300ms ease-out; }

.hx-subscript:hover .hx-subscript__gradient,
.hx-subscript:focus .hx-subscript__gradient { opacity: 0; }
.hx-subscript:hover .hx-subscript__glow,
.hx-subscript:focus .hx-subscript__glow { opacity: 0.92; }
.hx-subscript:hover .hx-subscript__solid,
.hx-subscript:focus .hx-subscript__solid { opacity: 1; }

.hx-headline {
  margin: 36px 0 0;
  max-width: min(26rem, 90vw);
  text-align: center;
  font-family: var(--font-garamond, 'EB Garamond', Georgia, serif);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: #fbf5ee;
}

.hx-headline i {
  font-style: italic;
  color: #fdead4;
}

.hx-sub {
  margin: 1rem 0 0;
  max-width: min(32rem, 92vw);
  padding: 0 0.5rem;
  text-align: center;
  font-family: var(--font-garamond, 'EB Garamond', Georgia, serif);
  font-weight: 400;
  font-size: clamp(0.8125rem, 1.85vw, 0.9375rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: rgba(251, 245, 238, 0.68);
}

/* ---------------------------------------------------------------------------
   Trusted by + logo marquee + "Request introduction."
   --------------------------------------------------------------------------- */
.hx-trusted {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1rem 2.5rem;
}

@media (min-width: 640px) {
  .hx-trusted { padding: 0 2rem 3rem; }
}

.hx-trusted__label {
  color: rgba(251, 245, 238, 0.4);
  font-family: var(--font-garamond, 'EB Garamond', Georgia, serif);
  font-weight: 400;
  font-style: italic;
  font-size: 15px;
  line-height: 140%;
  letter-spacing: 0.01em;
}

.hx-marquee {
  position: relative;
  width: 100%;
  max-width: 56rem;
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 18%, black 82%, transparent 100%);
}

@keyframes hx-logo-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.hx-marquee__track {
  display: flex;
  width: max-content;
}

/* JS duplicates the logo set, then turns the animation on */
.hx-marquee__track.hx-marquee__track--ready {
  animation: hx-logo-marquee 64s linear infinite;
}

.hx-marquee__track:hover { animation-play-state: paused; }

.hx-marquee__item {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding-inline: 1.25rem;
}

@media (min-width: 640px) {
  .hx-marquee__item { padding-inline: 1.75rem; }
}

.hx-logo {
  --hx-logo-muted: rgb(251 245 238 / 38%);
  --hx-logo-hover: #fbf5ee;
  --hx-logo-muted-filter: brightness(0) saturate(100%) invert(95%) sepia(19%)
    saturate(297%) hue-rotate(316deg) brightness(102%) contrast(98%);
  display: flex;
  height: 40px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  pointer-events: auto;
}

@media (min-width: 640px) {
  .hx-logo { width: 140px; }
  .hx-logo--relativity { width: 150px; }
  .hx-logo--fenwick    { width: 152px; }
  .hx-logo--relentless { width: 158px; }
  .hx-logo--morrow     { width: 132px; transform: translateY(-2px); }
  .hx-logo--scott      { width: 130px; }
  .hx-logo--lewis      { width: 170px; }
  .hx-logo--ipo        { width: 120px; }
}

@media (min-width: 1024px) {
  .hx-logo--relativity { width: 160px; }
  .hx-logo--scott      { width: 140px; }
  .hx-logo--lewis      { width: 186px; }
  .hx-logo--ipo        { width: 140px; }
}

/* Plain-text wordmarks (Fenwick, Relentless) */
.hx-logo__text {
  display: block;
  width: 100%;
  height: 18px;
  color: var(--hx-logo-muted);
  transition: color 320ms ease-out;
}

.hx-logo:hover .hx-logo__text,
.hx-logo:focus-visible .hx-logo__text {
  color: var(--hx-logo-hover);
}

/* Morrow Ni */
.hx-logo__morrow {
  display: block;
  height: 12px;
  width: auto;
  max-width: 100%;
  overflow: hidden;
}

.hx-logo__morrow-muted { opacity: 0.38; transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1); }
.hx-logo__morrow-color { opacity: 0;    transition: opacity 300ms cubic-bezier(0, 0, 0.2, 1); }

.hx-logo:hover .hx-logo__morrow-muted,
.hx-logo:focus-visible .hx-logo__morrow-muted,
.hx-logo:hover .hx-logo__morrow-color,
.hx-logo:focus-visible .hx-logo__morrow-color {
  opacity: 1;
}

/* Provided SVG image logos (muted copy + full-colour copy on hover) */
.hx-logo__stack {
  position: relative;
  display: inline-flex;
  width: auto;
  max-width: 100%;
}

.hx-logo--relativity .hx-logo__stack { height: 10px; }
.hx-logo--scott .hx-logo__stack      { height: 10px; }
.hx-logo--lewis .hx-logo__stack      { height: 22px; }

@media (min-width: 640px) {
  .hx-logo--relativity .hx-logo__stack { height: 14px; }
  .hx-logo--scott .hx-logo__stack      { height: 13px; }
  .hx-logo--lewis .hx-logo__stack      { height: 35px; }
}

.hx-logo__img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  will-change: opacity, filter;
}

.hx-logo__img--muted {
  opacity: 0.38;
  filter: var(--hx-logo-muted-filter);
  transition:
    opacity 320ms ease-out,
    filter 320ms ease-out;
}

.hx-logo__img--color {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 320ms ease-out;
}

.hx-logo:hover .hx-logo__img--muted,
.hx-logo:focus-visible .hx-logo__img--muted { opacity: 0; }

.hx-logo:hover .hx-logo__img--color,
.hx-logo:focus-visible .hx-logo__img--color { opacity: 1; }

/* IPO Pang Shenjun wordmark */
.hx-logo__ipo {
  --hx-ipo-hover: #b90f12;
  display: block;
  overflow: visible;
  height: 22px;
  width: auto;
  max-width: 100%;
}

@media (min-width: 640px) {
  .hx-logo__ipo { height: 32px; }
}

.hx-logo__ipo-main {
  fill: var(--hx-logo-muted);
  transition:
    fill 320ms ease-out,
    opacity 320ms ease-out;
}

.hx-logo__ipo-sub {
  fill: var(--hx-logo-muted);
  stroke: var(--hx-logo-muted);
  transition:
    fill 320ms ease-out,
    opacity 320ms ease-out,
    stroke 320ms ease-out;
}

.hx-logo:hover .hx-logo__ipo-main,
.hx-logo:focus-visible .hx-logo__ipo-main {
  fill: var(--hx-ipo-hover);
}

.hx-logo:hover .hx-logo__ipo-sub,
.hx-logo:focus-visible .hx-logo__ipo-sub {
  fill: var(--hx-ipo-hover);
  stroke: var(--hx-ipo-hover);
}

.hx-intro {
  width: 100%;
  padding: 1.5rem 1rem 0;
}

@media (min-width: 640px) {
  .hx-intro { padding: 1.5rem 2rem 0; }
}

.hx-intro__rule {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid rgba(251, 245, 238, 0.15);
}

.hx-intro__row { margin-top: 1.25rem; }

.hx-intro__button {
  display: flex;
  width: fit-content;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(251, 245, 238, 0.55);
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  transition: color 0.4s ease;
  font-family: var(--font-garamond, 'EB Garamond', Georgia, serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  letter-spacing: 0.01em;
}

.hx-intro__button:hover,
.hx-intro__button:focus-visible {
  color: rgba(251, 245, 238, 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .hx-logo__img,
  .hx-logo__ipo-main,
  .hx-logo__ipo-sub {
    transition: none;
  }

  .hx-marquee__track.hx-marquee__track--ready {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Mobile stability: size the fixed background layers to the TALLEST phone
   viewport ("lvh") so they never resize while the address bar slides in and
   out, and give each its own compositing layer so iOS doesn't repaint them
   (with their blend modes) on every scroll frame.
   --------------------------------------------------------------------------- */
.hx-bg-gradient,
.hx-bg-canvas,
.hx-bg-noise {
  bottom: auto;
  height: 100vh;
  transform: translateZ(0);
  backface-visibility: hidden;
}
@supports (height: 100lvh) {
  .hx-bg-gradient,
  .hx-bg-canvas,
  .hx-bg-noise { height: 100lvh; }
}