/* ── Black Shepherd outro · a 16:9 stage that pins while you scroll through it ──────
   The section is a tall scroll track; its stage sticks to the top of the screen. Scenes 1-2 play
   as one opening, then each --vx-step of scrolling moves on to the next scene. Type proportions follow the Figma frame
   (60px type on a 1500px page). Tweak only the variables marked ✎. Desktop sizes are % of the
   frame; phones get their own full-screen layout further down. */
@property --vx-p { syntax: '<number>'; inherits: false; initial-value: 1; }

.vx-outro {
  --vx-scale: .9;        /* ✎ frame size as a share of the screen height        */
  --vx-max: 1440px;      /* ✎ largest frame width                                */
  --vx-type: 3.2cqw;     /* ✎ headline size (Figma: 60px on 1500 = 4cqw, scaled down a little) */
  --vx-step: 75vh;       /* ✎ how far you scroll for each scene                   */
  --vx-fg: #d9d9d9;
  --vx-pitch: 3px;
  --vx-py: 32px;
  position: relative; box-sizing: border-box; width: 100%;
  height: calc(100vh + 4.5 * var(--vx-step));   /* the stage + one step per scroll stop (4) + half a step for the button */
  background: #000; color: var(--vx-fg);
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.vx-outro *, .vx-outro *::before, .vx-outro *::after { box-sizing: border-box; }
.vx-outro .vx-stage {                           /* pinned to the top of the screen while you scroll the track */
  position: -webkit-sticky; position: sticky; top: 0;
  height: 100vh; display: grid; place-items: center;
  padding: var(--vx-py) clamp(0px, 4vw, 64px); overflow: hidden;
}
.vx-outro .vx-frame {
  position: relative; container-type: inline-size; aspect-ratio: 16 / 9;
  width: min(100%, var(--vx-max), calc((100vh - 2 * var(--vx-py)) * 16 / 9 * var(--vx-scale)));
}
@supports (height: 100svh) {
  .vx-outro { --vx-py: clamp(12px, 4svh, 56px); height: calc(100svh + 4.5 * var(--vx-step)); }
  .vx-outro .vx-stage { height: 100svh; }
  .vx-outro .vx-frame { width: min(100%, var(--vx-max), calc((100svh - 2 * var(--vx-py)) * 16 / 9 * var(--vx-scale))); }
}
@media (max-aspect-ratio: 1/1) { .vx-outro .vx-frame { width: 100%; } }   /* portrait tablets: full width */
.vx-outro:not(.vx-js), .vx-outro.vx-static { height: auto; }   /* no script (Webflow Designer) or reduced motion: one screen, finished frame */
.vx-outro.vx-jspin .vx-stage { position: relative; will-change: transform; }   /* fallback when a parent's overflow breaks sticky */

/* scenes: stacked, one visible at a time; each video sits in its own box (x, y, width) */
.vx-outro .vx-scene { position: absolute; inset: 0; visibility: hidden; mix-blend-mode: screen; }   /* black stays see-through while scenes hand over */
.vx-outro .vx-scene.is-on { visibility: visible; }
.vx-outro .vx-media {
  position: absolute; z-index: 0; aspect-ratio: 16 / 9;
  left: var(--x); top: var(--y); width: var(--w);
}
/* scenes 1 + 2 share one wand: it sits dead centre, and scene 1's box is scene 2's box scaled
   by the measured fit, so the wand at the end of the lasso lands exactly on the one on the ground */
.vx-outro .vx-s1 { --x: 29.06%; --y: 29.84%; --w: 41.5%; }
.vx-outro .vx-s2 { --x: -8.15%; --y: -1.51%; --w: 78%; }
.vx-outro .vx-s3 { --x: 7.5%;   --y: -1.6%;  --w: 85%; }    /* room under the horse for line 2 */
.vx-outro .vx-s4 { --x: 7.5%;   --y: 6.8%;   --w: 85%; }    /* sky above the rider for line 3  */
.vx-outro .vx-s5 { --x: 7.5%;   --y: 0%;     --w: 85%; }
.vx-outro .vx-s2 .vx-media { transform-origin: 74.56% 50%; }   /* scene 2 opens out of the wand */
.vx-outro .vx-media.vx-fade { opacity: 0; transition: opacity .45s ease; }   /* scene 1 bowing out under scene 2 */
.vx-outro .vx-media.vx-unfade { transition: opacity .3s ease; }               /* …and coming back if you scroll up */
.vx-outro .vx-vid, .vx-outro .vx-poster {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  display: block; margin: 0; border: 0; padding: 0; object-fit: contain; background: transparent;
}
.vx-outro .vx-media.is-wait { opacity: 0; }
.vx-outro .vx-poster { opacity: 0; }
.vx-outro .is-still .vx-poster { opacity: 1; }
.vx-outro .is-still .vx-vid { opacity: 0; }

/* type: Poppins SemiBold, caps, 0.05em tracking, 70/60 leading, #D9D9D9 (from the PDF) */
.vx-outro .vx-txt {
  position: absolute; left: 0; right: 0; z-index: 2; margin: 0; padding: 0 0 0 .05em;
  text-align: center; text-transform: uppercase; letter-spacing: .05em; color: var(--vx-fg);
  font-family: inherit; font-weight: 600; line-height: 1.1667;
  font-size: max(14px, 2.8vw); font-size: max(14px, var(--vx-type));
  translate: 0 -50%;
}
.vx-outro br.vx-m { display: none; }
.vx-outro .vx-t1 { top: 73.8%; }   /* scenes 1–2: under the wand (and beside the cow's legs) */
.vx-outro .vx-t2 { top: 88.2%; }   /* under the horse                                          */
.vx-outro .vx-t3 { top: 15.7%; }   /* sky above the rider                                      */
.vx-outro .vx-end {
  position: absolute; left: 0; right: 0; top: 62.1%; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
}
.vx-outro .vx-end .vx-txt { position: static; translate: none; }
.vx-outro .vx-kicker {          /* 15px on the 60px scale, regular */
  font-weight: 400; line-height: 1; letter-spacing: .06em;
  font-size: max(10px, .7vw); font-size: max(10px, calc(var(--vx-type) * .25));
  margin-bottom: max(4px, calc(var(--vx-type) * .233));
}

/* CTA: 266×47, 9.4 radius, 14px label, lasso icon (PDF) */
.vx-outro .vx-cta {
  display: inline-flex; align-items: center; gap: max(9px, .83cqw);
  min-height: max(38px, 3.13cqw); margin-top: max(14px, calc(var(--vx-type) * 1.42));
  padding: 0 max(11px, .84cqw) 0 max(12px, .9cqw);
  border-radius: max(6px, .63cqw);
  background: var(--vx-fg); color: #000; text-decoration: none;
  font: 600 max(11px, .93cqw)/1 'Poppins', system-ui, sans-serif;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .25s ease;
}
.vx-outro .vx-cta svg { width: max(22px, 2.11cqw); height: auto; flex: none; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.vx-outro .vx-cta:hover { background: #fff; }
.vx-outro .vx-cta:hover svg { transform: rotate(-14deg); }
.vx-outro .vx-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (pointer: coarse) { .vx-outro .vx-cta { min-height: max(40px, 3.13cqw); } }

/* ── phones (portrait): the whole screen is the stage. Art is sized in cqw (% of the screen width)
   and placed from the middle of the screen, so every phone height gets the same composition. ── */
@media (max-width: 600px) and (max-aspect-ratio: 3/4) {
  .vx-outro { --vx-type: clamp(18px, 5.8cqw, 26px); --vx-step: 85vh; }   /* ✎ a bit more scroll per scene for flicky thumbs */
  .vx-outro .vx-stage { padding: 0; }
  .vx-outro .vx-frame { width: 100%; height: 100%; aspect-ratio: auto; }
  /* --mx / --mw: left edge and width of each video box; --my: its top edge, measured from the middle of the screen.
     Scenes 1 + 2 follow the same wand rule as desktop: wand centred, the cow runs off the left edge a little. */
  .vx-outro .vx-media { left: var(--mx); top: calc(50% + var(--my)); width: var(--mw); }
  .vx-outro .vx-s1 { --mx: 25.3cqw;   --my: -21.94cqw; --mw: 48.94cqw; }
  .vx-outro .vx-s2 { --mx: -18.59cqw; --my: -42.73cqw; --mw: 92cqw; }
  .vx-outro .vx-s3 { --mx: -30.75cqw; --my: -61.47cqw; --mw: 160cqw; }
  .vx-outro .vx-s4 { --mx: -18.75cqw; --my: -29.4cqw;  --mw: 125cqw; }
  .vx-outro .vx-s5 { --mx: -6.4cqw;   --my: -61.62cqw; --mw: 120cqw; }

  .vx-outro .vx-txt { font-size: var(--vx-type); padding: 0 5cqw 0 calc(5cqw + .05em); translate: none; text-wrap: balance; }
  .vx-outro br.vx-m { display: inline; }
  .vx-outro br.vx-d { display: none; }
  .vx-outro .vx-t1 { top: calc(50% + 4.45cqw); }                     /* top edge: under the wand    */
  .vx-outro .vx-t2 { top: calc(50% + 27.67cqw); }                    /* top edge: under the horse   */
  .vx-outro .vx-t3 { top: calc(50% - 19.98cqw); translate: 0 -100%; } /* bottom edge: above the herd */
  .vx-outro .vx-end { top: calc(50% - 2.46cqw); }
  .vx-outro .vx-kicker { font-size: 11.5px; letter-spacing: .12em; margin-bottom: 9px; }
  .vx-outro .vx-cta {
    min-height: 46px; margin-top: calc(var(--vx-type) * 1.3); padding: 0 16px 0 18px; gap: 12px;
    border-radius: 9px; font-size: 12.5px;
  }
  .vx-outro .vx-cta svg { width: 27px; }
}

/* without JS (and in the Webflow Designer) the finished frame shows */
.vx-outro:not(.vx-js) .vx-last { visibility: visible; }
.vx-outro:not(.vx-js) .vx-last .vx-poster { opacity: 1; }
.vx-outro:not(.vx-js) .vx-t1, .vx-outro:not(.vx-js) .vx-t2, .vx-outro:not(.vx-js) .vx-t3 { display: none; }
.vx-outro.vx-js .vx-txt { opacity: 0; }
.vx-outro.vx-js .vx-txt.is-in { opacity: 1; }
.vx-outro.vx-js .vx-cta:not(.is-in) { pointer-events: none; }

/* media: unfold from / fold into a slit, like the clips themselves */
.vx-outro .vx-unfold { animation: vx-unfold .6s cubic-bezier(.2, .75, .25, 1) both; }
.vx-outro .vx-unfold.vx-slow { animation-duration: .8s; }
.vx-outro .vx-fold { animation: vx-fold .42s cubic-bezier(.55, 0, .85, .25) both; }
.vx-outro .vx-fadein { animation: vx-fadein .3s ease-out both; }
@keyframes vx-unfold { 0% { transform: scaleX(.04); opacity: 0; } 18% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes vx-fold { 0% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { transform: scaleX(.03); opacity: 0; } }
@keyframes vx-fadein { from { opacity: 0; } }
/* text: dithered scan-lines thicken into solid type as it rises in (no spin) */
.vx-outro .vx-txt.vx-in, .vx-outro .vx-txt.vx-out {
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 calc(var(--vx-p) * var(--vx-pitch)), transparent 0 var(--vx-pitch));
          mask-image: repeating-linear-gradient(180deg, #000 0 calc(var(--vx-p) * var(--vx-pitch)), transparent 0 var(--vx-pitch));
}
.vx-outro .vx-txt.vx-in { animation: vx-rise .6s cubic-bezier(.2, .7, .2, 1) both, vx-scan-in .6s steps(8, jump-end) both; }
.vx-outro .vx-txt.vx-out { animation: vx-sink .32s ease-in both, vx-scan-out .32s steps(5, jump-end) both; }
.vx-outro .vx-quick { animation-duration: .26s !important; }
@keyframes vx-rise { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }
@keyframes vx-sink { from { opacity: 1; } to { opacity: 0; transform: translateY(-.15em); } }
@keyframes vx-scan-in { from { --vx-p: .12; } to { --vx-p: 1; } }
@keyframes vx-scan-out { from { --vx-p: 1; } to { --vx-p: .1; } }

@media (prefers-reduced-motion: reduce) {
  .vx-outro .vx-unfold, .vx-outro .vx-fold, .vx-outro .vx-fadein, .vx-outro .vx-txt.vx-in, .vx-outro .vx-txt.vx-out { animation: none; -webkit-mask-image: none; mask-image: none; }
  .vx-outro .vx-media.vx-fade, .vx-outro .vx-media.vx-unfade { transition: none; }
}