/* Vince Wilson home page motion layer. Everything here is gated behind html.mo-js,
   so the page reads perfectly without JavaScript or with reduced motion. */

:root{--mo-ease:cubic-bezier(.2,.8,.2,1);--mo-ease-io:cubic-bezier(.7,0,.2,1)}
section[id]{scroll-margin-top:88px}

/* ---------- Header: fixed, condenses on scroll ---------- */
.pb-header{position:fixed;transition:background-color .4s,backdrop-filter .4s,border-color .4s;border-bottom:1px solid transparent}
.pb-header .nav{transition:height .4s var(--mo-ease)}
.pb-header.is-scrolled{background:rgba(15,13,12,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom-color:var(--rule-soft)}
.pb-header.is-scrolled .nav{height:76px}
.mo-progress{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--brass);transform-origin:left;transform:scaleX(var(--mo-p,0));opacity:.8;pointer-events:none}

/* ---------- Curtain overture ---------- */
.mo-curtain{display:none}
.mo-js .mo-curtain{display:block;position:fixed;inset:0;z-index:100;pointer-events:auto;cursor:pointer;overflow:hidden;background:transparent;transition:visibility 0s 1.9s}
.mo-js.mo-nointro .mo-curtain,.mo-done .mo-curtain{display:none!important}
.mo-drape{position:absolute;top:0;bottom:0;width:51%;
  background:
    linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(90deg,#2a060b 0,#5e111b 1.6%,#8e2230 3.2%,#b03543 4.1%,#8a1f2c 5.2%,#4d0d16 7%,#2a060b 8.4%);
  box-shadow:inset 0 0 120px rgba(0,0,0,.6);
  transition:transform 1.7s var(--mo-ease-io),filter 1.7s var(--mo-ease-io)}
.mo-left{left:0;transform-origin:0 50%}
.mo-right{right:0;transform-origin:100% 50%}
.mo-drape:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%,rgba(255,214,150,.22),rgba(0,0,0,0) 55%)}
.mo-valance{position:absolute;left:0;right:0;top:0;height:13vh;min-height:80px;z-index:2;
  background:
    radial-gradient(ellipse 60% 120% at 50% 0,rgba(0,0,0,0) 60%,rgba(0,0,0,.5) 100%),
    repeating-linear-gradient(90deg,#4a0c14 0,#8a1f2c 2.5%,#5c111a 5%);
  border-bottom:3px solid var(--brass);
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  transition:transform 1.3s var(--mo-ease-io) .15s}
.mo-valance:after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:11px;
  background:radial-gradient(circle at 10px 0,var(--brass) 0 3px,rgba(0,0,0,0) 3.5px) 0 0/20px 11px repeat-x;opacity:.85}
.mo-presents{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;color:var(--bone);pointer-events:none;
  opacity:0;transform:translateY(10px);animation:mo-presents 1.25s var(--mo-ease) .15s forwards}
