/* Homepage-only atmosphere with a single editorial content block. */
.hero {
  isolation: isolate;
  overflow: clip;
  background: var(--black);
  min-height: calc(100svh - 82px);
  padding-block: clamp(72px, 9vw, 128px);
}

.hero-backdrop,
.hero-drift,
.hero-landscape,
.hero-landscape img,
.hero-glow,
.hero-light,
.hero::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-backdrop {
  z-index: 0;
  overflow: hidden;
}

.hero-drift {
  inset: -16px;
  transform: translate3d(var(--hero-pan-x, 0px), var(--hero-pan-y, 0px), 0);
  transition: transform 1.2s ease-out;
}

.hero-landscape {
  display: block;
  animation: coastal-breathe 16s ease-in-out infinite alternate;
  transform-origin: 58% 55%;
  will-change: transform;
}

.hero-landscape img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Warm bronze atmosphere drifting slowly beneath the landscape; always
   masked by .hero::before so it never touches text contrast. */
.hero-glow {
  z-index: 0;
  background:
    radial-gradient(46% 42% at 26% 74%, rgba(var(--bronze-rgb), 0.4), transparent 68%),
    radial-gradient(38% 34% at 76% 22%, rgba(var(--sand-rgb), 0.22), transparent 70%);
  opacity: 0.5;
  animation: bronze-glow-drift 17s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.hero::before {
  content: "";
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(11,11,11,0.86), rgba(11,11,11,0.64) 43%, rgba(11,11,11,0.30)),
    linear-gradient(180deg, rgba(11,11,11,0.20), transparent 35%, rgba(11,11,11,0.88));
}

.hero::after {
  z-index: 2;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: block;
}

.hero .hero-copy {
  max-width: 680px;
}

.hero .hero-text {
  color: #dedad4;
  max-width: 52ch;
}

.hero .hero-contacts a {
  color: #d2ccc4;
}

/* Three faint light streaks, painted once; only transform and opacity animate. */
.hero-light span {
  position: absolute;
  left: 9%;
  bottom: 17%;
  width: 150px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--sand-rgb), 0.55), transparent);
  opacity: 0;
  animation: coastal-light 19s ease-in-out infinite;
}

.hero-light span:nth-child(2) {
  left: 46%;
  bottom: 34%;
  width: 100px;
  animation-duration: 23s;
  animation-delay: -11s;
}

.hero-light span:nth-child(3) {
  left: 78%;
  bottom: 21%;
  width: 80px;
  animation-duration: 29s;
  animation-delay: -18s;
}

@keyframes coastal-breathe {
  from { transform: scale(1.03) translate3d(-2%, 0.8%, 0); }
  to { transform: scale(1.13) translate3d(2.4%, -1.6%, 0); }
}

@keyframes bronze-glow-drift {
  0% { transform: translate3d(-6%, 3%, 0) scale(1); opacity: 0.45; }
  50% { opacity: 0.65; }
  100% { transform: translate3d(6%, -4%, 0) scale(1.12); opacity: 0.5; }
}

@keyframes coastal-light {
  0% { opacity: 0; transform: translate3d(-24px, 6px, 0) rotate(-12deg); }
  40% { opacity: 0.30; }
  100% { opacity: 0; transform: translate3d(64px, -12px, 0) rotate(-12deg); }
}

.hero[data-motion-paused] .hero-landscape,
.hero[data-motion-paused] .hero-glow,
.hero[data-motion-paused] .hero-light span {
  animation-play-state: paused;
}

@media (max-width: 980px), (pointer: coarse) {
  .hero-landscape { animation-name: coastal-breathe-mobile; animation-duration: 18s; }
  .hero-drift { inset: -8px; transform: none; transition: none; }
  .hero-glow { animation-name: bronze-glow-drift-mobile; animation-duration: 18s; opacity: 0.4; }
  .hero-light { display: none; }
  .hero::before {
    background:
      linear-gradient(90deg, rgba(11,11,11,0.78), rgba(11,11,11,0.50)),
      linear-gradient(180deg, rgba(11,11,11,0.10), rgba(11,11,11,0.14) 55%, rgba(11,11,11,0.94));
  }
}

@keyframes coastal-breathe-mobile {
  from { transform: scale(1.02) translate3d(-1%, 0.4%, 0); }
  to { transform: scale(1.065) translate3d(1.2%, -0.8%, 0); }
}

@keyframes bronze-glow-drift-mobile {
  from { transform: translate3d(-3%, 1.5%, 0) scale(1); }
  to { transform: translate3d(3%, -2%, 0) scale(1.06); }
}

@media (max-width: 640px) {
  .hero {
    min-height: calc(100svh - 72px);
    padding-block: 56px 76px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-landscape { animation: none; transform: none; }
  .hero-drift { transform: none; transition: none; }
  .hero-glow { animation: none; opacity: 0.4; }
  .hero-light { display: none; }
}