/* Two continuous book rows, matching the reference motion and spacing. */
.esteira {
  --cover-height: 165px;
  padding: 64px 0;
  overflow: hidden;
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

.esteira__frase {
  font-size: 1.2rem;
  margin: 0 auto 40px;
  padding: 0 20px;
}

.esteira__rows {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.esteira__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  z-index: 10;
  pointer-events: none;
}

.esteira__fade--l {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}

.esteira__fade--r {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
}

.esteira__track {
  display: flex;
  width: max-content;
  gap: 0;
  will-change: transform;
}

.esteira__track--l {
  animation: esteiraLeft 50s linear infinite;
}

.esteira__track--r {
  animation: esteiraRight 25s linear infinite;
}

/* The original keeps moving when the pointer rests over the covers. */
.esteira__rows:hover .esteira__track {
  animation-play-state: running;
}

.esteira__group {
  display: flex;
  flex: 0 0 auto;
  gap: 32px;
  padding: 0 16px;
}

/* A borderless viewport hides scan margins without editing or stretching a cover. */
.esteira__group .esteira__cover {
  position: relative;
  display: block;
  overflow: hidden;
  height: var(--cover-height);
  width: calc(var(--cover-height) * var(--cover-ratio));
  max-width: none;
  aspect-ratio: auto;
  flex: 0 0 auto;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.esteira__group .esteira__cover img {
  position: absolute;
  display: block;
  left: var(--cover-left);
  top: var(--cover-top);
  width: var(--cover-source-width);
  height: var(--cover-source-height);
  max-width: none;
  aspect-ratio: auto;
  object-fit: fill;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

@keyframes esteiraLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes esteiraRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (min-width: 640px) {
  .esteira { --cover-height: 190px; }
  .esteira__frase { font-size: 1.35rem; }
  .esteira__fade { width: 128px; }
  .esteira__group { gap: 48px; padding: 0 24px; }
}

@media (min-width: 768px) {
  .esteira { --cover-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  .esteira__track--l,
  .esteira__track--r {
    animation: none;
    transform: none;
    will-change: auto;
  }
}

/* Book covers above; empty lesson artwork frames below, ready for future uploads. */
.marquee-heading{font:italic 400 clamp(32px,4vw,48px)/1.2 var(--f-serif);color:var(--lime);text-align:center;margin:0 auto 30px;padding:0 20px}
.lesson-preview{overflow:hidden;padding:0 0 64px}
.lesson-preview .marquee-heading{margin-bottom:12px}
.lesson-preview__note{font:400 12px/1.7 Inter,sans-serif;color:var(--n-300);text-align:center;margin:0 auto 32px;padding:0 20px}
.lesson-preview__rows{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:24px}
.lesson-preview__track{display:flex;width:max-content;animation:esteiraLeft 32s linear infinite;will-change:transform}
.lesson-preview__track--right{animation-name:esteiraRight}
.lesson-preview__group{display:flex;flex:none;gap:24px;padding-right:24px}
.lesson-preview__frame{flex:0 0 auto;width:220px;aspect-ratio:16/9;overflow:hidden;border-radius:14px;background:#111;box-sizing:border-box}
.lesson-preview__frame img{display:block;width:100%;height:100%;object-fit:cover}
@media(min-width:640px){.lesson-preview__frame{width:290px}.lesson-preview__group{gap:32px;padding-right:32px}.lesson-preview{padding-bottom:80px}}
@media(prefers-reduced-motion:reduce){.lesson-preview__track{animation:none;transform:none;will-change:auto}}
/* Lesson previews: short muted loops over the original covers, which stay as the fallback. */
.lesson-preview__frame{position:relative}
.lesson-preview__clip{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease;pointer-events:none}
.lesson-preview__name{position:absolute;left:0;right:0;bottom:0;padding:16px 10px 7px;font:600 11px/1.25 Inter,sans-serif;letter-spacing:.01em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.85);background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .45s ease;pointer-events:none}
.lesson-preview__name::before{content:'';display:inline-block;width:5px;height:5px;margin:0 6px 1px 0;border-radius:50%;background:var(--lime,#ccff00);vertical-align:middle}
.lesson-preview__frame.is-playing .lesson-preview__clip,.lesson-preview__frame.is-playing .lesson-preview__name{opacity:1}
@media(min-width:640px){.lesson-preview__name{padding:20px 12px 9px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.lesson-preview__clip,.lesson-preview__name{display:none}}
/* Light play symbol on each lesson frame. */
.lesson-preview__frame::before{content:'';position:absolute;left:50%;top:50%;z-index:2;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(0,0,0,.22);pointer-events:none}
.lesson-preview__frame::after{content:'';position:absolute;left:50%;top:50%;z-index:2;margin:-6px 0 0 -3px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent rgba(255,255,255,.85);pointer-events:none}
@media(min-width:640px){.lesson-preview__frame::before{width:40px;height:40px;margin:-20px 0 0 -20px}.lesson-preview__frame::after{margin:-7px 0 0 -4px;border-width:7px 0 7px 12px}}
/* Hide the cover while its clip plays. */
.lesson-preview__frame.is-playing img{visibility:hidden}
/* Lesson names stay visible all the time. */
.lesson-preview__name{opacity:1}
/* Keep the name, the green dot and the play symbol above the clip in Safari. */
.lesson-preview__frame{isolation:isolate}
.lesson-preview__clip{z-index:1}
.lesson-preview__name{z-index:3;transform:translateZ(0);-webkit-transform:translateZ(0)}
.lesson-preview__frame::before,.lesson-preview__frame::after{z-index:3;transform:translateZ(0);-webkit-transform:translateZ(0)}