.mo-presents img{width:84px;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.7))}
.mo-presents b{font-family:var(--display);font-weight:400;font-size:clamp(2.4rem,5vw,3.6rem);line-height:1;text-shadow:0 4px 24px rgba(0,0,0,.8)}
.mo-presents small{font:500 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:#E8C894}
.mo-skip{position:absolute;right:24px;bottom:22px;z-index:4;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(238,230,214,.6)}
@keyframes mo-presents{to{opacity:1;transform:none}}
.mo-open .mo-presents{animation:none;opacity:0;transform:translateY(-8px);transition:opacity .35s,transform .35s}
.mo-open .mo-skip{opacity:0;transition:opacity .2s}
.mo-open .mo-left{transform:translateX(-6%) scaleX(.06);filter:brightness(.55)}
.mo-open .mo-right{transform:translateX(6%) scaleX(.06);filter:brightness(.55)}
.mo-open .mo-valance{transform:translateY(-110%)}
.mo-open .mo-curtain{visibility:hidden;pointer-events:none}

/* ---------- Hero ---------- */
.mo-spot,.mo-motes{position:absolute;inset:0;z-index:1;pointer-events:none}
.mo-spot{background:
  radial-gradient(circle 380px at var(--sx,62%) var(--sy,42%),rgba(255,214,160,.13),rgba(255,214,160,0) 70%),
  radial-gradient(circle 760px at var(--sx,62%) var(--sy,42%),rgba(8,6,5,0) 25%,rgba(8,6,5,.5) 100%)}
.mo-motes{width:100%;height:100%}
.pb-hero h1 .mo-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.pb-hero h1 .mo-line>*{display:inline-block}
.mo-js .pb-hero h1 .mo-line>*{transform:translateY(108%);transition:transform 1.25s var(--mo-ease)}
.mo-js .pb-hero h1 .mo-line:nth-child(2)>*{transition-delay:.16s}
.mo-ready .pb-hero h1 .mo-line>*{transform:none}
.mo-js .pb-hero .pb-eyebrow,.mo-js .pb-hero-row>*{opacity:0;transform:translateY(18px);transition:opacity 1s var(--mo-ease),transform 1s var(--mo-ease)}
.mo-js .pb-hero .pb-eyebrow{transition-delay:.05s}
.mo-js .pb-hero-row>:first-child{transition-delay:.55s}
.mo-js .pb-hero-row>:last-child{transition-delay:.75s}
.mo-ready .pb-hero .pb-eyebrow,.mo-ready .pb-hero-row>*{opacity:1;transform:none}
.mo-js .pb-hero video{transform:scale(1.08);transition:transform 3.2s var(--mo-ease)}
.mo-ready .pb-hero video{transform:scale(1)}

/* Brass glint across the italic lines */
.mo-glint{background:linear-gradient(100deg,var(--oxblood-text) 0%,var(--oxblood-text) 42%,#F1C98F 50%,var(--oxblood-text) 58%,var(--oxblood-text) 100%);
  background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.mo-glint.is-glinting{animation:mo-glint 1.8s var(--mo-ease) forwards}
@keyframes mo-glint{from{background-position:100% 0}to{background-position:0 0}}

/* ---------- Generic scroll reveals ---------- */
.mo-js [data-mo]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--mo-ease),transform 1s var(--mo-ease);transition-delay:var(--mo-d,0s)}
.mo-js [data-mo].is-in{opacity:1;transform:none}
.mo-js [data-mo="fade"]{transform:none}

/* Press logos rise in one by one */
.mo-js .pb-press-logos>*{opacity:0;transform:translateY(12px);transition:opacity .8s var(--mo-ease),transform .8s var(--mo-ease),filter .3s;transition-delay:var(--mo-d,0s)}
.mo-js .pb-press-logos.is-in>*{opacity:.78;transform:none}
.mo-js .pb-press-logos.is-in>span{opacity:1}
.mo-js .pb-press-logos.is-in:hover>img{opacity:1}

/* Programme: rules draw themselves */
.pb-act{position:relative}
.mo-js .pb-act{border-bottom-color:transparent}
.pb-act:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--rule);transform-origin:left;transform:scaleX(1)}
.mo-js .pb-act:after{transform:scaleX(0);transition:transform 1.4s var(--mo-ease);transition-delay:calc(var(--mo-d,0s) + .2s)}
.mo-js .pb-act.is-in:after{transform:scaleX(1)}
.pb-act:nth-child(even):after{left:0}
.mo-js .pb-act .pb-num{display:inline-block;opacity:0;transform:scale(.6) rotate(-8deg);transition:opacity .9s var(--mo-ease),transform .9s var(--mo-ease),text-shadow .6s;transition-delay:calc(var(--mo-d,0s) + .25s)}
.mo-js .pb-act.is-in .pb-num{opacity:1;transform:none}
.pb-act:hover .pb-num{text-shadow:0 0 18px rgba(194,155,95,.55)}

