/* Identity first: one mark opens at center and settles beside the promise. */
.hero {
  min-height: max(790px, 100svh);
  padding-top: 120px;
  padding-bottom: 120px;
}
.hero-field-stage {
  position: absolute;
  inset: 0 auto 0 calc(50% - 50vw);
  width: 100vw;
  overflow: hidden;
  overflow: clip;
  /* The sky extends beyond the content column. It also receives contacts in
     the margins; foreground copy and controls retain their own stacking. */
  pointer-events: auto;
  z-index: 0;
}
.hero #brand-field {
  z-index: 0;
}
.hero #hand-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.hero[data-hero-state="settled"] #hand-field { visibility: hidden; }
.hero-art {
  z-index: 1;
  height: 520px;
  width: 100%;
  margin: 0;
}
.hero .brand-fallback {
  width: clamp(220px, 27vw, 350px);
  height: auto;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 36px #91bddd1a);
}
.hero-bottom {
  z-index: 2;
}
.hero-art::before,
.hero-orbit {
  display: none;
}
.hero.has-hero-field .brand-fallback {
  visibility: hidden;
}
.brand-hit-regions {
  display: none;
  position: absolute;
  width: clamp(220px, 27vw, 350px);
  aspect-ratio: 144 / 110;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero.has-hero-field[data-hero-state="settled"] .brand-hit-regions { display: block; }
.brand-hit {
  position: absolute;
  background: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}
/* Native keyboard controls share the mark's footprint. Pointer hit testing
   uses the renderer's precise moving paths, including the triangle corners.
   The canvas draws the focused tier's edge, rather than a bounding box. */
.brand-hit:focus-visible { outline: none; }
.brand-hit-bottom { left: 5.5556%; top: 77.2727%; width: 88.8889%; height: 14.5455%; }
.brand-hit-middle { left: 19.4444%; top: 51.8182%; width: 61.1111%; height: 14.5455%; }
.brand-hit-top { left: 27.7778%; top: 8.1818%; width: 44.4444%; height: 29.0909%; }
.hero-art[data-hovered-tier] { cursor: pointer; }
.brand-touch-hint {
  display: none;
  position: absolute;
  top: calc(47% + clamp(84px, 10.4vw, 134px) + 28px);
  left: 50%;
  transform: translateX(-50%);
  color: #8595a3;
  font-size: 10px;
  letter-spacing: .015em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 350ms ease;
}
.brand-reflection {
  position: absolute;
  top: calc(47% + clamp(84px, 10.4vw, 134px) + 28px);
  left: 50%;
  width: min(320px, calc(100% - 24px));
  margin: 0;
  color: #c4d5e3;
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 400;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 3px);
  filter: blur(1px);
  transition: opacity 180ms ease-out, transform 260ms cubic-bezier(.16, 1, .3, 1), filter 180ms ease-out;
}
.hero-art[data-reflection="visible"] .brand-reflection {
  opacity: 1;
  transform: translate(-50%, 0);
  filter: blur(0);
}
.hero-art[data-reflection="pending"] .brand-reflection {
  transition-duration: 220ms;
}
.hero.has-hero-field[data-hero-state="settled"] .brand-touch-hint { display: block; }
.hero-art:hover .brand-touch-hint,
.hero-art:focus-within .brand-touch-hint { opacity: .8; }
@media (hover: none) {
  .hero.has-hero-field[data-hero-state="settled"] .brand-touch-hint { opacity: .65; }
}
.hero .hero-art[data-reflection] .brand-touch-hint { opacity: 0; }
/* A transient reading plane, clear of navigation and the hero's controls.
   It answers a deliberate click, then leaves the sky exactly as it was. */
