.bag-scroll { position: relative; background: #2b2018; color: var(--paper); }
.bag-scroll.has-wave-clip { z-index: 4; margin-top: calc(var(--wave-h) * -1 + 3px); background: transparent; }
.bag-scroll__runway { position: relative; height: 420vh; }
.bag-scroll__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #2b2018; }
.bag-scroll__stage canvas,
.bag-scroll__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bag-scroll__poster { transition: opacity .4s ease; }
.bag-scroll.is-ready .bag-scroll__poster { opacity: 0; }

.bag-scroll__hint {
  position: absolute; left: 50%; bottom: 2.25rem; translate: -50% 0; opacity: var(--hint, 1);
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; line-height: 1.17;
  color: var(--paper); text-shadow: 0 2px 12px rgba(0,0,0,.5); pointer-events: none;
}
.bag-scroll__hint::after { content: ""; width: 2px; height: 2.5rem; background: linear-gradient(var(--lime), transparent); animation: bag-hint 1.6s ease-in-out infinite; transform-origin: top; }
@keyframes bag-hint { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.bag-scroll__glass {
  position: absolute; inset: 0; pointer-events: none; opacity: var(--glass, 0);
  -webkit-backdrop-filter: blur(calc(var(--glass, 0) * 26px)) saturate(1.15) brightness(.62);
  backdrop-filter: blur(calc(var(--glass, 0) * 26px)) saturate(1.15) brightness(.62);
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.08) 46%, rgba(255,255,255,0) 60%) calc(var(--glass, 0) * 140% - 40%) 0 / 220% 100% no-repeat,
    radial-gradient(80% 70% at 50% 45%, rgba(20,14,10,.25), rgba(15,10,7,.6));
}
.bag-scroll__cta {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  opacity: var(--cta, 0); transform: translateY(calc((1 - var(--cta, 0)) * 24px)) scale(calc(.96 + var(--cta, 0) * .04)); pointer-events: none;
}
.bag-scroll.is-end .bag-scroll__cta { pointer-events: auto; }
.bag-scroll__panel { display: grid; justify-items: center; gap: 1.6rem; text-align: center; }
.bag-scroll__title {
  margin: 0; font-size: clamp(2.6rem, 1.6rem + 4.5vw, 6rem); line-height: 1.17; color: var(--paper);
  text-shadow: 0 2px 0 rgba(255,255,255,.18), 0 10px 40px rgba(30,20,14,.55);
}
.bag-scroll__sub {
  margin: -1rem 0 0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  font-size: clamp(.95rem, .85rem + .4vw, 1.25rem); line-height: 1.17; color: var(--lime); text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.bag-scroll__play {
  width: clamp(5rem, 4rem + 3vw, 7rem); aspect-ratio: 1; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--lime); color: var(--peacock-blue); box-shadow: 0 0 0 10px rgba(207,230,0,.25), 0 18px 40px rgba(0,0,0,.35);
  transition: transform .3s ease, box-shadow .3s ease;
}
.bag-scroll__play svg { width: 40%; height: 40%; margin-left: 8%; }
.bag-scroll__play:hover, .bag-scroll__play:focus-visible { transform: scale(1.07); box-shadow: 0 0 0 16px rgba(207,230,0,.22), 0 22px 50px rgba(0,0,0,.4); }

.bag-scroll > .wave--bottom { z-index: 5; }

.bag-scroll__modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 4vw; background: rgba(5,38,45,.88); backdrop-filter: blur(6px); }
.bag-scroll__frame { width: min(1100px, 100%); aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.bag-scroll__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.bag-scroll__close {
  position: absolute; top: 1.25rem; right: 1.25rem; width: 3rem; height: 3rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--lime); color: var(--peacock-blue); font-size: 1.8rem; line-height: 1;
}

.bag-scroll.is-static .bag-scroll__runway { height: auto; }
.bag-scroll.is-static .bag-scroll__stage { position: relative; height: 80vh; }
.bag-scroll.is-static .bag-scroll__poster { content: url("../video-bag/aluminio.webp?v=2"); opacity: 1; }
.bag-scroll.is-static .bag-scroll__cta { opacity: 1; transform: none; pointer-events: auto; }
.bag-scroll.is-static .bag-scroll__glass { opacity: 1; --glass: 1; }
.bag-scroll.is-static .bag-scroll__hint { display: none; }