/* About photo: a wipe, then the badge, then the year spins in */
.mo-js .pb-photo img{clip-path:inset(0 100% 0 0);transform:scale(1.08);transition:clip-path 1.5s var(--mo-ease-io),transform 2.2s var(--mo-ease)}
.mo-js .pb-photo.is-in img{clip-path:inset(0 0 0 0);transform:none}
.mo-js .pb-photo .pb-badge{opacity:0;transform:translateY(24px);transition:opacity .9s var(--mo-ease) .9s,transform .9s var(--mo-ease) .9s}
.mo-js .pb-photo.is-in .pb-badge{opacity:1;transform:none}
.mo-digits{display:inline-flex;line-height:1.12}
.mo-digit{display:inline-block;height:1.12em;overflow:hidden}
.mo-reel{display:block;transition:transform 1.8s cubic-bezier(.15,.85,.25,1)}
.mo-reel>span{display:block;height:1.12em}

/* Productions: cards rise, then tilt toward the cursor with a spotlight glare */
.pb-show{position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform}
.mo-js .pb-show{transition:opacity 1s var(--mo-ease),transform .5s var(--mo-ease),border-color .3s;transition-delay:var(--mo-d,0s),0s,0s}
.mo-js .pb-show.is-in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px))}
.pb-show img{transition:transform 1.2s var(--mo-ease)}
.pb-show:hover img{transform:scale(1.05)}
.pb-show:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle 260px at var(--gx,50%) var(--gy,30%),rgba(255,226,180,.16),rgba(255,226,180,0) 70%)}
.pb-show:hover:after{opacity:1}
.pb-show:hover{transform:none}

/* Quote: words light up as you read */
.mo-js .pb-quote blockquote .mo-word{opacity:.16;transition:opacity .5s,color .5s}
.mo-js .pb-quote blockquote .mo-word.is-lit{opacity:1}
.mo-js .pb-quote .mark{opacity:0;transform:scale(.4) translateY(20px);transition:opacity 1s var(--mo-ease),transform 1.2s var(--mo-ease)}
.mo-js .pb-quote .mark.is-in{opacity:1;transform:none}

/* Travel card: slow push-in */
.pb-travel img{transition:transform 6s linear}
.pb-travel.is-in img{transform:scale(1.07)}

/* Buttons: a brass glint on hover */
.button-solid{position:relative;overflow:hidden;isolation:isolate}
.button-solid:after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:40%;z-index:-1;
  background:linear-gradient(100deg,rgba(255,236,200,0),rgba(255,236,200,.28),rgba(255,236,200,0));transform:translateX(-160%) skewX(-18deg)}
.button-solid:hover:after{transform:translateX(320%) skewX(-18deg);transition:transform .9s var(--mo-ease)}

/* Phone number underline draws on reveal */
.pb-call a{background:linear-gradient(var(--brass),var(--brass)) 0 100%/0 1px no-repeat;transition:background-size 1.2s var(--mo-ease) .6s,color .2s;padding-bottom:4px}
.pb-call.is-in a{background-size:100% 1px}

@media (max-width:900px){
  .pb-header.is-scrolled .nav{height:68px}
  .mo-presents img{width:64px}
}
@media (prefers-reduced-motion:reduce){
  .mo-curtain{display:none!important}
  .mo-js [data-mo],.mo-js .pb-press-logos>*,.mo-js .pb-hero .pb-eyebrow,.mo-js .pb-hero-row>*,.mo-js .pb-hero h1 .mo-line>*,.mo-js .pb-photo img,.mo-js .pb-photo .pb-badge,.mo-js .pb-act .pb-num,.mo-js .pb-quote .mark{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .mo-js .pb-press-logos>img{opacity:.78!important}
  .mo-js .pb-act:after{transform:scaleX(1)!important;transition:none!important}
  .mo-js .pb-quote blockquote .mo-word{opacity:1!important}
  .mo-motes{display:none}
  .pb-travel img,.pb-show img,.mo-reel,.pb-hero video{transition:none!important;transform:none!important}
}

/* Fix: give italic overhangs and descenders room so nothing gets clipped */
.mo-glint{padding:.06em .22em .28em .14em;margin:-.06em -.22em -.28em -.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pb-hero h1 .mo-line{padding:0 .2em .26em .12em;margin:0 -.2em -.26em -.12em}