/* Composition refinement over the preserved approved-image implementation.
   Artwork is unchanged. Masks shape its perimeter, never blur its focal detail. */

.scene { background: var(--canvas); }
.lenses { margin-top: 0; }
.brand img, .invitation > img { border-radius: 50%; }

/* Each decorative scene is a bounded, correctly proportioned illustration.
   Its bitmap no longer stretches to cover an arbitrarily tall content section. */
.scene > .scenery {
  inset: 0 0 auto;
  height: min(64vw, 820px);
  opacity: 1;
  transform: none !important;
  will-change: auto;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent, #000 19%, #000 64%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 19%, #000 64%, transparent 100%);
}
.scene > .scenery::after { display: none; }
.scene > .scenery img {
  width: 100%;
  height: auto;
  max-width: 1536px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  object-position: center;
  --scene-side-mask: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  --scene-end-mask: linear-gradient(to bottom, transparent, #000 18%, #000 72%, transparent);
  mask-image: var(--scene-end-mask), var(--scene-side-mask);
  -webkit-mask-image: var(--scene-end-mask), var(--scene-side-mask);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* Hero art and copy share a stable horizontal composition, with the artwork's
   size responding to short viewports. The content can still grow when needed. */
@media (min-width: 1001px) {
  .hero {
    --art-width: clamp(900px, min(92vw, calc((100svh - 56px) * 1.5)), 1180px);
    min-height: max(680px, 100svh);
    display: flex;
    flex-direction: column;
  }
  .hero-content { flex: 1; min-height: 0; }
  .hero-copy { padding: 32px 0 40px; max-width: 51%; }
  .hero-copy h1 { font-size: clamp(52px, 4.5vw, 66px); }
  .hero-art {
    width: var(--art-width);
    height: calc(var(--art-width) * 2 / 3);
    left: calc(50% - var(--art-width) * .49);
    top: max(68px, calc(50% - var(--art-width) * .3));
  }
  .hero-foot { margin-top: 0; padding-top: 14px; padding-bottom: 24px; }
  .hero-content .phone-note { right: 9%; bottom: 30px; }
}
.hero-art {
  opacity: 1;
  transform: none !important;
  mask-image:
    linear-gradient(to bottom, transparent, #000 8%, #000 83%, transparent),
    linear-gradient(to right, transparent, #000 3%, #000 99%, transparent);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 8%, #000 83%, transparent),
    linear-gradient(to right, transparent, #000 3%, #000 99%, transparent);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.hero-art::after {
  content: "";
  position: absolute;
  inset: 63% 0 0;
  pointer-events: none;
  background: linear-gradient(to right, var(--canvas), transparent 18%, transparent 78%, var(--canvas));
  mask-image: linear-gradient(transparent, #000 28%);
  -webkit-mask-image: linear-gradient(transparent, #000 28%);
}

/* The original artwork establishes each chapter, then gives way to calm data.
   Spatial masks preserve material detail where it has a compositional role. */
.lenses > .scenery { top: 8px; height: min(64vw, 760px); }
.lenses > .scenery img {
  opacity: .84;
  --scene-side-mask: radial-gradient(ellipse at 50% 43%, transparent 5%, rgb(0 0 0 / .35) 42%, #000 84%);
}
.expectations > .scenery { top: 48px; height: min(67vw, 850px); }
.expectations > .scenery img {
  --scene-side-mask: radial-gradient(ellipse at 50% 52%, #000 12%, rgb(0 0 0 / .76) 44%, transparent 88%);
}
.curves > .scenery { top: 12px; height: min(64vw, 780px); }
.curves > .scenery img {
  opacity: .8;
  --scene-side-mask: linear-gradient(to right, transparent, rgb(0 0 0 / .2) 32%, #000 75%, transparent);
}
.economics > .scenery { top: 0; height: 650px; }
.economics > .scenery img {
  object-position: right top;
  --scene-side-mask: linear-gradient(to right, transparent 9%, rgb(0 0 0 / .4) 43%, #000 80%, transparent);
}
.ai-metrics button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.closing > .scenery { top: 0; height: 100%; }
.closing > .scenery img {
  --scene-end-mask: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  --scene-side-mask: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

@media (min-width: 701px) and (max-width: 1000px) {
  .hero { min-height: max(700px, 100svh); display: flex; flex-direction: column; }
  .hero-content { flex: 1; min-height: 0; }
  .hero-art { top: max(142px, calc(50% - 235px)); }
  .hero-foot { margin-top: 0; padding-bottom: 24px; }
}

@media (max-width: 700px) {
  .hero { min-height: 100svh; }
  .hero-art {
    flex: 1 0 clamp(310px, 94vw, 425px);
    min-height: clamp(310px, 94vw, 425px);
    mask-image: linear-gradient(to right, transparent, #000 3%, #000 99%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 99%, transparent);
  }
  .hero-art::after { display: none; }
  .hero-art img {
    left: -67%; top: 50%; transform: translateY(-50%);
    mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 86%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 86%, transparent);
  }
  .hero-foot { margin-top: auto; }
  .phone-note { margin-top: -16px; }
  .scene > .scenery { height: 450px; }
  .scene > .scenery img { object-fit: contain; object-position: center; }
  .lenses > .scenery { top: 30px; height: 490px; }
  .lenses > .scenery img {
    --scene-side-mask: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  }
  .expectations > .scenery { top: 245px; height: 540px; }
  .curves > .scenery { top: 0; height: 510px; }
  .economics > .scenery { top: 110px; height: 600px; }
  .economics > .scenery img {
    --scene-side-mask: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  }
  .closing > .scenery { top: 210px; height: 460px; }
  .closing > .scenery img { width: 100%; height: auto; margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art, .scene > .scenery { transform: none !important; opacity: 1; }
}