/* Design 07: Split. A sticky split screen: media pinned on one side swaps per chapter, copy scrolls on the other. */
.dz-split { background: #03080b; }

/* Hero: copy on the left, a live tour on the right. */
.sp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100svh; }
.dz-split .site-header:not(.is-scrolled) { background: linear-gradient(180deg, rgba(3, 8, 11, .92), rgba(3, 8, 11, .55) 70%, transparent); border-color: transparent; }
.sp-hero-copy { display: flex; flex-direction: column; justify-content: center; padding: 130px clamp(24px, 5vw, 80px) 130px max(24px, calc((100vw - var(--shell, 1180px)) / 2)); }
.sp-title { margin: 16px 0 22px; font-size: clamp(44px, 5.4vw, 92px); line-height: .92; letter-spacing: -.055em; font-weight: 800; }
.sp-title em, .dz-split .dz-h2 em { font-style: normal; background: linear-gradient(90deg, #60f5b2, #78d6f2 55%, #ffbf87); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sp-lede { max-width: 50ch; color: #c9d6d8; font-size: clamp(16px, 1.4vw, 19px); margin: 0; }
.sp-hero-media { position: relative; overflow: hidden; clip-path: inset(0 0 0 0); animation: sp-wipe 1.2s cubic-bezier(.7, 0, .2, 1) .2s both; }
.sp-hero-media video { width: 100%; height: 100%; object-fit: cover; }
.sp-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #03080b, transparent 22%), linear-gradient(0deg, rgba(3, 8, 11, .6), transparent 30%); }
@keyframes sp-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.sp-hero-tag { position: absolute; right: 22px; top: 96px; z-index: 1; padding: 7px 12px; border-radius: 999px; background: rgba(3, 9, 12, .6); border: 1px solid rgba(96, 245, 178, .4); font: 11px "SFMono-Regular", Consolas, monospace; letter-spacing: .16em; color: var(--green-bright); }
.sp-rise { display: inline-block; animation: sp-rise 1s cubic-bezier(.2, .8, .2, 1) both; }
.sp-lede.sp-rise, .dz-kicker.sp-rise { display: block; }
.hero-actions.sp-rise { display: flex; }
.sp-d1 { animation-delay: .1s; } .sp-d2 { animation-delay: .24s; } .sp-d3 { animation-delay: .42s; } .sp-d4 { animation-delay: .56s; }
@keyframes sp-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* Split blocks */
.sp-block { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); border-top: 1px solid var(--line); }
.sp-media-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.sp-media-right .sp-media { order: 2; }
.sp-media { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.sp-media-stage { position: absolute; inset: 0; background: #071216; }
.sp-m { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .8s ease, transform 1.4s cubic-bezier(.2, .8, .2, 1); }
.sp-m.is-active { opacity: 1; transform: none; }
.sp-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(3, 8, 11, .55), transparent 30%); }
.sp-media-left .sp-media::after { background: linear-gradient(0deg, rgba(3, 8, 11, .55), transparent 30%), linear-gradient(270deg, rgba(3, 8, 11, .7), transparent 18%); }
.sp-media-right .sp-media::after { background: linear-gradient(0deg, rgba(3, 8, 11, .55), transparent 30%), linear-gradient(90deg, rgba(3, 8, 11, .7), transparent 18%); }
.sp-media-hud { position: absolute; z-index: 1; left: 24px; right: 24px; bottom: 90px; display: flex; align-items: center; gap: 16px; font: 12px "SFMono-Regular", Consolas, monospace; letter-spacing: .16em; color: #c7d8da; }
.sp-media-hud b { color: var(--green-bright); font-weight: 600; }
.sp-media-bar { flex: 1; height: 2px; background: rgba(255, 255, 255, .18); border-radius: 2px; overflow: hidden; }
.sp-media-bar i { display: block; height: 100%; background: linear-gradient(90deg, #60f5b2, #78d6f2); transform-origin: 0 50%; transform: scaleX(.25); transition: transform .5s; }
.sp-copy { padding: 0 clamp(24px, 5vw, 80px); }
.sp-ch { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; opacity: .22; transform: translateY(24px); transition: opacity .6s, transform .8s cubic-bezier(.2, .8, .2, 1); }
.sp-ch.is-active { opacity: 1; transform: none; }
.sp-ch .dz-lede { color: #c9d6d8; }

/* Final: mirrored split */
.sp-final { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 80svh; border-top: 1px solid var(--line); }
.sp-final-copy { display: flex; flex-direction: column; justify-content: center; padding: 100px clamp(24px, 5vw, 80px) 140px max(24px, calc((100vw - var(--shell, 1180px)) / 2)); }
.sp-final-media { position: relative; overflow: hidden; }
.sp-final-media video { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 860px) {
  .sp-hero { grid-template-columns: 1fr; grid-template-rows: auto 52svh; }
  .sp-hero-copy { padding: 120px 20px 40px; }
  .sp-hero-media::after { background: linear-gradient(180deg, #03080b, transparent 22%); }
  .sp-hero-tag { top: 20px; }
  /* Phones: the media becomes a sticky band at the top; chapters scroll beneath it. */
  .sp-block, .sp-media-right { display: block; }
  .sp-media { height: 42svh; top: 64px; z-index: 2; border-bottom: 1px solid var(--line-strong); }
  .sp-media-hud { bottom: 14px; }
  .sp-media::after { background: linear-gradient(0deg, rgba(3, 8, 11, .7), transparent 40%) !important; }
  .sp-copy { padding: 0 20px; }
  .sp-ch { min-height: 70svh; }
  .sp-final { grid-template-columns: 1fr; }
  .sp-final-copy { padding: 80px 20px 40px; }
  .sp-final-media { height: 50svh; margin-bottom: 90px; }
  .sp-hero .hero-actions .button { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-hero-media, .sp-rise { animation: none !important; }
  .sp-m, .sp-ch { transition: none !important; transform: none !important; }
  .sp-ch { opacity: 1; }
}