.cinematic-section {
  position: relative;
  overflow: clip;
  background: #08080a;
  color: #fff;
  border-top: 1px solid rgba(255,255,255,.1);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.cinematic-sticky {
  position: relative;
  width: min(1440px,100%);
  min-height: 780px;
  margin: 0 auto;
  padding: 112px max(32px,calc((100vw - 1180px)/2));
  display: grid;
  grid-template-columns: minmax(330px,.75fr) minmax(520px,1.25fr);
  align-items: center;
  gap: 54px;
}

.cinematic-copy { position: relative; z-index: 3; }
.cinematic-copy h2 { margin: 0; max-width: 640px; font-size: 78px; line-height: 1; font-weight: 760; }
.cinematic-copy h2 em { color: #9d90ff; font-style: normal; }
.cinematic-lede { max-width: 520px; margin: 28px 0 42px; color: #a9a9b3; font-size: 18px; line-height: 1.65; }
.cinematic-steps { position: relative; max-width: 480px; }
.scene-step { padding: 22px 0; border-top: 1px solid rgba(255,255,255,.13); }
.scene-step span { display: block; color: #8d7ff0; font-size: 11px; font-weight: 800; }
.scene-step h3 { margin: 8px 0 7px; font-size: 21px; }
.scene-step p { margin: 0; color: #9696a0; font-size: 14px; line-height: 1.65; }
.cinematic-progress { display: none; width: 180px; height: 2px; margin-top: 34px; overflow: hidden; background: rgba(255,255,255,.16); }
.cinematic-progress span { display: block; width: 100%; height: 100%; background: #8d7ff0; transform: scaleX(var(--scene-progress,0)); transform-origin: left; }

.product-scene { position: relative; min-width: 0; aspect-ratio: 1.18; isolation: isolate; }
.product-scene::before { content: ''; position: absolute; inset: 5% 0; border-left: 1px solid rgba(255,255,255,.08); z-index: -1; }
.product-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .7s ease; }
.scene-fallback { position: absolute; top: 50%; left: 50%; width: min(92%,860px); height: auto; transform: translate(-50%,-50%) perspective(1200px) rotateY(-8deg) rotateX(2deg); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; box-shadow: 0 38px 100px rgba(0,0,0,.46); }
.scene-status { position: absolute; right: 5%; bottom: 4%; z-index: 2; display: flex; align-items: center; gap: 8px; margin: 0; color: #b7b7c0; font-size: 11px; text-transform: uppercase; }
.scene-status span { width: 7px; height: 7px; border-radius: 50%; background: #47c995; box-shadow: 0 0 0 5px rgba(71,201,149,.1); }

.scene-ready .cinematic-section { min-height: 315vh; }
.scene-ready .cinematic-sticky { position: sticky; top: 80px; height: calc(100vh - 80px); min-height: 650px; padding-top: 40px; padding-bottom: 40px; }
.scene-ready .product-scene canvas { opacity: 1; }
.scene-ready .scene-fallback { opacity: 0; visibility: hidden; }
.scene-ready .cinematic-steps { min-height: 160px; }
.scene-ready .scene-step { position: absolute; inset: 0; opacity: 0; transform: translateY(16px); transition: opacity .45s ease,transform .45s ease; pointer-events: none; }
.scene-ready .scene-step.is-active { opacity: 1; transform: none; pointer-events: auto; }
.scene-ready .cinematic-progress { display: block; }

.hero-product { transform-origin: 50% 100%; animation: hero-settle 1.2s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hero-settle { from { opacity: 0; transform: perspective(1400px) rotateX(8deg) translateY(42px) scale(.96); } to { opacity: 1; transform: none; } }

@media(max-width:900px) {
  .cinematic-sticky { min-height: 0; padding: 84px 24px; grid-template-columns: 1fr; gap: 46px; }
  .product-scene { aspect-ratio: 1.25; }
  .scene-ready .cinematic-section { min-height: 300vh; }
  .scene-ready .cinematic-sticky { top: 70px; height: calc(100vh - 70px); min-height: 650px; padding: 28px 20px; grid-template-rows: minmax(250px,48vh) 1fr; gap: 12px; }
  .scene-ready .product-scene { grid-row: 1; }
  .scene-ready .cinematic-copy { grid-row: 2; align-self: start; }
  .scene-ready .cinematic-copy h2 { font-size: 50px; }
  .scene-ready .cinematic-lede { display: none; }
  .scene-ready .scene-status { bottom: 1%; }
}

@media(max-width:480px) {
  .cinematic-sticky { padding: 66px 16px; }
  .cinematic-copy h2 { font-size: 40px; }
  .cinematic-lede { font-size: 16px; }
  .scene-ready .cinematic-sticky { min-height: 590px; grid-template-rows: minmax(210px,41vh) 1fr; }
  .scene-ready .cinematic-copy h2 { font-size: 34px; }
  .scene-ready .cinematic-copy > .eyebrow { margin-bottom: 8px; }
  .scene-ready .scene-step { padding-top: 14px; }
  .scene-step h3 { font-size: 19px; }
  .scene-step p { font-size: 13px; }
  .cinematic-progress { margin-top: 18px; }
}

@media(prefers-reduced-motion:reduce) {
  .hero-product { animation: none; }
  .product-scene canvas { display: none; }
  .scene-fallback { transform: translate(-50%,-50%); }
}