html.home-is-loading,
html.home-is-loading body { overflow: hidden; }

.home-preloader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  overflow: hidden;
  color: #fff;
  pointer-events: all;
}
html.home-is-loading .home-preloader { display: block; }

.home-preloader__panel {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50.1%;
  background: #050505;
  will-change: transform;
  transition: transform 650ms cubic-bezier(.76, 0, .18, 1);
}
.home-preloader__panel--top { top: 0; }
.home-preloader__panel--bottom { bottom: 0; }
.home-preloader.is-leaving .home-preloader__panel--top { transform: translateY(-101%); }
.home-preloader.is-leaving .home-preloader__panel--bottom { transform: translateY(101%); }

.home-preloader__scene {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  will-change: transform;
}
.home-preloader__identity {
  position: relative;
  width: clamp(220px, 24vw, 360px);
}
.home-preloader__logo { display: block; width: 100%; height: auto; overflow: visible; }
.home-preloader__piece { opacity: 0; transform-box: fill-box; transform-origin: center; animation: impact-piece-arrive 880ms cubic-bezier(.2, .75, .18, 1) var(--delay) both; }
.home-preloader__piece use { fill: #fff; }
.home-preloader__piece--seed { animation: impact-seed-arrive 2450ms cubic-bezier(.38, 0, .2, 1) both; }
.home-preloader__piece--accent use { animation: impact-seed-color 4300ms linear both; }
.home-preloader__city {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font: 500 clamp(10px, 1.2vw, 17px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.04em;
  opacity: 0;
  animation: impact-city-reveal 600ms cubic-bezier(.2, .8, .2, 1) 3650ms both;
}
.home-preloader__city-point { width: 5px; height: 5px; background: #ff5a2b; }

.home-preloader__footer {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  width: min(220px, calc(100vw - 48px));
  transform: translateX(-50%);
  animation: impact-footer-reveal 450ms ease-out 200ms both;
  will-change: transform;
}
.home-preloader__track { width: 100%; height: 1px; background: rgb(255 255 255 / 38%); overflow: hidden; }
.home-preloader__track span { display: block; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
.home-preloader__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; color: #fff; font: 400 10px/1.15 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; white-space: nowrap; }
.home-preloader__address, .home-preloader__counter { animation: impact-meta-reveal 600ms cubic-bezier(.2, .8, .2, 1) 270ms both; }
.home-preloader__counter { display: flex; gap: 4px; animation-delay: 340ms; }
.home-preloader__digit-window { width: 2ch; overflow: hidden; text-align: right; }
.home-preloader__digit-window b { display: block; font: inherit; font-weight: 400; }
.home-preloader.is-leaving .home-preloader__scene { opacity: 0; transform: translateY(-24px); transition: opacity 220ms ease, transform 400ms ease; }
.home-preloader.is-leaving .home-preloader__footer { transform: translate(-50%, 101vh); transition: transform 650ms cubic-bezier(.76, 0, .18, 1); }

/* Opposite dash directions reproduce KEEP's paired line movement. */
.home-intro-grid { position: fixed; inset: 0; z-index: 2147482999; display: none; opacity: 0; pointer-events: none; overflow: hidden; }
html.home-intro-active .home-intro-grid { display: block; }
.home-intro-grid svg { display: block; width: 100%; height: 100%; }
.home-intro-grid__mobile { display: none !important; }
.home-intro-grid__line {
  fill: none;
  stroke: #ff5a2b;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
  shape-rendering: crispEdges;
}
.home-intro-grid__line--horizontal { stroke-dasharray: 1440; stroke-dashoffset: 1440; --from: 1440; --to: -1440; }
.home-intro-grid__line--horizontal.home-intro-grid__line--reverse { stroke-dashoffset: -1440; --from: -1440; --to: 1440; }
.home-intro-grid__line--vertical { stroke-dasharray: 810; stroke-dashoffset: 810; --from: 810; --to: -810; }
.home-intro-grid__line--vertical.home-intro-grid__line--reverse { stroke-dashoffset: -810; --from: -810; --to: 810; }
.home-intro-grid.is-drawing { opacity: 1; }
.home-intro-grid.is-drawing .home-intro-grid__line { animation: impact-line-travel 1750ms ease-in-out both; }

@keyframes impact-seed-arrive {
  0% { opacity: 1; transform: translateX(calc(-50vw - 100px)) scale(.3); }
  18% { opacity: 1; transform: translateX(-20vw) scale(.65); }
  40%, 63% { opacity: 1; transform: translateX(clamp(80px, 10vw, 150px)) scale(1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes impact-piece-arrive {
  0% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--turn)) scale(.35); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}
@keyframes impact-seed-color { 0%, 18% { fill: #fff; } 38%, 77% { fill: #ff5a2b; } 100% { fill: #fff; } }
@keyframes impact-city-reveal { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes impact-footer-reveal { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes impact-meta-reveal { 0% { opacity: 0; transform: translateY(11px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes impact-line-travel {
  0% { opacity: 0; stroke-dashoffset: var(--from); }
  2% { opacity: 1; }
  30%, 47% { opacity: 1; stroke-dashoffset: 0; }
  98% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: var(--to); }
}

@media (max-width: 600px) {
  .home-preloader__identity { width: min(260px, 66vw); }
  .home-preloader__footer { bottom: max(22px, env(safe-area-inset-bottom)); }
  .home-intro-grid__desktop { display: none !important; }
  .home-intro-grid__mobile { display: block !important; }
  .home-intro-grid__line--horizontal { stroke-dasharray: 390; stroke-dashoffset: 390; --from: 390; --to: -390; }
  .home-intro-grid__line--horizontal.home-intro-grid__line--reverse { stroke-dashoffset: -390; --from: -390; --to: 390; }
  .home-intro-grid__line--vertical { stroke-dasharray: 730; stroke-dashoffset: 730; --from: 730; --to: -730; }
  .home-intro-grid__line--vertical.home-intro-grid__line--reverse { stroke-dashoffset: -730; --from: -730; --to: 730; }
}
@media (prefers-reduced-motion: reduce) {
  .home-preloader, .home-intro-grid { display: none !important; }
}