/* Optional first-screen portrait change. Removing this file restores the base hero styling. */
.hero-scroll { position: relative; }
.hero-scroll .hero {
  background: radial-gradient(circle at 73% 43%, #e5d7bf, #eee7da 52%, #f6f1e8 100%);
  color: #102a3d;
}
.hero-scroll .eyebrow,
.hero-scroll .detail-label { color: #9b7440; }
.hero-scroll .small-line { background: #a67a43; }
.hero-scroll .hero h1 span { color: #a67a43; }
.hero-scroll .hero-intro { color: #52616a; }
.hero-scroll .hero-details { border-color: rgba(155,116,64,.32); }
.hero-scroll .hero-foot { color: #796949; }
.hero-scroll .hero-foot span { background: rgba(155,116,64,.42); }
.hero-scroll .hero-visual::before {
  background: url('assets/temple-photo.jpg') center / cover no-repeat;
  filter: blur(9px) grayscale(.35);
  opacity: .2;
}
.hero-scroll .hero-visual::after {
  background: linear-gradient(90deg, #f2ebdf 0%, rgba(242,235,223,.88) 17%, transparent 65%);
}
.hero-scroll .hero-portrait {
  filter: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}
.hero-scroll .hero-visual {
  opacity: .92;
  transform: translateY(var(--hero-parallax, 0px));
}
.hero-scroll .hero-portrait-before { opacity: var(--hero-before-opacity, 1); }
.hero-scroll .hero-portrait-after { opacity: var(--hero-after-opacity, 0); }

@media (max-width: 700px) {
  .hero-scroll .hero-visual {
    top: 5%;
    right: -17px;
    width: min(94vw, 490px);
    opacity: .72;
  }
  .hero-scroll .hero-visual::after {
    background: linear-gradient(90deg, #f2ebdf 0%, rgba(242,235,223,.94) 25%, rgba(242,235,223,.24) 74%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll .hero-visual { transform: none; }
  .hero-scroll .hero-portrait-before { opacity: 1; }
  .hero-scroll .hero-portrait-after { opacity: 0; }
}