/* Stalworth concrete entrance. Used only with /stalworth-intro.js. */
:root {
  --stw-concrete: #d6d2cb;
  --stw-red: #c4161c;
  --stw-ink: #0e0e0e;
  --stw-display: "Avenir Next Condensed", "Barlow Condensed", "Roboto Condensed", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
}

/* Before the overlay mounts: cover the page so the homepage does not flash.
   Failsafe: the cover lifts on its own after 2.5s even if the script stops. */
html.stw-intro-pending::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  background: var(--stw-concrete);
  animation: stw-failsafe .3s 2.5s forwards;
}
html.stw-intro-active, html.stw-intro-active body { overflow: hidden; }

.stw-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  overflow: hidden;
  background: var(--stw-concrete);
  /* Failsafe: never outlive the sequence, even if the script stops responding. */
  animation: stw-failsafe .4s 9.5s forwards;
}
.stw-stage { position: absolute; inset: 0; will-change: transform; }
.stw-slab {
  position: absolute;
  inset: -28px;
  background-color: var(--stw-concrete);
  background-size: 180px 180px;
}
/* Light falloff, two faint form seams and a darker edge give the slab depth. */
.stw-slab::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(transparent calc(33% - 1px), rgba(90, 84, 76, .16) calc(33% - 1px), rgba(90, 84, 76, .16) 33%, rgba(255, 255, 255, .35) 33%, transparent calc(33% + 2px)),
    linear-gradient(transparent calc(71% - 1px), rgba(90, 84, 76, .14) calc(71% - 1px), rgba(90, 84, 76, .14) 71%, rgba(255, 255, 255, .3) 71%, transparent calc(71% + 2px)),
    radial-gradient(ellipse at 50% 45%, rgba(255, 255, 255, .38) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(40, 34, 28, .32) 100%);
}
.stw-cracks, .stw-dust { position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; pointer-events: none; }
.stw-cracks { overflow: visible; }
.stw-crack { fill: #24201d; stroke: #24201d; stroke-width: .6; stroke-linejoin: round; }
.stw-crack-edge { fill: rgba(255, 255, 255, .7); transform: translate(1px, 1.4px); }

.stw-words { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 4vw; }
.stw-word, .stw-logo { grid-area: 1 / 1; }
.stw-word {
  font-family: var(--stw-display);
  font-stretch: condensed;
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.005em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--stw-red);
  /* A cast-slab edge, then the shadow it throws onto the concrete. */
  text-shadow: 0 1px 0 #a31117, 0 2px 0 #8c0e13, 0 3px 0 #760b10, 0 5px 2px rgba(40, 20, 16, .35), 0 14px 26px rgba(40, 30, 24, .35);
  will-change: transform, opacity;
}
.stw-logo {
  width: min(72vw, 54vh, 460px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(40, 30, 24, .3));
}

.stw-skip {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 2;
  min-width: 48px;
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid var(--stw-ink);
  background: var(--stw-ink);
  color: #fff;
  font: 700 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  cursor: pointer;
}
.stw-skip:hover { background: var(--stw-red); border-color: var(--stw-red); }
.stw-skip:focus-visible { outline: 3px solid var(--stw-red); outline-offset: 3px; }
.stw-leaving .stw-skip { visibility: hidden; }
.stw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Preview page only: replay control. */
.stw-replay {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 40;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--stw-ink);
  background: #fff;
  color: var(--stw-ink);
  font: 700 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  cursor: pointer;
}
.stw-replay:hover:not(:disabled) { background: var(--stw-ink); color: #fff; }
.stw-replay:focus-visible { outline: 3px solid var(--stw-red); outline-offset: 3px; }
.stw-replay:disabled { cursor: default; color: #505050; border-color: #8a8a8a; }

@keyframes stw-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

@media (prefers-reduced-motion: reduce) {
  html.stw-intro-pending::after, .stw-intro { display: none; }
}