/* Genos orbital field. Loaded after styles.css; all visual rules stay in the hero. */
.hero {
  isolation: isolate;
  min-height: 850px;
  height: max(850px, 100svh);
  max-height: 1150px;
  padding-top: 122px;
  background: #060909;
}
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 37%, #20483b27, transparent 52%), linear-gradient(#060909, #080b0a);
}
.hero-topline { color: #a1b6ab; font-size: 9px; letter-spacing: 2px; }
.hero-edition { color: #697f73; font-size: 8px; letter-spacing: 1.6px; }
.hero-art {
  position: relative;
  width: 100%;
  height: clamp(350px, 44svh, 490px);
  margin-top: 0;
  flex: 0 0 auto;
  perspective: 1200px;
  --field-x: 0px;
  --field-y: 0px;
}
#genome-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; opacity: 0; transition: opacity 1.2s ease; }
.hero-art.field-ready #genome-canvas { opacity: 1; }
.art-vignette {
  z-index: 3;
  background: linear-gradient(90deg, #060909 0%, transparent 12%, transparent 88%, #060909 100%), linear-gradient(0deg, #080b0a 0%, transparent 17%, transparent 87%, #060909 100%);
}
.hero-wordmark {
  z-index: 5;
  top: 49%;
  width: min(53vw, 730px);
  transform: translate(calc(-50% + var(--field-x)), calc(-50% + var(--field-y)));
  filter: drop-shadow(0 2px 1px #020706) drop-shadow(0 0 22px #030807) drop-shadow(0 0 60px #020706);
  will-change: transform;
}
.hero-wordmark img { opacity: .97; }
/* The HTML asset remains the initial, reduced-motion and failure fallback.
   Its dimensions are retained so the GL texture precisely follows this layout. */
.hero-art.field-ready.logo-refracting .hero-wordmark img { opacity: 0; }
.hero-art.logo-refracting #genome-canvas { transition: none; }
.art-coordinate { z-index: 5; top: auto; bottom: 17%; font-size: 7px; letter-spacing: 1.8px; color: #809f8d; line-height: 2; }
.coordinate-left { left: 4.5%; }
.coordinate-right { right: 4.5%; }
.hero-copy { margin-top: -7px; position: relative; }
.hero-copy .eyebrow { margin-bottom: 13px; font-size: 10px; letter-spacing: 4px; color: #b1cebd; }
.hero h1 { font-weight: 400; font-size: clamp(34px, 3.15vw, 47px); line-height: 1.4; letter-spacing: 2px; }
.hero-title-dynamic .hero-title-glyph {
  display: inline-block;
  opacity: var(--glyph-opacity, 1);
  transform: translate3d(0, var(--glyph-y, 0px), 0);
  filter: blur(var(--glyph-blur, 0px));
  text-shadow: 0 0 var(--glyph-glow, 0px) #c0f5da66;
}
.hero-title-dynamic.title-settled .hero-title-glyph { opacity: 1; transform: none; filter: none; text-shadow: none; }

.hero-description { margin-top: 15px; font-size: 13px; line-height: 1.95; color: #91a69a; }
.hero-actions { margin-top: 24px; gap: 28px; }
.hero-actions .primary { background: #c2efdc; border-color: #c2efdc; box-shadow: 0 0 35px #7bd6ac0d; }
.hero-actions .primary:hover { background: #ddfff0; border-color: #ddfff0; box-shadow: 0 0 32px #a9ebcc24; }
.hero-bottom { margin-bottom: 25px; margin-top: auto; padding-top: 30px; font-size: 9px; color: #748e7e; }
.hero-bottom button { color: #8ba797; font-size: 9px; min-height: 32px; }
.hero-bottom button:hover { color: #ddf9e9; }
.hero-bottom button span { width: 10px; text-align: center; }

/* A complete still image remains visible before GL starts, and if GL is unavailable. */
.orbital-still { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; transition: opacity 1.3s ease; }
.field-ready .orbital-still { opacity: 0; }
.orbital-still::before {
  content: ""; position: absolute; left: 9%; top: 30%; width: 82%; height: 40%; border-radius: 50%;
  border: 1px solid #c9ffda; transform: rotate(-9deg);
  box-shadow: 0 0 3px #e2ffed, 0 0 13px #8affbf66, 0 0 38px #6fbd9b55, inset 0 0 28px #81d6a84d, 0 0 90px #79aa6d33;
  background: radial-gradient(ellipse, transparent 55%, #a9ffc714 68%, #ebffd529 70%, transparent 76%);
}
.orbital-still::after {
  content: ""; position: absolute; left: 29%; top: 6%; width: 42%; height: 88%; border-radius: 50%;
  border: 1px solid #d3e8a98a; transform: rotate(21deg);
  box-shadow: 0 0 16px #c6f8b52b, inset 0 0 30px #c6f8b512;
  mask-image: linear-gradient(transparent, #000 20%, #000 70%, transparent);
}
.orbital-overlay { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .6; }
.orbital-overlay .orbit-path { stroke: #9dceb7; stroke-width: .55; fill: none; opacity: .19; }
.orbital-overlay .orbit-tick { stroke: #c1efcf; stroke-width: .7; opacity: .35; }
.orbital-overlay .orbit-base { fill: #c5e6cf; font: 6px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 1.6px; opacity: .55; }
.orbital-overlay .orbit-node { fill: #caffd9; filter: drop-shadow(0 0 4px #a3ffcc); }

@media (min-width: 1600px) {
  .hero { min-height: 910px; padding-top: 138px; }
  .hero-art { height: clamp(390px, 47svh, 530px); }
  .hero-wordmark { width: min(50vw, 830px); }
  .hero-copy { margin-top: -8px; }
}
@media (max-height: 850px) and (min-width: 761px) {
  .hero { min-height: 760px; height: max(760px, 100svh); padding-top: 112px; }
  .hero-art { height: 320px; }
  .hero-copy { margin-top: -8px; }
  .hero h1 { font-size: 39px; }
  .hero-description { font-size: 12px; margin-top: 12px; }
  .hero-actions { margin-top: 20px; }
  .hero-bottom { padding-top: 20px; margin-bottom: 20px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .hero-wordmark { width: 60%; }
  .art-coordinate { font-size: 6px; letter-spacing: 1px; bottom: 11%; }
}
@media (max-width: 760px) {
  .hero { min-height: 785px; height: max(785px, 100svh); max-height: 1030px; padding-top: 101px; }
  .hero-topline { font-size: 7px; letter-spacing: 1.6px; }
  .hero-art { width: 134%; height: clamp(290px, 39svh, 370px); margin-top: 8px; }
  .hero-wordmark { width: 65%; max-width: 570px; top: 49%; }
  .art-coordinate { font-size: 5.5px; letter-spacing: .9px; bottom: 10%; }
  .coordinate-left { left: 15%; }
  .coordinate-right { right: 15%; }
  .hero-copy { margin-top: 0; padding-inline: 18px; }
  .hero-copy .eyebrow { font-size: 9px; letter-spacing: 3.5px; margin-bottom: 14px; }
  .hero h1 { font-size: clamp(28px, 7.65vw, 38px); line-height: 1.5; letter-spacing: .8px; }
  .hero-description { font-size: 11px; margin-top: 14px; line-height: 1.9; }
  .hero-actions { margin-top: 24px; gap: 18px; }
  .hero-actions .button { padding-inline: 16px; gap: 12px; font-size: 10px; }
  .hero-bottom { padding-top: 24px; margin-bottom: 16px; font-size: 7px; }
  .hero-bottom > span { max-width: 190px; }
  .hero-bottom button { font-size: 8px; }
  .orbital-overlay { opacity: .44; }
}
@media (max-width: 380px) {
  .hero { min-height: 755px; }
  .hero-art { height: 275px; }
  .hero h1 { font-size: 27px; }
  .hero-actions { gap: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  #genome-canvas, .orbital-still { transition: none; }
  .hero-wordmark { will-change: auto; }
  .hero-title-dynamic .hero-title-glyph { opacity: 1; transform: none; filter: none; text-shadow: none; }
}