/* One video source travels from the introduction into the large reel frame. */
.intro[data-reel-motion]{position:relative;isolation:isolate;padding-top:110px;padding-bottom:60px;grid-template-rows:auto auto;--reel-base-size:clamp(.875rem,1vw,2rem);--reel-card-x:var(--pad);--reel-card-y:150px;--reel-card-width:42vw;--reel-card-height:23.625vw;--reel-card-rotate:0deg}
.intro[data-reel-motion] .intro-title{position:relative;z-index:2;margin:0 0 65px;font-size:10vw;line-height:1;letter-spacing:-.04em;grid-row:1;pointer-events:none}
.intro[data-reel-motion] .intro-first{padding-left:17%}
.intro[data-reel-motion] .intro-copy{grid-column:7/-1;grid-row:2;align-self:start;position:relative;z-index:4;max-width:none;font-size:clamp(18px,1.5vw,30px);line-height:1.4}
.intro[data-reel-motion] .intro-copy .pill{margin-top:50px}
.reel-motion-arc{position:absolute;left:0;top:0;width:100%;height:108vw;min-height:850px;max-height:2200px;pointer-events:none;z-index:0}
.reel-motion-track{grid-column:1/-1;grid-row:2;height:var(--reel-track-height,310svh);position:relative;align-self:start;width:calc(100% + 2 * var(--pad));margin-inline:calc(-1 * var(--pad));z-index:3;overflow:clip}
.reel-motion-sticky{position:sticky;top:0;width:100%;height:100svh;overflow:visible}
.reel-motion-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .18s linear}
.reel-motion-webgl-ready .reel-motion-canvas{opacity:1}
.intro[data-reel-motion] .reel-motion-card{position:absolute;left:var(--reel-card-x);top:var(--reel-card-y);width:var(--reel-card-width);height:var(--reel-card-height);aspect-ratio:auto;display:block;padding:0;overflow:visible;border-radius:18px;background:transparent;transform:rotate(var(--reel-card-rotate));transition:none;will-change:width,height,left,top;z-index:3}
.intro[data-reel-motion] .reel-motion-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:18px;transition:opacity .18s linear;filter:none;transform:none}
.reel-motion-webgl-ready .reel-motion-card video{opacity:0}
.intro[data-reel-motion] .reel-motion-card:hover video{transform:none;filter:none}
.intro[data-reel-motion] .reel-motion-card{font-size:var(--reel-base-size);pointer-events:none}
.reel-motion-label{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:2em;color:#fff;font-size:7.5em;line-height:1;letter-spacing:0;white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none}
.reel-motion-title-word{position:relative;overflow:hidden;display:flex;height:.8em;will-change:transform}
.reel-motion-char-wrapper{position:relative;display:inline-block;top:-.15em;height:1em;width:.6em;will-change:transform}
.reel-motion-char{display:block;position:relative;height:1em;line-height:1}
.reel-motion-char-copy{position:absolute;left:0;top:100%}
.reel-motion-play{position:absolute;left:calc(50% - 4.7em);top:calc(50% - 3em);width:9.4em;height:6em;font-size:1em;overflow:hidden;border-radius:22.5em;color:#000;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;will-change:transform}
.reel-motion-play-base,.reel-motion-play-background{position:absolute;inset:0;border-radius:22.5em}
.reel-motion-play-base{background:#fff;transition:background .3s cubic-bezier(.4,0,.1,1)}
.reel-motion-play-background{background:var(--blue);transform:scale3d(1,0,1);transform-origin:bottom;transition:transform .4s cubic-bezier(.4,0,.1,1)}
.reel-motion-play svg{position:relative;z-index:1;width:2em;height:2em;color:#000;transition:color .3s cubic-bezier(.4,0,.1,1)}
@media(hover:hover){.reel-motion-button-hover .reel-motion-play-base{background:var(--blue);transition:background .1s .3s cubic-bezier(.4,0,.1,1)}.reel-motion-button-hover .reel-motion-play-background{transform:scale3d(1,1,1)}.reel-motion-button-hover .reel-motion-play svg{color:#fff}}
.reel-motion-card:focus-visible{outline:3px solid var(--blue);outline-offset:9px}
.reel-motion-rail{position:absolute;left:var(--reel-card-x);width:var(--reel-card-width);display:block;height:1em;font-size:var(--reel-base-size);overflow:hidden;pointer-events:none;z-index:3}
.reel-motion-rail-top{top:calc(var(--reel-card-y) - var(--reel-base-size) * 2)}
.reel-motion-rail-bottom{top:calc(var(--reel-card-y) + var(--reel-card-height) + var(--reel-base-size))}
.reel-motion-cross{position:absolute;top:0;width:1em;height:1em}
.reel-motion-cross:nth-child(1){left:0}.reel-motion-cross:nth-child(2){left:calc(25% - .5em)}.reel-motion-cross:nth-child(3){left:calc(50% - .5em)}.reel-motion-cross:nth-child(4){left:calc(75% - .5em)}.reel-motion-cross:nth-child(5){left:calc(100% - 1em)}
.reel-motion-cross::before,.reel-motion-cross::after{content:"";position:absolute;left:50%;top:50%;background:#000;transform:translate(-50%,-50%)}
.reel-motion-cross::before{width:1em;height:.125em}.reel-motion-cross::after{height:1em;width:.125em}
.reel-motion-rail-strip{position:absolute;top:0;left:0;display:flex;justify-content:space-around;width:200%;will-change:transform}
.reel-motion-rail-strip svg{height:1em;width:auto;flex-shrink:0;will-change:transform}
.intro[data-reel-active=false] .reel-motion-card,.intro[data-reel-active=false] .reel-motion-rail{visibility:hidden}
@media (min-width:2400px){.intro[data-reel-motion] .intro-title{font-size:6.7vw}.intro[data-reel-motion] .intro-copy{grid-column:8/span 3;font-size:clamp(20px,1vw,36px)}}
@media (max-width:812px){
  .intro[data-reel-motion]{padding-top:70px;padding-bottom:45px;grid-template-rows:auto auto auto}
  .intro[data-reel-motion] .intro-title{font-size:13.8vw;margin-bottom:38px;letter-spacing:-.045em}
  .intro[data-reel-motion] .intro-first{padding-left:0}
  .intro[data-reel-motion] .intro-copy{grid-column:1/-1;grid-row:2;font-size:18px;max-width:600px}
  .intro[data-reel-motion] .intro-copy .pill{margin-top:28px}
  .reel-motion-arc{height:190vw;min-height:800px;opacity:.75}
  .reel-motion-track{grid-row:3;height:155svh;margin-top:30px}
  .reel-motion-sticky{height:100svh}
  .reel-motion-label{font-size:clamp(30px,8vw,65px);gap:3.5em}
  .reel-motion-play{left:calc(50% - 39px);top:calc(50% - 26.5px);width:78px;height:53px;font-size:20px}
  .reel-motion-rail{font-size:21px}
}
@media (max-width:420px){.intro[data-reel-motion] .intro-copy{font-size:16px}.reel-motion-label{gap:3.2em}.reel-motion-play{left:calc(50% - 32.5px);top:calc(50% - 22px);width:65px;height:44px}}
@media (prefers-reduced-motion:reduce){
  .reel-motion-track{grid-row:3;height:calc((100vw - 2 * var(--pad)) * .5 + 170px);margin-top:20px}
  .reel-motion-sticky{position:relative;top:auto;height:100%}
  .reel-motion-canvas{display:none}
  .intro[data-reel-motion] .reel-motion-card video{opacity:1}
  .reel-motion-play-base,.reel-motion-play-background,.reel-motion-play svg{transition:none}
}
