/* StreetCat gateway homepage — intro animation + HOME state.
   Self-contained: no dependency on the shared styles.css/script.js. */

:root {
  --gw-ink: #050505;
  --gw-paper: #ffffff;
  --gw-font: "Unbounded", Arial, Helvetica, sans-serif;

  /* Tunable motion knobs */
  --gw-dur-text: 460ms; /* each text item's fade/slide */
  --gw-stagger: 100ms;  /* delay between successive text items */
  --gw-ease-text: cubic-bezier(.2, .8, .2, 1);
  --gw-text-rise: 14px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--gw-paper);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: var(--gw-font);
  color: var(--gw-ink);
}

.gw-stage {
  /* Mobile: vertical swipes go to StreetCat Studio / INTO art (home-intro.js),
     so the browser must not scroll or pull-to-refresh on them. */
  touch-action: none;
  overscroll-behavior: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--gw-paper);
  overflow: hidden;
}

.gw-cat-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
  pointer-events: none;
}

/* ---- Desktop typography (SVG, same 1920x1080 space as the artwork) ----
   Every type layer is blended with "difference" and filled white, so all
   StreetCat Studio type is black on white and all INTO art type is white on
   black, and type that crosses the boundary mid-transition stays legible:
   white  -> black on white / white on black
   #000   -> white inside a hovered (white-filled) ENTER box
   The palette is black, white and #00ddee only; the cyan appears only in
   the glitch (.gw-glitch-layer, unblended). */
.gw-type-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .3s ease;
}

.gw-type-svg.is-visible {
  opacity: 1;
}

/* Desktop's second type layer (services, art lines, ENTER). */
.gw-type-svg--flat {
  z-index: 4;
}

/* Cyan glitch copies (home-intro.js): unblended, so #00ddee stays #00ddee. */
.gw-glitch-layer {
  mix-blend-mode: normal;
  opacity: 1;
  pointer-events: none;
  transition: none;
  z-index: 6;
}

.gw-glitch-layer * { pointer-events: none !important; }
.gw-glitch-copy text,
.gw-glitch-layer path,
.gw-glitch-layer polygon { fill: #00ddee !important; }
.gw-glitch-copy .gw-btn-box { fill: none !important; stroke: #00ddee !important; }

.gw-type-svg text,
.gw-measure {
  font-family: "Unbounded", Arial, Helvetica, sans-serif;
  white-space: pre;
}

.gw-measure {
  visibility: hidden;
}

.gw-t-title text { font-weight: 800; fill: #fff; }
.gw-t-title.gw-t-studio text { font-size: 62.76px; }
.gw-t-title.gw-t-art text { font-size: 72px; }

.gw-t-body text { font-weight: 400; font-size: 18px; }
.gw-t-body.gw-t-studio text { fill: #fff; }
.gw-t-body.gw-t-art text { fill: #fff; }

.gw-t-sub text { font-weight: 500; font-size: 24px; fill: #fff; }

.gw-t-btn text { font-weight: 400; font-size: 16.79px; }
.gw-t-btn.gw-t-studio text { fill: #fff; }
.gw-t-btn.gw-t-art text { fill: #fff; }
.gw-btn-arrow { fill: #fff; }

.gw-btn-box {
  fill: transparent;
  stroke-width: 1;
  transition: fill .25s ease;
}

.gw-t-btn.gw-t-studio .gw-btn-box { stroke: #fff; }
.gw-t-btn.gw-t-art .gw-btn-box { stroke: #fff; }

.gw-slice { display: none; }

.gw-enter-svg {
  pointer-events: auto;
  cursor: pointer;
  outline: none;
}

.gw-enter-svg .gw-btn-box { pointer-events: all; }

.gw-enter-svg--studio:hover .gw-btn-box,
.gw-enter-svg--studio:focus-visible .gw-btn-box { fill: #fff; }
.gw-enter-svg--studio:hover text,
.gw-enter-svg--studio:focus-visible text { fill: #000; }
.gw-enter-svg--art:hover .gw-btn-box,
.gw-enter-svg--art:focus-visible .gw-btn-box { fill: #fff; }
.gw-enter-svg--art:hover text,
.gw-enter-svg--art:focus-visible text { fill: #000; }
.gw-enter-svg:hover .gw-btn-arrow,
.gw-enter-svg:focus-visible .gw-btn-arrow { fill: #000; }

.gw-reveal-svg {
  opacity: 0;
  transform: translateY(var(--gw-text-rise));
  transition: opacity var(--gw-dur-text) var(--gw-ease-text),
              transform var(--gw-dur-text) var(--gw-ease-text);
}

.gw-reveal-svg.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Desktop / mobile mode (set on .gw-stage by home-intro.js) ---- */
.gw-type-svg--mobile,
.gw-mode-mobile .gw-type-svg:not(.gw-type-svg--mobile) {
  display: none;
}

.gw-mode-mobile .gw-type-svg--mobile {
  display: block;
}

/* Mobile sizes, from mobile-home.svg (360x800 units). */
/* Sized down from the reference (titles 36.79 / 38.4, sub 12.35, body
   9.26) so the type clears the cats. Every line sits on one left grid line
   (x 28.14 in index.html). */
.gw-type-svg--mobile .gw-t-title.gw-t-studio text { font-size: 22px; }
.gw-type-svg--mobile .gw-t-title.gw-t-art text { font-size: 22px; }
.gw-type-svg--mobile .gw-t-body text { font-size: 8.4px; }
.gw-type-svg--mobile .gw-t-sub text { font-size: 10.5px; }
.gw-type-svg--mobile .gw-t-btn text { font-size: 8.63px; }

.page-transition {
  background: #000;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity .6s cubic-bezier(.55, 0, .2, 1);
  z-index: 1000;
}

.page-transition.is-active {
  opacity: 1;
  pointer-events: auto;
}