/* Portrait background for the homepage.
   Only applied when .hero.has-portrait is set by site.js for the active theme. */

.portrait-layer,
.hero-credit {
  display: none;
}

.hero.has-portrait .hero-bg,
.hero.has-portrait .hero__bg {
  display: none !important;
}

.hero.has-portrait .hero__coords {
  display: none;
}

.hero.has-portrait .hero-credit {
  display: block;
  flex: 0 0 auto;
  text-align: right;
  color: var(--muted);
  font: 9px/1.55 var(--mono);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.hero.has-portrait .hero-credit span {
  display: block;
}

.hero.has-portrait .hero-credit span:first-child {
  color: var(--ink);
}

.hero.has-portrait .portrait-layer {
  display: block;
  position: absolute;
  z-index: 0;
  inset: 0 0 0 49%;
  overflow: hidden;
  background: transparent;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 10%, #000 32%, #000 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.35) 10%, #000 32%, #000 100%);
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

.hero.has-portrait .portrait-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  filter: grayscale(0.35) contrast(1.08) brightness(0.92);
  transform: none;
  transform-origin: 50% 16%;
}

.hero.has-portrait .portrait-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: color;
  opacity: 0.18;
}

.hero.has-portrait .portrait-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, rgba(11, 11, 12, 0.48) 17%, transparent 62%),
    linear-gradient(0deg, var(--bg) 0%, transparent 44%);
}

/* Optional light-theme portrait: the light homepage stays untouched while off.
   When enabled, it uses a high-key treatment so dark type stays readable. */
[data-theme="light"] .hero.has-portrait .portrait-layer {
  background: #efefef;
}

[data-theme="light"] .hero.has-portrait .portrait-layer img {
  filter: grayscale(0.25) contrast(0.92) brightness(1.12);
  transform: translate(80px, -120px) scale(1.1);
}

[data-theme="light"] .hero.has-portrait .portrait-layer::before {
  background: var(--bg);
  mix-blend-mode: normal;
  opacity: 0.64;
}

[data-theme="light"] .hero.has-portrait .portrait-layer::after {
  background:
    linear-gradient(180deg, rgba(239, 239, 239, 0.94) 0%, rgba(239, 239, 239, 0.76) 10%, rgba(239, 239, 239, 0.04) 24%, transparent 32%),
    linear-gradient(90deg, var(--bg) 0%, rgba(239, 239, 239, 0.82) 22%, rgba(239, 239, 239, 0.28) 64%, transparent 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 36%);
}

[data-theme="light"] .hero.has-portrait .hero-credit span:first-child {
  color: var(--ink);
}

@media (max-width: 900px) {
  .hero.has-portrait .portrait-layer {
    inset: 0;
    clip-path: none;
  }

  .hero.has-portrait .portrait-layer img {
    object-position: 52% 18%;
    transform: scale(1.06);
    filter: grayscale(0.35) contrast(1.1) brightness(0.78);
  }

  .hero.has-portrait .portrait-layer::before {
    opacity: 0.14;
  }

  .hero.has-portrait .portrait-layer::after {
    background:
      linear-gradient(90deg, var(--bg) 2%, rgba(11, 11, 12, 0.72) 45%, rgba(11, 11, 12, 0.28) 100%),
      linear-gradient(0deg, var(--bg) 2%, transparent 55%);
  }

  .hero.has-portrait .hero-credit {
    font-size: 8px;
  }

  [data-theme="light"] .hero.has-portrait .portrait-layer img {
    object-position: 52% 18%;
    filter: grayscale(0.25) contrast(0.95) brightness(1.1);
    transform: scale(1.06);
  }

  [data-theme="light"] .hero.has-portrait .portrait-layer::before {
    opacity: 0.58;
  }

  [data-theme="light"] .hero.has-portrait .portrait-layer::after {
    background:
      linear-gradient(180deg, rgba(239, 239, 239, 0.94) 0%, rgba(239, 239, 239, 0.72) 10%, rgba(239, 239, 239, 0.02) 26%, transparent 34%),
      linear-gradient(90deg, var(--bg) 2%, rgba(239, 239, 239, 0.86) 48%, rgba(239, 239, 239, 0.32) 100%),
      linear-gradient(0deg, var(--bg) 2%, transparent 52%);
  }
}

@media (max-width: 520px) {
  .hero.has-portrait .portrait-layer img {
    object-position: 54% 17%;
    transform: scale(1.12);
  }

  .hero.has-portrait .portrait-layer::after {
    background:
      linear-gradient(90deg, var(--bg) 4%, rgba(11, 11, 12, 0.8) 55%, rgba(11, 11, 12, 0.38) 100%),
      linear-gradient(0deg, var(--bg) 2%, transparent 62%);
  }
}