/* The home-page reel. Replaces the two static phones with one frame that plays a
   scripted run of real screens, coach by default, athlete behind a toggle.

   The device is drawn here rather than baked into the images, which is the whole
   point: the frame stays still while the screens move inside it, so it reads as
   somebody using a phone instead of a slideshow of pictures. Geometry is taken
   from the framed PNGs used elsewhere on the site -- 38px bezel on a 1282x2698
   canvas, 134px corner -- expressed as percentages so it holds at any width. */

.reel{display:flex;flex-direction:column;align-items:center;gap:0;--pw:min(410px,74vw)}

/* --- who am I watching ---------------------------------------------------- */
.reel-tabs{display:inline-flex;padding:4px;gap:4px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);margin-bottom:20px}
.reel-tabs button{appearance:none;border:0;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#93A9BE;background:transparent;padding:9px 20px;border-radius:999px;transition:.18s}
.reel-tabs button:hover{color:#fff}
.reel-tabs button[aria-selected="true"]{background:#fff;color:#05101C}

/* --- progress: one segment per beat, so the length is visible up front ----- */
.reel-segs{display:flex;gap:4px;width:var(--pw);margin-bottom:13px}
.reel-segs .seg{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.16);
  overflow:hidden;cursor:pointer;position:relative}
.reel-segs .seg::after{content:"";position:absolute;inset:-7px 0}   /* touch target */
.reel-segs .seg i{display:block;height:100%;width:100%;background:var(--lime);
  transform:scaleX(0);transform-origin:left;border-radius:2px}
.reel-segs .seg.done i{transform:scaleX(1)}

/* --- the device ------------------------------------------------------------ */
.reel-stage{position:relative;width:var(--pw)}
.reel-phone{width:100%;aspect-ratio:1282/2698;padding:.78%;border-radius:10.45%/4.97%;
  background:linear-gradient(155deg,#DFE3E9,#98A1AC 34%,#C9CDD4 58%,#848E9A);
  filter:drop-shadow(0 44px 74px rgba(0,0,0,.68))}
.reel-bez{width:100%;height:100%;background:#0B0D10;padding:2.19%;
  border-radius:9.8%/4.66%}
.reel-screen{position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:8.4%/3.9%;background:#0B1B2B}
/* THE ENTRY MOVES `translate`; THE DRIFT MOVES `scale`. They used to share one
   `transform`, and an animation beats a transition in the cascade: the instant
   .on landed, reeldrift seized transform and snapped the incoming screen from
   its offset straight into place, so nothing but the opacity ever actually
   eased. That snap is the hard cut between sections. Two separate properties
   cannot fight over one value, so the slide now really runs. */
.reel-screen img,
.reel-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:top center;opacity:0;translate:4% 0;z-index:1;
  transition:opacity .6s ease,translate .78s cubic-bezier(.22,.61,.36,1)}
/* THE OUTGOING SCREEN HOLDS UNDERNEATH while the incoming one fades in over the
   top of it, and only drops once it is completely covered. Fading both at the
   same time let the dark bezel show through the middle of every change -- a dip
   to black that reads as a cut no matter how long the fade is. */
.reel-screen img.out,
.reel-screen video.out{opacity:0;translate:-3% 0;z-index:1;
  transition:opacity .3s ease .58s,translate .9s cubic-bezier(.22,.61,.36,1)}
.reel-screen img.on,
.reel-screen video.on{opacity:1;translate:0 0;z-index:2}
/* A screen that is perfectly still for five seconds looks like a screenshot no
   matter how it arrived. The drift is small enough not to register as motion. */
.reel-screen img.on{animation:reeldrift var(--dur,5s) linear forwards}
/* No drift on a clip: it already moves, and a slow zoom on top of real motion
   reads as a wobble rather than as life. */
.reel-screen video.on{animation:none}
@keyframes reeldrift{from{scale:1}to{scale:1.035}}

/* --- the play control, on the screen --------------------------------------- */
.reel-ctl{position:absolute;display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  background:rgba(8,18,30,.72);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(8px);transition:.15s;z-index:3}
.reel-ctl:hover{background:rgba(8,18,30,.94);border-color:#fff}
.reel-ctl svg{width:15px;height:15px;fill:#fff;stroke:none}
/* THE PLAY CONTROL BELONGS ON THE SCREEN. It was a 34px disc hung half off the
   bottom-left corner of the bezel -- where a player's chrome lives, and nowhere
   near where anybody looks to start a video. Sized as a share of the frame so it
   holds its proportions across the 190-460px the phone is allowed to be. */
.reel-play{left:50%;top:50%;translate:-50% -50%;
  width:clamp(52px,23%,104px);height:auto;aspect-ratio:1;
  background:rgba(8,18,30,.5);border:1.5px solid rgba(255,255,255,.5);
  transition:opacity .3s ease,background .18s,border-color .18s,scale .18s}
.reel-play svg{width:38%;height:38%}
.reel-play:hover{scale:1.05}
/* PLAYING: still there, still working, but no longer the thing to look at -- a
   solid disc parked over the middle of the screen would cover the very thing it
   just started. It returns to full strength on hover and on keyboard focus, so
   it never becomes a control you have to know is there. */
.reel-play.playing{opacity:.24;background:rgba(8,18,30,.3);border-color:rgba(255,255,255,.32)}
.reel-play.playing:hover,
.reel-play.playing:focus-visible{opacity:1;background:rgba(8,18,30,.62);border-color:#fff}

/* --- the line that does the selling ---------------------------------------- */
/* The scrubber. Deliberately plain: a thin track the width of the frame, so it
   reads as part of the player rather than as a form control that wandered in. */
.reel-scrub{-webkit-appearance:none;appearance:none;width:var(--pw);margin-top:16px;
  height:16px;background:transparent;cursor:pointer;display:block}
.reel-scrub::-webkit-slider-runnable-track{height:4px;border-radius:3px;
  background:rgba(255,255,255,.18)}
.reel-scrub::-moz-range-track{height:4px;border-radius:3px;background:rgba(255,255,255,.18)}
.reel-scrub::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;background:var(--lime);margin-top:-5px;
  border:0;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.reel-scrub::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--lime);border:0}
.reel-scrub:focus-visible{outline:2px solid var(--blue);outline-offset:4px}

.reel-cap{margin-top:14px;width:min(430px,100%);text-align:center;
  font-size:clamp(16.5px,1.55vw,20px);font-weight:800;line-height:1.32;
  letter-spacing:-.022em;color:#fff;min-height:2.64em;
  display:flex;align-items:center;justify-content:center}
.reel-cap a{color:inherit;border-bottom:1.5px solid transparent}
.reel-cap a:hover{border-bottom-color:rgba(255,255,255,.55)}
.reel-cap span{opacity:0;transform:translateY(6px);
  transition:opacity .34s ease,transform .34s cubic-bezier(.22,.61,.36,1)}
.reel-cap span.on{opacity:1;transform:none}
.reel-sub{margin-top:7px;font-size:12.5px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim-2);text-align:center}

@media (max-width:940px){ .reel{--pw:min(360px,66vw)} }
@media (max-width:760px){ .reel{--pw:min(300px,62vw)} .reel-cap{min-height:3.9em} }

/* Somebody who has asked for less motion gets the reel with the drift and the
   slide removed and nothing starting on its own -- not a broken feature, and not
   a wall of twelve screenshots either. */
@media (prefers-reduced-motion:reduce){
  .reel-screen img,
  .reel-screen video{transition:opacity .2s linear;translate:none!important;
    scale:none!important;transform:none!important;animation:none!important}
  .reel-cap span{transition:none}
}