/* ==========================================================================
   BT MOTION  v1.0.0
   Scroll choreography, the signature thread, hover video, cursor + magnetics.
   --------------------------------------------------------------------------
   RULES THIS FILE OBEYS
   1. Everything is progressive enhancement. With JS off, nothing is hidden.
      The .bt-motion class is added by bt-motion.js only after it decides
      motion is safe, so no-JS users never see a blank page.
   2. prefers-reduced-motion disables every animation, no exceptions.
   3. Cursor + magnetics only exist on real pointers (hover: hover).
   4. Nothing here moves anything on the conversion path.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADLINE ASSEMBLY
   Words rise into place. Only runs once, only when scrolled into view.
   -------------------------------------------------------------------------- */
.bt-motion .bt-split-word{
  display:inline-block;
  opacity:0;
  transform: translateY(.5em) rotate(1.5deg);
  transition: opacity .7s var(--bt-ease), transform .7s var(--bt-ease);
  will-change: transform, opacity;
}
.bt-motion .bt-split-word.in{ opacity:1; transform:none; }
/* keep italic accent words from clipping their descenders */
.bt-motion .bt-split-word em,
.bt-motion em .bt-split-word{ font-style:italic; }

/* --------------------------------------------------------------------------
   2. HERO PARALLAX
   The media drifts slower than the copy. Transform only, never top/margin.
   -------------------------------------------------------------------------- */
.bt-motion .b-hero__media,
.bt-motion .a-hero__media,
.bt-motion .e-hero__media{
  will-change: transform;
  transform: translate3d(0, var(--bt-par, 0px), 0) scale(1.08);
}

/* --------------------------------------------------------------------------
   3. THE THREAD  (the signature moment)
   A single gold line, drawn top to bottom as you scroll, that stitches every
   section of the page together. It is literally the table's thread of
   continuity, and it appears nowhere else on the internet for this brand.
   -------------------------------------------------------------------------- */
.bt-thread{
  position: fixed;
  top: 0; left: 50%;
  width: 2px; height: 100vh;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity .6s var(--bt-ease);
}
.bt-motion .bt-thread{ opacity: 1; }
.bt-thread__line{
  position:absolute; inset:0;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(201,162,39,.0) 8%,
    rgba(201,162,39,.55) 50%,
    rgba(201,162,39,.0) 92%,
    transparent 100%);
  transform-origin: top center;
  transform: scaleY(var(--bt-thread, 0));
}
/* the travelling node that rides the thread */
.bt-thread__node{
  position:absolute; left:50%; top:0;
  width:9px; height:9px; margin-left:-4.5px; margin-top:-4.5px;
  border-radius:50%;
  background: var(--bt-gold);
  box-shadow: 0 0 0 4px rgba(201,162,39,.18), 0 0 22px 4px rgba(201,162,39,.55);
  transform: translateY(var(--bt-node, 0px));
}
/* on narrow screens the thread hugs the left edge instead of the centre */
@media (max-width: 900px){
  .bt-thread{ left: 18px; transform:none; }
  .bt-thread__node{ left: 1px; margin-left:0; }
}

/* --------------------------------------------------------------------------
   4. HOVER VIDEO IN EPISODE CARDS
   The still stays until hover, then the clip crossfades in. Muted, looped,
   and only ever loaded on a real pointer device.
   -------------------------------------------------------------------------- */
.e-card__art video,
.b-epcard__art video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition: opacity .45s var(--bt-ease);
  pointer-events:none;
}
@media (hover: hover) and (pointer: fine){
  .bt-motion .e-card:hover .e-card__art video,
  .bt-motion .b-epcard:hover .b-epcard__art video{ opacity:1; }
  .bt-motion .e-card:hover .e-card__art img,
  .bt-motion .b-epcard:hover .b-epcard__art img{ opacity:0; }
}
.e-card__art img,.b-epcard__art img{ transition: opacity .45s var(--bt-ease), transform var(--bt-dur-slow) var(--bt-ease); }

/* --------------------------------------------------------------------------
   5. CUSTOM CURSOR
   A soft gold ring that trails the pointer and swells over interactive things.
   Desktop only. The native cursor is never hidden, so nothing is ever lost.
   -------------------------------------------------------------------------- */
.bt-cursor{
  position: fixed; top:0; left:0;
  width: 28px; height: 28px; margin:-14px 0 0 -14px;
  border-radius:50%;
  border:1px solid rgba(201,162,39,.7);
  background: rgba(201,162,39,.06);
  pointer-events:none; z-index: 99999;
  opacity:0;
  transition: opacity .3s var(--bt-ease),
              width .25s var(--bt-ease), height .25s var(--bt-ease),
              margin .25s var(--bt-ease), background .25s var(--bt-ease),
              border-color .25s var(--bt-ease);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine){
  .bt-motion .bt-cursor{ opacity:1; }
}
.bt-cursor.is-active{
  width:52px; height:52px; margin:-26px 0 0 -26px;
  background: rgba(201,162,39,.14);
  border-color: rgba(201,162,39,.95);
}
.bt-cursor.is-down{ width:22px; height:22px; margin:-11px 0 0 -11px; }

/* --------------------------------------------------------------------------
   6. MAGNETIC BUTTONS
   Buttons lean toward the pointer. Purely additive; the click target itself
   never moves away from where the user aimed.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine){
  .bt-motion .b-btn, .bt-motion .a-btn, .bt-motion .e-btn{
    will-change: transform;
    transition: transform .18s var(--bt-ease), background var(--bt-dur) var(--bt-ease), box-shadow var(--bt-dur) var(--bt-ease);
  }
}

/* --------------------------------------------------------------------------
   7. SECTION LIFT
   Each band eases up slightly as it enters. Subtle; you feel it, not see it.
   -------------------------------------------------------------------------- */
.bt-motion .bt-lift{ opacity:0; transform: translateY(30px); transition: opacity .9s var(--bt-ease), transform .9s var(--bt-ease); }
.bt-motion .bt-lift.in{ opacity:1; transform:none; }

/* --------------------------------------------------------------------------
   8. THE OFF SWITCH
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .bt-motion .bt-split-word,
  .bt-motion .bt-lift{ opacity:1 !important; transform:none !important; transition:none !important; }
  .bt-motion .b-hero__media,
  .bt-motion .a-hero__media,
  .bt-motion .e-hero__media{ transform:none !important; }
  .bt-thread,.bt-cursor{ display:none !important; }
  .e-card__art video,.b-epcard__art video{ display:none !important; }
}