/* Sierge landing — port of Claude Design "SIERGE Landing Letters" (canvas 7a desktop / 7b mobile).
   Dependency-free. Breakpoint 700px matches the design's isMobile threshold. */

* {
  box-sizing: border-box;
}

/* The overlay toggles panel sections via the hidden attribute; without this, any
   class rule that sets display (e.g. .overlay-info { display: flex }) would win. */
[hidden] {
  display: none !important;
}

html,
body {
  height: 100%;
}

/* The page is a fixed stage: header pinned top, join+footer pinned bottom, and the
   manifesto scrolling inside its own masked window between them. The document itself
   never scrolls — overflow lives in .manifesto-window. */
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #101a13;
  color: #f2f3ec;
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

a {
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 0.25s;
}

a:hover {
  color: rgba(255, 255, 255, 0.95);
}

@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes drift {
  0%,
  100% {
    transform: scale(1.07) translate(0, 0);
  }
  50% {
    transform: scale(1.09) translate(-8px, 6px);
  }
}

/* ---------- background ---------- */

.bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.bg-image {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 90% at 66% 12%, #3c5e40 0%, #22301f 52%, #101a13 100%);
  background-size: cover;
  background-position: center;
  filter: blur(14px);
  transform: scale(1.07);
  animation: drift 26s ease-in-out infinite;
}

.bg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 11, 0.55);
}

.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 50% 46%, transparent 30%, rgba(8, 13, 9, 0.55) 100%);
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 24px 28px;
  gap: 8px;
}

.lockup,
.join {
  flex: none;
}

/* The manifesto's viewport: takes all space between header and join block, scrolls
   internally, and fades text out at both edges (stronger under the header). While
   the reveal runs, manual scrolling is locked (.js, no .free); main.js drives the
   scroll in sync with the writing, then unlocks. No-JS/reduced-motion pages are
   freely scrollable from the start. */
.manifesto-window {
  position: relative;
  flex: 1 1 auto;
  min-height: 120px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  scrollbar-width: none;
  mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 56px,
    #000 calc(100% - 40px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0,
    #000 56px,
    #000 calc(100% - 40px),
    transparent 100%
  );
}

.manifesto-window::-webkit-scrollbar {
  display: none;
}

.js .manifesto-window {
  overflow: hidden;
}

.js .manifesto-window.free {
  overflow-y: auto;
}

.wordmark {
  margin: 0;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0.4em;
  padding-left: 0.4em;
  color: rgba(255, 255, 255, 0.97);
}

.tagline {
  margin: 10px 0 0;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
}

.manifesto {
  display: flex;
  flex-direction: column;
  gap: 26px;
  font-size: 19px;
  line-height: 1.5;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
  max-width: 600px;
  /* Auto margins center it vertically when it fits the window; they collapse to 0
     when it overflows. Padding keeps first/last lines clear of the fade mask. */
  margin-top: auto;
  margin-bottom: auto;
  padding: 56px 0 44px;
}

.manifesto p {
  margin: 0;
}

.line {
  display: block;
}

/* Letter-reveal spans (built by main.js; delays assigned via CSSOM) */
.w {
  display: inline-block;
  white-space: pre;
}

.js .c {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  animation: blurIn 0.35s ease both;
}

/* ---------- intro sequencing (html.js only; without JS everything is simply visible) ---------- */

.js .lockup {
  opacity: 0;
}

.js .tagline {
  opacity: 0;
  transition: opacity 1s ease 0.8s;
}

.js .lockup.settled .tagline {
  opacity: 1;
}

/* Delays are placeholders — main.js re-times both to the actual end of the letter
   reveal (join = end + 0.5s, footer = end + 0.9s, as in the design's proportions). */
.js .join {
  animation: fadeUp 1.2s ease 12.04s both;
}

.js .footer {
  animation: fadeUp 1.2s ease 12.45s both;
}

/* ---------- returning-visitor short intro (html.js-short) ----------
   Quick lockup fade+glide (main.js), tagline close behind, then the whole manifesto
   fades in at once alongside the join block and footer. No letter spans, no scroll
   lock — the manifesto window is freely scrollable from the start. */

.js-short .lockup {
  opacity: 0;
}

.js-short .tagline {
  opacity: 0;
  transition: opacity 0.7s ease 0.3s;
}

.js-short .lockup.settled .tagline {
  opacity: 1;
}

.js-short .manifesto {
  animation: fadeIn 0.9s ease 1.6s both;
}

.js-short .join {
  animation: fadeUp 0.9s ease 1.8s both;
}

.js-short .footer {
  animation: fadeUp 0.9s ease 2s both;
}

/* While either reveal runs, the (invisible) join/footer can't swallow the skip tap. */
html.js:not(.revealed) .join,
html.js:not(.revealed) .footer,
html.js-short:not(.revealed) .join,
html.js-short:not(.revealed) .footer {
  pointer-events: none;
}

/* Skip state: any interaction during the reveal completes the page instantly. */
html.revealed .c {
  animation: none !important;
  opacity: 1 !important;
  filter: none !important;
}

html.revealed .join,
html.revealed .footer,
html.revealed .manifesto {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

html.revealed .tagline {
  transition: none;
  opacity: 1;
}

html.revealed .skip-hint {
  display: none;
}

/* The whispered exit — fades in as the first wave of impatience hits (~4.5s). */
.skip-hint {
  display: none;
}

/* Centered via full-width flex (not translateX — the fadeUp animation owns transform
   and would clobber it). */
.js .skip-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 36px;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
  opacity: 0;
  animation: fadeUp 1s ease 4s both;
  pointer-events: none;
}

