/* ==========================================================================
   CONTENT BLOCK — white section, rounded-border framed image, a 40% black
   fade with text on one side. Side is controlled purely by a modifier
   class so this is reusable for any future page:
     .content-block--fade-right  (default: image left, fade+text right)
     .content-block--fade-left   (fade+text left, image mirrors right)
   ========================================================================== */

.content-block {
  display: flex;
  align-items: center;
  background: var(--color-white);
  padding: var(--sp-6) 0;
}

.content-frame {
  position: relative;
  width: 100%;
  height: min(78vh, 780px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  isolation: isolate;
}

/* Load-in: the frame starts as a narrow centered column and grows outward
   left and right, fading in as it widens — cropping the cover image
   tighter at first and revealing more of it as it expands. */
.content-frame[data-reveal="expand-x"] {
  width: clamp(90px, 14vw, 160px);
  margin-inline: auto;
  opacity: 0;
  transition: width 1800ms var(--ease-out-soft) var(--delay, 0ms),
              opacity 1800ms var(--ease-out-soft) var(--delay, 0ms);
}

.content-frame[data-reveal="expand-x"].is-visible {
  width: 100%;
  opacity: 1;
}

.content-frame__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  opacity: 0;
  animation: contentFadeCycle 18s ease-in-out infinite;
}

.content-frame__image:nth-of-type(1) { animation-delay: 0s; }
.content-frame__image:nth-of-type(2) { animation-delay: -6s; }
.content-frame__image:nth-of-type(3) { animation-delay: -12s; }

.content-block--fade-left .content-frame__image { object-position: right center; }

.content-frame__overlay {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(8,8,10,0) 0%, rgba(8,8,10,0.8) 38%, rgba(8,8,10,0.95) 100%);
  display: flex;
  align-items: center;
}

.content-block--fade-left .content-frame__overlay {
  right: auto;
  left: 0;
  background: linear-gradient(to left, rgba(8,8,10,0) 0%, rgba(8,8,10,0.8) 38%, rgba(8,8,10,0.86) 100%);
}

.content-frame__text {
  padding: var(--sp-5);
  padding-left: 200px;
  color: var(--color-white);
}

.content-frame__text .eyebrow {
  color: var(--color-accent-soft);
}

.content-frame__text h2 {
  font-size: var(--fs-h1);
}

.content-frame__text p {
  margin-top: var(--sp-3);
  max-width: 34ch;
  color: rgba(255,255,255,0.82);
}

.content-frame__text .btn { margin-top: var(--sp-4); }

@media (max-width: 860px) {
  .content-block { padding: var(--sp-5) 0; }

  .content-frame { height: min(72vh, 640px); }

  .content-frame__overlay,
  .content-block--fade-left .content-frame__overlay {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 55%;
    background: linear-gradient(to top, rgba(8,8,10,0.88) 0%, rgba(8,8,10,0.7) 55%, rgba(8,8,10,0) 100%);
    align-items: flex-end;
  }

  .content-frame__text { padding: var(--sp-4); }
  .content-frame__text p { max-width: 30ch; }
}

@media (prefers-reduced-motion: reduce) {
  .content-frame[data-reveal="expand-x"] {
    width: 100%;
    transition: none;
  }

  .content-frame__image {
    animation: none !important;
    opacity: 0;
  }

  .content-frame__image:first-of-type { opacity: 1; }
}