/* Home page: "The Ladies That Rock The Rock" book + video section.
   The video swoosh in from beyond the right edge of the screen, the text from the left. */

.book-feature{padding-top:96px;padding-bottom:96px}
.bf-panel{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:center;
  padding:clamp(28px,5vw,64px);border-radius:32px;border:1px solid var(--line);
  background:
    radial-gradient(60% 80% at 85% 20%,rgba(var(--c3-rgb),.18),transparent 70%),
    radial-gradient(50% 70% at 5% 100%,rgba(var(--c1-rgb),.16),transparent 70%),
    var(--panel);
}
.bf-text .eyebrow{color:var(--c3)}
.bf-title{font-family:'Syne',sans-serif;font-weight:800;font-size:clamp(26px,3.1vw,44px);line-height:1.05;text-transform:uppercase;letter-spacing:-.02em;margin:0 0 14px}
.bf-title span{color:var(--c1)}
.bf-sub{font-weight:700;font-size:clamp(16px,1.5vw,20px);color:var(--c3);margin:0 0 14px}
.bf-lead{font-size:clamp(16px,1.4vw,18px);line-height:1.7;color:var(--muted);margin:0 0 30px;max-width:520px}
.bf-actions{display:flex;flex-wrap:wrap;gap:12px}

/* the video, framed like a photo */
.bf-video{margin:0;position:relative;transform-origin:50% 60%}
.bf-frame{
  position:relative;border-radius:22px;overflow:hidden;background:#000;
  border:4px solid var(--c3);rotate:-2deg;
  box-shadow:0 30px 60px -22px rgba(0,0,0,.85),0 0 60px -12px rgba(var(--c1-rgb),.7);
}
.bf-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000}
.bf-caption{margin:14px 0 0;text-align:center;font-size:14px;color:var(--muted)}

/* ---- the swoosh (only when scripts run and motion is welcome) ---- */
.bf-motion .book-feature{overflow-x:clip}
.bf-motion .bf-video{
  translate:115vw -12vh;rotate:16deg;scale:.7;opacity:0;
}
.bf-motion .bf-text > *{translate:-70px 0;opacity:0}
.bf-motion .book-feature.in .bf-video{
  animation:bf-swoosh 1.25s cubic-bezier(.16,.9,.25,1) .1s both;
}
.bf-motion .book-feature.in .bf-text > *{
  animation:bf-text-in .8s cubic-bezier(.2,.9,.25,1) both;
}
.bf-motion .book-feature.in .bf-text > :nth-child(1){animation-delay:.15s}
.bf-motion .book-feature.in .bf-text > :nth-child(2){animation-delay:.28s}
.bf-motion .book-feature.in .bf-text > :nth-child(3){animation-delay:.4s}
.bf-motion .book-feature.in .bf-text > :nth-child(4){animation-delay:.52s}
.bf-motion .book-feature.in .bf-text > :nth-child(5){animation-delay:.64s}

/* a bright streak sweeps past as it lands */
.bf-motion .bf-video::before{
  content:"";position:absolute;z-index:2;top:-10%;bottom:-10%;left:-30%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(var(--c3-rgb),.55),rgba(255,255,255,.65),rgba(var(--c1-rgb),.5),transparent);
  filter:blur(14px);opacity:0;transform:skewX(-18deg);
}
.bf-motion .book-feature.in .bf-video::before{animation:bf-streak 1.1s ease-out .15s both}

@keyframes bf-swoosh{
  0%{translate:115vw -12vh;rotate:16deg;scale:.7;opacity:0}
  12%{opacity:1}
  62%{translate:-26px 6px;rotate:-5deg;scale:1.04;opacity:1}
  82%{translate:8px 0;rotate:1.5deg;scale:.99;opacity:1}
  100%{translate:0 0;rotate:0deg;scale:1;opacity:1}
}
@keyframes bf-text-in{from{translate:-70px 0;opacity:0}to{translate:0 0;opacity:1}}
@keyframes bf-streak{
  0%{left:110%;opacity:0}
  15%{opacity:1}
  100%{left:-60%;opacity:0}
}

@media (max-width:900px){
  .book-feature{padding-top:64px;padding-bottom:64px}
  .bf-panel{grid-template-columns:1fr;border-radius:24px}
  .bf-video{order:2}
  .bf-frame{rotate:-1.2deg}
}
@media (prefers-reduced-motion:reduce){
  .bf-motion .bf-video,.bf-motion .bf-text > *{translate:none;rotate:none;scale:none;opacity:1;animation:none!important}
  .bf-motion .bf-video::before{display:none}
}