/* ============================================================
   Section 2 · Overview — "More Than a Tower"
   Asymmetric editorial split — NOT a rigid 50/50 two-column,
   and the panel and film never overlap:
     · solid copy card on the left, vertically centered
     · the 16:9 film on the right, dropped low and bleeding
       off the page edge, separated from the card by a gap
   Below 1024px it stacks: film first, card beneath with a gap.
   ============================================================ */

.s2 {
  position: relative;
  overflow: hidden;
  background: var(--ground);
  padding: clamp(5rem, 13vh, 9.5rem) 0;
  isolation: isolate;
}

/* ambient depth: concentric elevation arcs bleeding off the top-right
   corner (an architectural-drawing echo, not a flat glow), deep floor + ceiling */
.s2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(
      circle at 84% 4%,
      transparent 13.6rem,
      color-mix(in srgb, var(--ember) 22%, transparent) 13.9rem,
      transparent 14.3rem,
      transparent 18.6rem,
      color-mix(in srgb, var(--ember) 14%, transparent) 18.9rem,
      transparent 19.3rem,
      transparent 24.1rem,
      color-mix(in srgb, var(--ember) 8%, transparent) 24.4rem,
      transparent 24.8rem
    ),
    radial-gradient(
      26rem 26rem at 84% 4%,
      color-mix(in srgb, var(--ember) 9%, transparent),
      transparent 62%
    ),
    linear-gradient(
      to bottom,
      var(--ground-deep) 0%,
      var(--ground) 22%,
      var(--ground) 72%,
      var(--ground-deep) 100%
    );
}

.s2-stage {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 34rem) minmax(0, 1fr);
  column-gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
}

/* ---------- the film — right, dropped low, bleeds off the edge ---------- */
.s2-film {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin-top: clamp(1.5rem, 5vw, 3.5rem);
  margin-right: calc(var(--page-x) * -1);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  background: var(--ground-deep);
  box-shadow: 0 54px 110px -44px rgba(0, 0, 0, 0.78);
}

.s2-film video {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- the copy panel — solid card, left ---------- */
.s2-panel {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: clamp(0.85rem, 1.2vw, 1.1rem);
  background: var(--ground-raised);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  box-shadow: 0 40px 90px -46px rgba(0, 0, 0, 0.92);
}

/* architectural corner brackets that break the panel edge */
.s2-panel::before,
.s2-panel::after {
  content: "";
  position: absolute;
  width: 2.4rem;
  height: 2.4rem;
  border: 2px solid var(--ember);
}

.s2-panel::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.s2-panel::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
}

/* override .eyebrow's inline-flex so the long label can wrap */
.s2-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin-bottom: 1.35rem;
  letter-spacing: 0.26em;
}

.s2-heading {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.75rem, 2.4vw, 2.4rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}

.s2-heading em {
  display: block;
  margin-top: 0.12em;
  font-style: italic;
  color: var(--ember);
}

.s2-sub {
  margin-top: 1.3rem;
  font-size: clamp(1rem, 0.8vw + 0.7rem, 1.14rem);
  line-height: 1.55;
  font-weight: 300;
  color: var(--ink);
}

.s2-body {
  margin-top: 1.3rem;
}

.s2-body p {
  margin-top: 0.9rem;
  font-size: 0.93rem;
  line-height: 1.68;
  color: var(--ink-soft);
}

.s2-body p:first-child {
  margin-top: 0;
}

/* ---------- closing coda — final line of the panel ---------- */
.s2-coda {
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 2px solid var(--terracotta);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.3vw, 1.4rem);
  line-height: 1.42;
  color: var(--ink);
}

.s2-coda em {
  display: block;
  font-style: italic;
  color: var(--ember);
}

/* ---------- scroll reveal ---------- */
.s2-film,
.s2-panel {
  opacity: 0;
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.s2-film {
  transform: translateX(26px);
}
.s2-panel {
  transform: translateY(30px);
}

.s2.is-in .s2-panel {
  transition-delay: 0.05s;
}
.s2.is-in .s2-film {
  transition-delay: 0.18s;
}

.s2.is-in .s2-film,
.s2.is-in .s2-panel {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .s2-stage {
    display: flex;
    flex-direction: column;
    gap: clamp(1.75rem, 6vw, 2.75rem);
  }
  .s2-film {
    width: calc(100% + var(--page-x));
    margin: 0 calc(var(--page-x) * -0.5);
    align-self: stretch;
  }
  .s2-panel {
    width: min(100%, 40rem);
    align-self: flex-start;
  }
}

@media (max-width: 480px) {
  .s2-heading {
    font-size: clamp(1.55rem, 6.6vw, 2.05rem);
  }
  .s2-panel {
    width: 100%;
    padding: 1.55rem 1.35rem;
  }
  .s2-panel::before,
  .s2-panel::after {
    width: 1.7rem;
    height: 1.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s2-film,
  .s2-panel {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}