/* Page motion. Only active when <html> has .motion, which is skipped for "reduce motion" users. */

/* hero text that fades up (strapline, button) */
.motion [data-rv] { opacity: 0; transform: translate3d(0, 30px, 0); transition: opacity .9s cubic-bezier(.2,.65,.25,1), transform 1.1s cubic-bezier(.2,.65,.25,1); transition-delay: var(--d, 0s); }
.motion .in [data-rv] { opacity: 1; transform: none; }

/* photos below the hero: a soft fade that washes down from the top edge, a whole row at a time */
.motion [data-rv-img] img {
  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 60%); mask-image: linear-gradient(to bottom, #000 40%, transparent 60%);
  -webkit-mask-size: 100% 250%; mask-size: 100% 250%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  opacity: .2; transform: scale(1.03);
  transition: -webkit-mask-position 1.5s cubic-bezier(.45,.05,.25,1), mask-position 1.5s cubic-bezier(.45,.05,.25,1), opacity 1.2s ease, transform 1.8s cubic-bezier(.2,.65,.25,1);
}
.motion [data-rv-img].in img { -webkit-mask-position: 0 0; mask-position: 0 0; opacity: 1; transform: scale(1); }

/* heading lines rising out of a mask (used when the word effect is off) */
.rv-line { display: block; overflow: hidden; padding-bottom: .06em; }
.rv-line > span { display: inline-block; }
.motion .rv-line > span { transform: translate3d(0, 110%, 0); transition: transform 1.1s cubic-bezier(.2,.75,.2,1); transition-delay: var(--d, 0s); }
.motion .in .rv-line > span { transform: none; }

/* 2. heading words come into focus one at a time; the last word gets an underline drawn in */
.rv-word { display: inline-block; }
.motion .rv-word { opacity: 0; filter: blur(10px); transform: translate3d(0, .35em, 0); transition: opacity .8s ease, filter .9s ease, transform 1s cubic-bezier(.2,.75,.2,1); transition-delay: var(--d, 0s); }
.motion .in .rv-word { opacity: 1; filter: blur(0); transform: none; }
.rv-word-last { position: relative; }
.motion .rv-word-last::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.04em; height: .07em; background: #84c556; transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.77,0,.18,1); transition-delay: calc(var(--d, 0s) + .55s); }
.motion .in .rv-word-last::after { transform: scaleX(1); }

/* hero photos on their own layers: slow zoom-out, scroll parallax and mouse-follow */
.rv-hero, .rv-hero-layer { position: relative; overflow: hidden; isolation: isolate; }
.rv-hero-bg { position: absolute; inset: -8% -3%; z-index: -1; background-size: cover; background-position: center; will-change: transform; }
.motion .rv-hero-bg { transform: scale(1.14); transition: transform 2.6s cubic-bezier(.2,.65,.25,1); }
.motion .rv-hero.in .rv-hero-bg { transform: scale(1) translate3d(var(--mx, 0px), calc(var(--py, 0px) + var(--my, 0px)), 0); }
.motion .rv-hero.in.settled .rv-hero-bg { transition: transform .7s cubic-bezier(.2,.65,.25,1); }

/* floating "Get in touch" pill, appears once you scroll past the hero */
.rv-pill { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 40px; background: #fff; color: #333; font: 700 12px/1 Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; box-shadow: 0 8px 28px rgba(0,0,0,.16); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s, transform .5s, background .25s, color .25s; }
.rv-pill.show { opacity: 1; transform: none; pointer-events: auto; }
.rv-pill:hover { background: #84c556; color: #fff; }
.rv-pill svg { width: 12px; height: 12px; }
@media (max-width: 600px) { .rv-pill { right: 14px; bottom: 14px; padding: 12px 16px; } }

/* until the script has set things up, keep the page heading hidden so it doesn't flash before animating
   (falls back to visible after 2.5s in case the script never runs) */
@keyframes rvSafe { to { opacity: 1; } }
.motion:not(.rv-ready) main h1 { opacity: 0; animation: rvSafe .3s 2.5s forwards; }

/* gallery: keep its own hover zoom on top of the fade-in */
.motion .pig .pig-item:hover img { transform: scale(1.06); }

/* BTL cards: keep their hover zoom on top of the fade-in */
.motion .btl-card:hover [data-rv-img].in img { transform: scale(1.05); }