.hero {
  position: relative;
  min-height: 90vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-kolabora-neutral-dark);
  color: var(--color-kolabora-neutral-white);
}

.heroGrain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.08;
}

.heroContours {
  position: absolute;
  width: 160%;
  height: 160%;
  top: -30%;
  left: -30%;
  background-image: repeating-radial-gradient(circle at 50% 50%,
      transparent 0,
      transparent 48px,
      color-mix(in srgb, var(--color-kolabora-secondary) 4.5%, transparent) 49px,
      transparent 50px);
  pointer-events: none;
  z-index: 1;
}

.viewport {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 2000px;
  z-index: 3;
}

.canvas3d {
  position: relative;
  width: min(800px, 88vw);
  height: min(500px, 55vh);
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s ease;
}

.layer svg {
  width: 54%;
  height: auto;
  overflow: visible;
}

.layer1 svg .kFill {
  fill: var(--color-kolabora-secondary);
  opacity: 0.14;
}

.layer2 svg .kFill {
  fill: var(--color-kolabora-tertiary);
  opacity: 0.38;
}

.layer3 svg .kFill {
  fill: var(--color-kolabora-primary);
}

.layer3 svg {
  clip-path: inset(0 100% 0 0);
  animation: heroWipeK 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.7s forwards;
}

@keyframes heroWipeK {
  to {
    clip-path: inset(0 0 0 0);
  }
}

.brandLogo {
  height: 56px;
  width: auto;
  display: block;
}

.layerFloor {
  position: absolute;
  inset: 6% 10%;
  border: 1px solid color-mix(in srgb, var(--color-kolabora-secondary) 14%, transparent);
  background:
    repeating-linear-gradient(0deg, transparent 0 59px, color-mix(in srgb, var(--color-kolabora-secondary) 5%, transparent) 59px 60px),
    repeating-linear-gradient(90deg, transparent 0 59px, color-mix(in srgb, var(--color-kolabora-secondary) 5%, transparent) 59px 60px);
}

.heroContent {
  position: absolute;
  inset: 0;
  padding: clamp(1.5rem, 4vw, 4rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  z-index: 10;
  pointer-events: none;
}

.heroBrand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.heroMeta {
  text-align: right;
  font-family: var(--font-archivo), monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--color-kolabora-primary);
  line-height: 1.9;
  text-transform: uppercase;
}

.heroHeadline {
  grid-column: 1 / -1;
  align-self: center;
}

.heroTitle {
  /* Pinned directly to Archivo, not --font-heading — KOLABORA stays
     Archivo even though --font-heading now points at Clash Display
     sitewide (see globals.css). */
  font-family: var(--font-archivo);
  font-weight: 600;
  font-size: clamp(2.8rem, 9vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--color-kolabora-secondary);
  mix-blend-mode: normal;
  text-transform: uppercase;
}

.heroTitle em {
  font-style: normal;
  color: var(--color-kolabora-primary);
  mix-blend-mode: normal;
}

/* Sits right under KOLABORA — noticeably smaller than the display
   headline, but scaled with the same clamp() curve so the size
   relationship (and thus "slightly smaller than KOLABORA") holds at
   every viewport width instead of just at one breakpoint. */
.heroSubtitle {
  margin-top: 0.4rem;
  font-family: var(--font-clash-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 4vw, 3.6rem);
  color: var(--color-kolabora-secondary);
  opacity: 0.85;
}

/* Desktop only: split headline and 3D K-mark side by side so the text no
   longer sits on top of the graphic. The decorative contour-ring
   background is re-centered to track the K-mark's new position (roughly
   66% across at this breakpoint's canvas/padding values) instead of
   staying centered on the whole section, so it doesn't read as
   mismatched. Below this breakpoint there isn't enough width for a
   side-by-side split, so the centered/overlapping composition (matching
   the original approved reference) stays as-is. */
@media (min-width: 1024px) {
  .viewport {
    justify-content: flex-end;
    padding-right: 4%;
  }

  .canvas3d {
    width: min(620px, 42vw);
    height: min(420px, 46vh);
  }

  .heroHeadline {
    grid-column: 1 / 2;
    justify-self: start;
    max-width: 92%;
  }

  .heroTitle {
    font-size: clamp(2.6rem, 5.4vw, 6rem);
    color: var(--color-kolabora-secondary);
    mix-blend-mode: normal;
  }

  .heroSubtitle {
    font-size: clamp(1.1rem, 2.6vw, 2.4rem);
  }

  .heroContours {
    background-image: repeating-radial-gradient(circle at 66% 50%,
        transparent 0,
        transparent 48px,
        color-mix(in srgb, var(--color-kolabora-secondary) 4.5%, transparent) 49px,
        transparent 50px);
  }
}

.heroFooter {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 1.5rem;
}


.ctaButton {
  pointer-events: auto;
  display: inline-block;
  background: var(--color-kolabora-primary);
  color: var(--color-kolabora-neutral-white);
  padding: 1rem 2.2rem;
  text-decoration: none;
  font-family: var(--font-clash-display);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 88% 100%, 0 100%);
  transition: background 0.3s, color 0.3s, transform 0.3s;
  white-space: nowrap;

  &:hover {
    background: var(--color-kolabora-secondary);
    color: var(--color-kolabora-neutral-dark);
    transform: translateY(-4px);
  }

  &:focus-visible {
    outline: 2px solid var(--color-kolabora-secondary);
    outline-offset: 3px;
  }
}

.scrollHint {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  width: 1px;
  height: 52px;
  background: linear-gradient(to bottom, var(--color-kolabora-secondary), transparent);
  animation: heroFlow 2s infinite ease-in-out;
  z-index: 10;
}

@keyframes heroFlow {

  0%,
  100% {
    transform: scaleY(0);
    transform-origin: top;
  }

  50% {
    transform: scaleY(1);
    transform-origin: top;
  }

  51% {
    transform: scaleY(1);
    transform-origin: bottom;
  }
}

/* Laptop/desktop only: the in-hero CTA is replaced by a floating clone
   portaled to <body> (see HeroBanner.tsx) so it stays pinned above the
   About/Event sections that slide over Hero, instead of losing that
   z-index fight from inside Hero's own "isolate" stacking context. */
.ctaFloating {
  display: none;
}

@media (min-width: 1024px) {
  .ctaInline {
    display: none;
  }

  .ctaFloating {
    display: inline-block;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 90vh;
  }

  .heroMeta {
    display: none;
  }

  .heroBrand {
    grid-column: 1 / -1;
  }

  .heroFooter {
    flex-direction: column;
    align-items: center;
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  }

  .ctaButton {
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {

  .canvas3d,
  .layer {
    transition: none !important;
  }

  .scrollHint {
    animation: none;
  }

  .layer3 svg {
    animation: none;
    clip-path: inset(0 0 0 0);
  }
}