/* Electric Stack Industries — sheet 1 of 1.
   The page is an engineering drawing: frame, zone coordinates, title block,
   and a live schematic field behind a wireframe mark. */

:root {
  --bg: #070b12;
  --frame: #2b3b54;
  --text: #c9d6e8;
  --text-dim: #5f7391;
  --accent: #6fb3ff;
  /* canvas reads these */
  --sch-ink: #45648f;
  --sch-text: #5b7aa6;
  --sch-accent: #7fbcff;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- layers */

#bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100lvh; /* extend under iOS Safari's collapsing liquid-glass bars */
  display: block;
}

.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 46% 38% at 50% 44%, rgba(7, 11, 18, 0.86), rgba(7, 11, 18, 0.45) 55%, rgba(7, 11, 18, 0) 78%),
    radial-gradient(ellipse 120% 120% at 50% 50%, rgba(7, 11, 18, 0) 55%, rgba(3, 5, 9, 0.55) 100%);
}

.vignette, .grain {
  height: 100vh;
  height: 100lvh; /* match #bg under the iOS toolbar */
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* ---------------------------------------------------------------- center */

.center {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  padding: 0 24px;
}

.mark {
  width: min(340px, 66vw);
  color: var(--accent);
  filter: drop-shadow(0 0 18px rgba(111, 179, 255, 0.18));
}

.mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1.3s cubic-bezier(0.6, 0, 0.2, 1) forwards;
}
.mark path:nth-child(1) { animation-delay: 0.15s; }
.mark path:nth-child(2) { animation-delay: 0.30s; }
.mark path:nth-child(3) { animation-delay: 0.45s; }
.mark path:nth-child(4) { animation-delay: 0.65s; }
.mark path:nth-child(5) { animation-delay: 0.85s; }
.mark path:nth-child(6) { animation-delay: 1.00s; }
.mark path:nth-child(7) { animation-delay: 1.10s; }
.mark path:nth-child(8) { animation-delay: 1.20s; }

.rule {
  width: 46px;
  height: 1px;
  background: var(--frame);
  opacity: 0;
  animation: fade-in 1s 1.3s ease-out forwards;
}

.line {
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.3em;
  margin-left: 0.3em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0;
  animation: rise 1s 1.5s ease-out forwards;
}

.contact {
  margin-top: 14px;
  align-self: center;
  font-size: 11px;
  letter-spacing: 0.34em;
  margin-left: 0.34em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--frame);
  padding: 10px 26px 9px;
  opacity: 0;
  animation: rise 1s 1.8s ease-out forwards;
  transition: color 0.25s, border-color 0.25s, box-shadow 0.25s, background 0.25s;
}

.contact:hover, .contact:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 24px rgba(111, 179, 255, 0.22), inset 0 0 14px rgba(111, 179, 255, 0.07);
  outline: none;
}

/* ----------------------------------------------------------------- stamp */

.stamp {
  position: fixed;
  left: calc(24px + env(safe-area-inset-left, 0px));
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0;
  animation: fade-dim 1.2s 2.1s ease-out forwards;
}

/* ------------------------------------------------------------- keyframes */

/* dasharray butt-caps a closed path's start corner instead of joining it —
   drop the dash once fully drawn so every corner gets a real miter join */
@keyframes draw {
  0%     { stroke-dashoffset: 1; }
  99.99% { stroke-dashoffset: 0; stroke-dasharray: 1; }
  100%   { stroke-dashoffset: 0; stroke-dasharray: none; }
}
@keyframes fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-dim { from { opacity: 0; } to { opacity: 0.55; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 760px) {
  .stamp { left: 50%; transform: translateX(-50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .mark path, .rule, .line, .contact, .stamp {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
    stroke-dasharray: none;
  }
  .stamp { opacity: 0.55; }
}