/* Scrollytelling — sticky visual that swaps as you scroll (Apple/DJI style) */

.story-section{padding:var(--sp-8) 0;}

.story-intro{max-width:640px;margin-bottom:var(--sp-6);}

.story-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-6);
}
@media (min-width:900px){
  .story-grid{grid-template-columns:0.9fr 1.1fr;gap:var(--sp-7);align-items:start;}
}

.story-visual{position:relative;}
@media (min-width:900px){
  .story-visual{position:sticky;top:96px;}
}

.story-media{
  position:relative;
  width:100%;
  height:46vh;
  min-height:320px;
  border-radius:var(--r-xl);
  overflow:hidden;
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-soft);
  background:var(--graphite-2);
}
@media (min-width:900px){
  .story-media{height:68vh;}
}

.story-frame{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.06);
  transition:opacity 1s var(--ease), transform 1.4s var(--ease);
}
.story-frame.active{opacity:1;transform:scale(1);}
.story-frame::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(12,13,16,0) 45%, rgba(12,13,16,.85) 100%);
}
.story-frame-tag{
  position:absolute;
  left:var(--sp-4);bottom:var(--sp-4);right:var(--sp-4);
  z-index:1;
}
.story-frame-tag span{
  font-family:var(--font-head);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cyan);
}
.story-frame-tag h4{
  color:var(--off-white);
  margin:.3rem 0 0;
  font-size:1.3rem;
}

.story-dots{
  display:flex;
  gap:.5rem;
  margin-top:var(--sp-4);
}
.story-dots span{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--graphite-3);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.story-dots span.active{
  background:var(--cyan);
  transform:scale(1.3);
}

.story-text{display:flex;flex-direction:column;}

.story-stop{
  min-height:64vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--sp-5) 0;
  opacity:.32;
  transition:opacity .5s var(--ease);
}
.story-stop.active{opacity:1;}
.story-stop-img{display:none;}

.story-stop-num{
  font-family:var(--font-head);
  font-size:.8rem;
  color:var(--gray-500);
  margin-bottom:.4rem;
}

@media (max-width:899px){
  .story-visual{display:none;}
  .story-stop{min-height:auto;opacity:1;padding:var(--sp-4) 0;border-bottom:1px solid var(--border-softer);}
  .story-stop:last-child{border-bottom:none;}
  .story-stop-img{
    display:block;
    width:100%;
    height:44vw;
    max-height:260px;
    object-fit:cover;
    border-radius:var(--r-lg);
    border:1px solid var(--border-soft);
    margin-bottom:var(--sp-3);
  }
}