/* Top hero redesign — scoped so existing page theme stays intact */

.top-hero {
  --ink: #5c374c;
  --panel: #985277;
  --peach: #faa275;
  --coral: #ff8c61;
  --blush: #ce6a85;
  --aqua: #7fd6d3;
  --cream: var(--peach);
  --white: var(--peach);
  --muted: rgba(250, 162, 117, 0.68);
  --violet: var(--coral);
  --cyan: var(--blush);
  --rose: var(--blush);

  position: relative;
  align-self: stretch;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  isolation: isolate;
  z-index: 1;
}


.top-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.top-hero__bg canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.top-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 38% 50%, rgba(92, 55, 76, 0.7), rgba(92, 55, 76, 0) 72%);
}

/* Mouse parallax: hero-bg.js sets --mx / --my in [-1, 1] */
.top-hero {
  --mx: 0;
  --my: 0;
}

.top-hero__title {
  will-change: transform;
  transform: perspective(1000px)
    rotateY(calc(var(--mx) * 2deg))
    rotateX(calc(var(--my) * -1.5deg));
}

.top-hero__title .w {
  --depth: 1;
  will-change: transform;
  transform: translate3d(
    calc(var(--mx) * var(--depth) * 8px + var(--gx, 0px)),
    calc(var(--my) * var(--depth) * 5px),
    0
  );
}

.top-hero__title .w:nth-child(1) { --depth: 0.45; }
.top-hero__title .w:nth-child(2) { --depth: 1; }
.top-hero__title .w:nth-child(3) { --depth: -0.7; }
.top-hero__title .w:nth-child(4) { --depth: 0.55; }

.top-hero__content {
  position: relative;
  z-index: 2;
  text-align: left;
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: min(92vw, 56rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

.top-hero__kicker {
  margin: 0 0 0.35rem;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(0.7rem, 1.4vw, 0.85rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.top-hero__title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 0.72;
  text-shadow: 0 2px 28px rgba(92, 55, 76, 0.55);
}

.top-hero__title .w {
  display: block;
  margin: 0;
  padding: 0;
  letter-spacing: -0.045em;
  font-size: clamp(3.6rem, 14vw, 8.25rem);
  font-weight: 800;
}

.top-hero__title .w--serif {
  font-family: "Libre Bodoni", "Bodoni MT", "Didot", Georgia, serif;
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.02em;
}

.top-hero__title .w--sans {
  font-family: "Archivo Black", "Impact", system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.04em;
  text-transform: none;
}

.top-hero__title .w--cream { color: var(--peach); }
.top-hero__title .w--violet { color: var(--coral); }
.top-hero__title .w--cyan { color: var(--blush); }
.top-hero__title .w--rose { color: var(--peach); }

/* hero-title.js cycles data-title; each title owns one color */
.top-hero__title[data-title="0"] .w--role { color: var(--blush); }
.top-hero__title[data-title="1"] .w--role { color: var(--aqua); }
.top-hero__title[data-title="2"] .w--role { color: var(--coral); }

.top-hero__title .w--role {
  white-space: nowrap;
}

.top-hero__title .w--role.is-glitching {
  filter: url(#hero-pixelate);
}

.top-hero__filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.top-hero__title .w--nima {
  position: relative;
  padding-right: 0.25em;
}

/* JS places left/top/size from the a glyph; CSS is fallback */
.hero-comma {
  position: absolute;
  left: calc(100% - 0.55em);
  top: 0.35em;
  width: 0.22em;
  height: 0.32em;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
  letter-spacing: normal;
}

.hero-comma canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-comma--fallback {
  position: absolute;
  left: 100%;
  top: 0.38em;
  width: auto;
  height: auto;
  font-style: italic;
  font-weight: 700;
  line-height: 1;
  font-size: 0.5em;
  color: var(--coral);
  margin-left: 0.01em;
}

.top-hero__location {
  margin: clamp(1.75rem, 4vw, 2.75rem) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.95em 0.5em 0.75em;
  border-radius: 999px;
  background: rgba(92, 55, 76, 0.82);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.6vw, 1.05rem);
  letter-spacing: 0.01em;
  color: var(--peach);
  white-space: nowrap;
  cursor: default;
}

.top-hero__location [data-location-text] strong {
  font-weight: 700;
}

.top-hero__socials {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.2rem;
  padding-left: 0.55rem;
  border-left: 1px solid rgba(250, 162, 117, 0.35);
}

.top-hero__social {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.3rem;
  opacity: 1;
}

.top-hero__social img {
  width: 1rem;
  height: 1rem;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(77%) sepia(35%) saturate(713%) hue-rotate(329deg) brightness(101%);
}

.top-hero__social:focus-visible {
  outline: 1px solid var(--peach);
  outline-offset: 3px;
}

/* Hidden until hero-title.js glitches it in (fold-ready means motion is allowed) */
.fold-ready .top-hero__location:not(.is-in) {
  opacity: 0;
}

.top-hero__location.is-in {
  animation: location-bg-in 0.35s steps(4, end) both;
}

@keyframes location-bg-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.top-hero__pin {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  fill: var(--coral);
}

.top-hero__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.top-hero__sub {
  margin: 1rem 0 0;
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.45;
  color: var(--muted);
  max-width: 28rem;
}

.top-hero__scroll {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(1.25rem, 4vh, 2.25rem);
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--peach);
  border-radius: 999px;
  padding: 0.75em 1.5em;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  transition: background 0.25s ease;
}

/* Short screens: keep the bottom-pinned scroll hint clear of the content */
@media (max-height: 640px) {
  .top-hero__content {
    padding-bottom: 5rem;
  }
}

.top-hero__scroll:hover {
  background: var(--coral);
}

.top-hero__scroll:focus-visible {
  background: var(--coral);
  outline: 2px solid var(--peach);
  outline-offset: 3px;
}