.space-reflection {
  position: fixed;
  z-index: 25;
  inset: auto 24px calc(88px + env(safe-area-inset-bottom));
  width: min(580px, calc(100% - 48px));
  margin: 0 auto;
  padding: 18px 12px;
  color: #d8effb;
  font-size: clamp(19px, 1.65vw, 25px);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.025em;
  text-align: center;
  text-wrap: balance;
  pointer-events: none;
  isolation: isolate;
  opacity: 0;
  transform: translateY(6px);
  filter: blur(3px);
  transition: opacity 1000ms ease, transform 1200ms ease, filter 1100ms ease;
}
.space-reflection::before {
  content: "";
  position: absolute;
  inset: -32px -48px;
  z-index: -1;
  background: radial-gradient(ellipse, rgba(4, 9, 14, .92) 0%, rgba(4, 9, 14, .72) 34%, transparent 72%);
}
.space-reflection[data-state="visible"] { opacity: 1; transform: translateY(0); filter: none; }
.space-reflection[data-state="pending"] { transition-duration: 160ms; }
.space-reflection[data-state="travelling"] { visibility: hidden; opacity: 0; transform: none; filter: none; transition: none; }
.space-quote-bridge {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 24;
  pointer-events: none;
  overflow: hidden;
}
.space-quote-bridge path { fill: none; stroke: #9ad7fa; stroke-linecap: round; opacity: 0; }
.space-quote-bridge .quote-thread-glow { stroke-width: 5; filter: blur(2px); }
.space-quote-bridge .quote-thread { stroke-width: .8; }
.space-quote-bridge .quote-thread-tip { stroke: #e4f7ff; stroke-width: 1.5; filter: drop-shadow(0 0 3px #87d2ff); }
.space-quote-bridge .quote-thread-blue { stroke: #74c8ff; }
.space-quote-bridge .quote-thread-tip.quote-thread-blue { stroke: #b9e9ff; }
.space-quote-bridge .quote-trail-dust { fill: #87d0fb; opacity: 0; filter: drop-shadow(0 0 2px rgba(99, 191, 250, .55)); }
.space-quote-bridge .quote-trail-ice { fill: #d6f1ff; }
.space-reflection:empty { display: none; }
.space-reflection span {
  display: inline-block;
  position: relative;
  white-space: pre;
}
.space-reflection[data-state="visible"] span {
  animation: crystal-word-arrive 1500ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes crystal-word-arrive {
  0% { opacity: 0; transform: translate3d(0, 9px, 0) scale(.97); filter: blur(5px); text-shadow: 0 0 14px #6ac8ff; }
  38% { opacity: .8; text-shadow: 0 0 15px rgba(93, 189, 248, .8), 0 0 3px #e4f6ff; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: none; text-shadow: 0 0 22px rgba(100, 190, 245, .12); }
}
@media (max-width: 760px) {
  .space-reflection { inset-inline: 18px; width: calc(100% - 36px); bottom: calc(54px + env(safe-area-inset-bottom)); padding: 4px 0; font-size: 18px; line-height: 1.5; }
  .space-reflection::before { inset-inline: -18px; }
}
@media (prefers-reduced-motion: reduce) {
  .space-quote-bridge { display: none; }
  .space-reflection { transition: none; transform: none; filter: none; }
  .space-reflection[data-state="visible"] span { animation: none; }
}
.motion-paused .space-reflection { transition: none; transform: none; filter: none; }
.motion-paused .space-reflection[data-state="visible"] span { animation: none; }
.motion-paused .space-quote-bridge { display: none; }
@media print { .space-reflection, .space-quote-bridge { display: none; } }
.hero h1,
.hero .hero-description,
.hero .hero-actions {
  animation: none !important;
}
.hero-line {
  display: block;
  overflow: clip;
  padding-block: 0.08em;
  margin-block: -0.08em;
}
.hero-line > span {
  display: block;
}
.hero h1:focus {
  outline: none;
}
.hero-skip {
  position: fixed;
  z-index: 40;
  right: max(24px, env(safe-area-inset-right));
  top: max(16px, env(safe-area-inset-top));
  background: none;
  border: 0;
  color: #91a3b4;
  font-size: 11px;
  min-height: 44px;
  min-width: 44px;
  padding: 12px 0 12px 15px;
}
.hero-skip span {
  margin-left: 10px;
  color: #c5d8e8;
}
.hero-motion-controls {
  display: flex;
  align-items: center;
  gap: 22px;
}
.hero-replay {
  border: 0;
  background: none;
  color: #8397a9;
  font-size: 11px;
  min-height: 44px;
  padding: 8px 0;
}
.hero-replay:hover {
  color: #d3e5f3;
}
.hero-replay:disabled {
  opacity: 0.45;
}
.hero-replay[hidden],
.hero-skip[hidden] {
  display: none;
}
/* The same environment is visible before, during and after the opening. */
.hero-opening-pending .navigation,
.hero-opening-pending .hero-copy,
.hero-opening-pending .brand-fallback,
.hero-opening-pending .hero-bottom {
  opacity: 0;
  visibility: hidden;
}
.hero-opening-active .navigation,
.hero-opening-active .hero-copy,
.hero-opening-active .hero-bottom {
  pointer-events: none;
}
.hero-opening-active .hero-field-stage { z-index: 3; }
.hero-opening-active .hero-copy,
.hero-opening-active .hero-bottom { z-index: 4; }
.hero-reduced-reveal #brand-field,
.hero-reduced-reveal .brand-fallback {
  animation: reduced-logo-arrival 200ms ease-out both;
}
@keyframes reduced-logo-arrival {
  from { opacity: .65; }
  to { opacity: 1; }
}
@media (min-width: 1600px) {
  .hero { min-height: max(850px, 100svh); }
}
@media (max-width: 760px) {
  .hero {
    min-height: auto;
    padding-top: 145px;
    padding-bottom: 70px;
  }
  .hero-art {
    height: 290px;
    width: 100%;
    margin: 12px 0 0;
  }
  .hero .brand-fallback {
    width: min(225px, 65vw);
    top: 49%;
    left: 50%;
  }
  .brand-hit-regions { width: min(225px, 65vw); top: 49%; }
  .brand-touch-hint,
  .brand-reflection { top: calc(49% + 104px); }
  .hero-skip { right: max(20px, env(safe-area-inset-right)); }
  .hero-motion-controls {
    gap: 13px;
  }
  .hero-replay {
    font-size: 10px;
  }
  .hero-bottom > span {
    max-width: 95px;
    line-height: 1.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-touch-hint,
  .brand-reflection { transition: none; }
  .brand-reflection { transform: translate(-50%, 0); filter: none; }
  .hero-opening-pending .navigation,
  .hero-opening-pending .hero-copy,
  .hero-opening-pending .brand-fallback,
  .hero-opening-pending .hero-bottom {
    opacity: 1;
    visibility: visible;
  }
}
.motion-paused .brand-reflection { transition: none; transform: translate(-50%, 0); filter: none; }