/*
 * Homepage hero portrait composition, 27 August 2026.
 *
 * The supplied portrait is treated as atmosphere inside the hero, not as a
 * card. Its negative space protects the copy while the existing neon mark is
 * retained only as a very quiet brand-light echo. This is a reversible visual
 * candidate until Stefan accepts the composition.
 */
.narrative-hero.narrative-hero--portrait {
  isolation: isolate;
  overflow: hidden;
}

.narrative-hero--portrait .narrative-hero__grid {
  grid-template-columns: minmax(0, 1fr);
  position: static;
}

.narrative-hero--portrait .narrative-hero__copy {
  max-width: 720px;
  position: relative;
  z-index: 3;
}

.narrative-hero--portrait .narrative-hero__stage--portrait {
  aspect-ratio: auto;
  height: 100%;
  inset: 0;
  max-width: none;
  min-height: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
  z-index: 0;
}

.home-hero-image--portrait {
  background: #071012;
  border: 0;
  box-shadow: none;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.home-hero-image--portrait::before,
.home-hero-image--portrait::after {
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* Copy protection and a quiet cinematic falloff at the top and bottom. */
.home-hero-image--portrait::before {
  background:
    linear-gradient(90deg, rgba(8, 16, 17, .99) 0%, rgba(8, 16, 17, .96) 16%, rgba(8, 16, 17, .77) 35%, rgba(8, 16, 17, .25) 57%, rgba(8, 16, 17, .08) 100%),
    linear-gradient(180deg, rgba(3, 9, 10, .72) 0%, transparent 21%, transparent 73%, rgba(3, 9, 10, .78) 100%);
  z-index: 2;
}

/* The face remains the visual anchor, while the image edges dissolve into
   the site's dark field instead of reading as a rectangular photo. */
.home-hero-image--portrait::after {
  background:
    radial-gradient(circle at 71% 42%, rgba(15, 180, 255, .08), transparent 24%),
    radial-gradient(circle at 86% 56%, rgba(25, 246, 210, .08), transparent 28%),
    linear-gradient(90deg, transparent 51%, rgba(8, 16, 17, .18) 76%, rgba(8, 16, 17, .76) 100%);
  mix-blend-mode: screen;
  z-index: 3;
}

.home-hero-image--portrait .home-hero-image__portrait,
.home-hero-image--portrait .home-hero-image__monogram {
  display: block;
  height: 100%;
  inset: 0;
  max-width: none;
  object-fit: cover;
  position: absolute;
  width: 100%;
}

.home-hero-image--portrait .home-hero-image__portrait {
  filter: saturate(.88) contrast(.94) brightness(.64);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 11%, #000 88%, transparent 100%);
  mask-composite: intersect;
  object-position: center center;
  opacity: .94;
  transform: scale(.70);
  transform-origin: 70% center;
  z-index: 1;
}

/* Keep the portfolio mark present as light, not as a second visual object. */
.home-hero-image--portrait .home-hero-image__monogram {
  filter: saturate(1.16) blur(.2px);
  mask-image: radial-gradient(circle at 70% 50%, #000 0 11%, transparent 39%);
  mix-blend-mode: screen;
  opacity: .12;
  z-index: 4;
}

@media (max-width: 1080px) {
  .narrative-hero--portrait .narrative-hero__copy {
    max-width: 680px;
  }

  .home-hero-image--portrait::before {
    background:
      linear-gradient(90deg, rgba(8, 16, 17, .99) 0%, rgba(8, 16, 17, .92) 23%, rgba(8, 16, 17, .54) 53%, rgba(8, 16, 17, .13) 100%),
      linear-gradient(180deg, rgba(3, 9, 10, .66), transparent 22%, transparent 73%, rgba(3, 9, 10, .8));
  }
}

@media (max-width: 600px) {
  .narrative-hero.narrative-hero--portrait {
    min-height: min(760px, 100svh);
  }

  .narrative-hero--portrait .narrative-hero__grid {
    min-height: 100%;
  }

  .home-hero-image--portrait .home-hero-image__portrait {
    object-position: 62% center;
    transform: scale(.72);
    transform-origin: 70% center;
  }

  .home-hero-image--portrait::before {
    background:
      linear-gradient(90deg, rgba(8, 16, 17, .995) 0%, rgba(8, 16, 17, .9) 48%, rgba(8, 16, 17, .32) 82%, rgba(8, 16, 17, .14) 100%),
      linear-gradient(180deg, rgba(3, 9, 10, .86) 0%, rgba(3, 9, 10, .1) 28%, rgba(3, 9, 10, .18) 67%, rgba(3, 9, 10, .92) 100%);
  }

  .home-hero-image--portrait .home-hero-image__monogram {
    opacity: .08;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hero-image--portrait .home-hero-image__portrait,
  .home-hero-image--portrait .home-hero-image__monogram {
    transition: none;
  }
}