/* AURVO motion layer. Compositor properties (transform, opacity, scale, translate) wherever the motion is continuous;
   the film-edge wipe animates one clip-path on one element for about a second. The page is complete without this file. */
:root{--au-ease:cubic-bezier(.16,1,.3,1)}

body::before{content:'';position:fixed;inset:0;z-index:55;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .95  0 0 0 0 .85  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- hero: the bay powers up ---------- */
.js .hero h1:not(.words-ready){visibility:hidden;animation:h1-failsafe 0s 2.5s forwards}
@keyframes h1-failsafe{to{visibility:visible}}
.beam{animation:beam-on 2.4s ease .1s backwards}
.b2{animation-delay:.3s}.b3{animation-delay:.5s}
@keyframes beam-on{from{opacity:0}}
.floor::before{transform-origin:50% 50%;animation:floor-draw 2.2s var(--au-ease) .5s backwards}
@keyframes floor-draw{from{transform:scaleX(0)}}
.floor{animation:fade-in 2s ease .7s backwards}
@keyframes fade-in{from{opacity:0}}
.hero-word>span{animation:word-in 2.6s var(--au-ease) .15s backwards}
@keyframes word-in{from{opacity:0;transform:translate3d(0,7%,0)}}
.car-rig{animation:car-in 2.4s var(--au-ease) .25s backwards}
@keyframes car-in{from{opacity:0;transform:translate3d(-9vw,0,0)}}
.car-reflect{animation:refl-in 1.8s ease 1.3s backwards}
@keyframes refl-in{from{opacity:0}}
.car-veil{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none;-webkit-mask:url(assets/rs7-cutout.webp) 0 0/100% 100% no-repeat;mask:url(assets/rs7-cutout.webp) 0 0/100% 100% no-repeat}
.car-veil i{position:absolute;top:-6%;bottom:-6%;left:0;width:150%;transform:translate3d(-12%,0,0) skewX(-16deg);animation:veil-peel 2.8s cubic-bezier(.66,0,.2,1) .7s forwards;background:linear-gradient(90deg,rgba(255,255,255,.96) 0,rgba(255,255,255,.96) 3px,rgba(255,236,190,.42) 3px,rgba(255,236,190,0) 78px),linear-gradient(90deg,rgba(226,234,240,.52),rgba(226,234,240,.62))}
@keyframes veil-peel{to{transform:translate3d(100%,0,0) skewX(-16deg)}}
.car-led{animation:led-on 3.2s ease 1.9s backwards}
@keyframes led-on{from{opacity:0}}
.hero-meta{animation:fade-rise 1.2s var(--au-ease) .9s backwards}
.hero-eyebrow{animation:fade-rise 1.2s var(--au-ease) 1.05s backwards}
.hero-dock{animation:fade-rise 1.3s var(--au-ease) 1.35s backwards}
.hero-vehicle figcaption{animation:fade-in 1.6s ease 1.6s backwards}
@keyframes fade-rise{from{opacity:0;transform:translate3d(0,22px,0)}}
.cue-line i{animation:cue 2.8s var(--au-ease) infinite}
@keyframes cue{from{transform:translateY(-14px)}to{transform:translateY(34px)}}
.is-paused .cue-line i,.is-paused .chip,.is-paused .ripple,.is-paused .lp-glint,.is-paused .car-marker::before{animation-play-state:paused}

/* a band of light passes over the car; it is clipped to the car by its alpha */
.hero-car .sheen{position:absolute;z-index:3;inset:0;overflow:hidden;pointer-events:none;opacity:.9;-webkit-mask:url(assets/rs7-cutout.webp) 0 0/100% 100% no-repeat;mask:url(assets/rs7-cutout.webp) 0 0/100% 100% no-repeat}
.hero.is-passing .sheen i{will-change:transform}
.hero-car .sheen i{position:absolute;left:0;top:-14%;bottom:-14%;width:190px;transform:translate3d(-400px,0,0) skewX(-16deg);background:linear-gradient(90deg,transparent 0,rgba(255,240,210,0) 12%,rgba(255,244,222,.14) 38%,rgba(255,251,238,.72) 50%,rgba(255,244,222,.14) 62%,rgba(255,240,210,0) 88%,transparent 100%)}
.motes{position:absolute;z-index:3;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.protection-stage .motes{z-index:0}

/* ---------- masked words ---------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:.26em .04em .26em;margin:-.26em -.04em -.26em}
.wi{display:inline-block}

/* ---------- reveals: set up by script only for elements that start below the fold ---------- */
.rv.is-pending{opacity:0;transform:translate3d(0,34px,0)}
.rv.is-in{opacity:1;transform:none;transition:opacity 1s var(--au-ease) var(--cd,0s),transform 1.2s var(--au-ease) var(--cd,0s)}

/* ---------- the film edge: a clip slanted at 16 degrees and a bright line that rides on it ---------- */
.wipe-edge{position:absolute;z-index:4;inset:0;overflow:hidden;pointer-events:none;opacity:0}
.wipe-edge i{position:absolute;top:0;bottom:0;left:0;width:100%;border-left:2px solid #fff6dc;box-shadow:-18px 0 44px -8px rgba(255,236,190,.6);transform-origin:0 0;transform:translate3d(var(--t,-10%),0,0) skewX(-16deg);will-change:transform}
.is-wiping>.wipe-edge{opacity:1}
.project-photo.is-wiping{clip-path:polygon(0 0,var(--t) 0,calc(var(--t) - var(--c)) 100%,0 100%)}
.service-visual.is-wiping .service-shot.is-incoming{z-index:2;opacity:1;clip-path:polygon(0 0,var(--t) 0,calc(var(--t) - var(--c)) 100%,0 100%)}

/* ---------- selector ---------- */
.service-tabs button>span{transition:transform .6s var(--au-ease)}
.service-tabs button:hover>span{transform:translate3d(6px,0,0)}
.service-visual-shade{transition:opacity .6s}

/* ---------- lens over the photographs ---------- */
.lens.is-on{opacity:1;scale:1;transition:opacity .35s,scale .6s var(--au-ease)}
.lens{transition:opacity .35s,scale .5s var(--au-ease)}
.lens img,.lens{will-change:transform}

/* ---------- protection scene ---------- */
.car-marker::before{content:'';position:absolute;inset:-1px;border-radius:50%;border:1px solid #fff;animation:marker-ping 3s var(--au-ease) infinite}
@keyframes marker-ping{from{transform:scale(1);opacity:.8}to{transform:scale(3.2);opacity:0}}
.lp-film-control{will-change:transform}
.chip{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:chip-fall 4.4s cubic-bezier(.5,0,.9,.6) var(--d) infinite}
@keyframes chip-fall{0%{transform:translate(0,-118px);opacity:0}8%{opacity:1}34%{transform:translate(var(--dx),0);opacity:1}40%{transform:translate(calc(var(--dx) * 1.7),-10px) scale(.5);opacity:0}100%{transform:translate(calc(var(--dx) * 1.7),-10px) scale(.5);opacity:0}}
.ripple{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:ripple 4.4s ease-out var(--d) infinite}
@keyframes ripple{0%,33%{opacity:0;transform:scale(.3)}35%{opacity:.9;transform:scale(.4)}56%{opacity:0;transform:scale(3.4)}100%{opacity:0;transform:scale(3.4)}}
.lp-glint{animation:glint 5.2s ease-in-out infinite}
@keyframes glint{from{transform:translateX(0) skewX(-20deg)}60%,to{transform:translateX(640px) skewX(-20deg)}}

/* ---------- cinematic bars ---------- */
.letterbox{position:absolute;z-index:3;left:0;right:0;height:15%;pointer-events:none;background:#090a07;will-change:transform}
.letterbox.top{top:0;transform-origin:50% 0}
.letterbox.bottom{bottom:0;transform-origin:50% 100%}

/* ---------- lamp that follows the pointer (fine pointers only) ---------- */
.au-lamp{position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;z-index:50;pointer-events:none;opacity:0;transition:opacity .6s;background:radial-gradient(circle,rgba(232,212,160,.15),rgba(232,212,160,.05) 38%,transparent 68%)}
.au-lamp.is-on{opacity:1}
.au-lamp.is-paper{opacity:0}

/* ---------- footer wordmark ---------- */
.footer-word span{transition:transform 1.6s var(--au-ease)}
.footer-word.is-in span{transform:none}

/* Embedded as a live preview (portfolio showreel): small, inert and sharing the main thread with its host. */
html.zp-embedded body::before,html.zp-embedded .au-lamp,html.zp-embedded .motes,html.zp-embedded .sheen{display:none!important}
html.zp-embedded .hero-word>span,html.zp-embedded .car-rig,html.zp-embedded .floor,html.zp-embedded .floor::before,html.zp-embedded .car-reflect,html.zp-embedded .car-veil i,html.zp-embedded .hero-meta,html.zp-embedded .hero-eyebrow,html.zp-embedded .hero-dock,html.zp-embedded .hero-vehicle figcaption{animation-duration:.01s!important;animation-delay:0s!important}
html.zp-embedded .cue-line i,html.zp-embedded .chip,html.zp-embedded .ripple,html.zp-embedded .lp-glint,html.zp-embedded .car-marker::before{animation:none!important}

@media(max-width:900px),(hover:none){.au-lamp{display:none}}
/* Phones use the smaller cut-out for the light masks as well. */
@media(max-width:700px){.hero-car .sheen,.car-veil,.pv-film{-webkit-mask-image:url(assets/rs7-cutout-small.webp);mask-image:url(assets/rs7-cutout-small.webp)}}