/* Danny Skulls · película que avanza con el scroll */
.fm{background:#000;color:#EDE6DA;position:relative}
.fm-stage{position:relative;display:grid;place-items:center;padding:48px 20px}
.fm-frame{position:relative;width:min(100%,420px);aspect-ratio:9/16;overflow:hidden;background:#000}
.fm-frame video,.fm-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fm-caps{list-style:none;margin:32px auto 0;padding:0 20px;max-width:560px;display:flex;flex-direction:column;gap:14px}
.fm-caps li{font-family:'Bodoni Moda',serif;font-size:24px;line-height:1.25}

/* Con JavaScript: escenario fijo */
.fm-on .fm-track{height:600svh}
.fm-on .fm-stage{position:sticky;top:0;height:100svh;padding:0;overflow:hidden}
.fm-on .fm-frame{width:auto;height:100svh;max-width:100vw}
.fm-on .fm-caps{position:absolute;inset:0;margin:0;padding:0;max-width:none;pointer-events:none;display:block}
.fm-on .fm-caps li{position:absolute;top:50%;width:min(30vw,380px);font-size:clamp(26px,2.6vw,40px);opacity:0;transform:translateY(calc(-50% + 18px));transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.fm-on .fm-caps li:nth-child(odd){right:calc(50% + 28.125svh + 56px);text-align:right}
.fm-on .fm-caps li:nth-child(even){left:calc(50% + 28.125svh + 56px)}
.fm-on .fm-caps li.is-on{opacity:1;transform:translateY(-50%)}
.fm-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#A39C92;transition:opacity .5s ease}
.fm:not(.fm-on) .fm-hint{display:none}

@media (max-width:900px){
  .fm-on .fm-frame{width:100vw;height:100svh}
  .fm-on .fm-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45svh;background:linear-gradient(to top,rgba(0,0,0,.85),rgba(0,0,0,0));pointer-events:none}
  .fm-on .fm-caps{z-index:1}
  .fm-on .fm-caps li,.fm-on .fm-caps li:nth-child(odd),.fm-on .fm-caps li:nth-child(even){left:20px;right:20px;top:auto;bottom:72px;width:auto;text-align:left;font-size:28px;transform:translateY(18px)}
  .fm-on .fm-caps li.is-on{transform:none}
  .fm-hint{z-index:1;bottom:24px}
}
@media (prefers-reduced-motion:reduce){
  .fm-caps li{transition:none !important}
}