.skip-hint svg {
  flex: none;
  opacity: 0.8;
}

@media (min-width: 700px) {
  .js .skip-hint {
    bottom: 88px;
  }
}

.js .skip-hint.off {
  display: none;
}

/* ---------- join block ---------- */

.join {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.join-rule {
  width: 44px;
  height: 1px;
  background: rgba(255, 255, 255, 0.28);
}

.join-tag {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  font-style: italic;
  color: rgba(255, 255, 255, 0.62);
}

.join-label {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.48);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.join-cities {
  display: flex;
  gap: 14px;
}

.city-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 30px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 0.5px solid rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 24px rgba(255, 255, 255, 0.08),
    0 8px 30px rgba(0, 0, 0, 0.25);
  transition:
    background 0.3s ease,
    color 0.35s ease,
    transform 0.4s ease;
  cursor: pointer;
}

/* Hover: gradual uniform growth in place + text to full white — no glow surge, no jump. */
.city-btn:hover {
  transform: scale(1.04);
  color: rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.09);
}

/* ---------- footer ---------- */

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 36px 26px;
  font-size: 13.5px;
}

.footer-group {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.copyright {
  color: rgba(255, 255, 255, 0.42);
}

/* ---------- city overlay (desktop: split view · mobile: full-bleed) ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #0a100c;
  animation: fadeUp 0.45s ease both;
}

.overlay[hidden] {
  display: none;
}

.overlay-photos .photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.overlay-photos .photo.on {
  opacity: 1;
}

.overlay-city {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.overlay-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.25s;
}

.overlay-close:hover {
  background: rgba(255, 255, 255, 0.1);
}

.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.overlay-item {
  display: block;
  width: 100%;
  padding: 16px 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: none;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.42);
  transition: color 0.3s;
}

.overlay-item.on {
  color: rgba(255, 255, 255, 0.96);
}

.overlay-item .n {
  display: block;
  font-size: 22px;
  font-weight: 600;
}

.overlay-item .k {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}

.overlay-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.overlay-blurb {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

.overlay-link {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  align-self: flex-start;
  padding-bottom: 2px;
}

.overlay-kind {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* Street address, tucked under the blurb; links out to a map. */
.overlay-address {
  margin-top: -6px;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
  align-self: flex-start;
}

/* City-level footnote under the studio info. */
.overlay-note {
  margin: 2px 0 0;
  font-size: 13px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.45);
}

/* Pre-cohort city: the announcement that stands in for the studio list. */
.overlay-announce {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 430px;
}

.overlay-announce p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.overlay-announce p:last-child {
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.overlay-name {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.1;
}

.overlay-rail {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.rail-card {
  flex: none;
  width: 104px;
  height: 64px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0.6;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  transition:
    border-color 0.3s,
    opacity 0.3s;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  text-align: left;
}

.rail-card.on {
  border-color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

/* desktop split view (variant B) */
@media (min-width: 700px) {
  .overlay-photos {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 400px;
    right: 0;
    overflow: hidden;
  }

  .overlay-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 400px;
    width: 140px;
    background: linear-gradient(90deg, #0a100c 0%, transparent 100%);
  }

  .overlay-scrim {
    display: none;
  }

  .overlay-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 400px;
    display: flex;
    flex-direction: column;
    padding: 32px 36px;
    text-align: left;
  }

  .overlay-head {
    margin-bottom: 34px;
  }

  .overlay-list {
    display: flex;
    flex-direction: column;
  }

  .overlay-info {
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }

  .overlay-kind,
  .overlay-name,
  .overlay-rail {
    display: none;
  }
}

/* mobile full-bleed (variant A) */
@media (max-width: 699.98px) {
  .overlay-photos {
    position: absolute;
    inset: 0;
    overflow: hidden;
  }

  .overlay-edge {
    display: none;
  }

  .overlay-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      rgba(8, 13, 9, 0.86) 0%,
      rgba(8, 13, 9, 0.42) 46%,
      rgba(8, 13, 9, 0.12) 100%
    );
  }

  .overlay-scrim::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 13, 9, 0.94) 100%);
  }

  .overlay-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    padding: 20px;
    text-align: left;
  }

  .overlay-close {
    width: 40px;
    height: 40px;
    font-size: 16px;
    background: rgba(10, 16, 12, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .overlay-list {
    display: none;
  }

  .overlay-info {
    margin-top: auto;
    gap: 12px;
    max-width: 540px;
  }

  .overlay-blurb {
    font-size: 16px;
    max-width: 430px;
  }

  /* Announcement sits where the studio info would: bottom-anchored over the scrim. */
  .overlay-announce {
    margin-top: auto;
    margin-bottom: 6px;
  }
}

/* ---------- mobile hero (canvas 7b) ---------- */

@media (max-width: 699.98px) {
  .hero {
    padding: 40px 20px 20px;
    gap: 6px;
  }

  .wordmark {
    font-size: 28px;
  }

  .manifesto {
    gap: 22px;
    font-size: 16px;
    line-height: 1.55;
  }

  .footer {
    padding: 0 20px 22px;
    font-size: 12px;
  }
}

/* ---------- reduced motion: everything visible, nothing animates ----------
   boot.js already skips the .js class for these users; this is belt-and-braces.
   The background keeps its blur (aesthetic, not motion) — only the drift stops. */

@media (prefers-reduced-motion: reduce) {
  .bg-image,
  .overlay {
    animation: none !important;
  }

  .js .lockup,
  .js .tagline,
  .js .join,
  .js .footer,
  .js .c {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}