/*
 * Aquarium Zone scroll motion. Paired with /assets/js/az-motion.js, which tags
 * elements and adds .az-anim to <html>. Without that class (no JavaScript,
 * reduced motion) nothing here applies and every element stays visible.
 *
 * data-reveal="up"     fade and rise
 * data-reveal="tile"   rise while the photo inside settles from a zoom
 * data-reveal="photo"  wipe open from the bottom while the photo settles
 * data-lines           heading lines rise out of a mask, one after another
 * data-parallax        image drifts slower than the page (set on the <img>)
 */

html.az-anim [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.65,.3,1),transform .9s cubic-bezier(.2,.65,.3,1);transition-delay:var(--d,0s)}
html.az-anim [data-reveal].is-in{opacity:1;transform:none}

html.az-anim [data-reveal=tile]{transform:translateY(60px)}
html.az-anim [data-reveal=tile] img{transition:transform 1.2s cubic-bezier(.2,.65,.3,1),clip-path 1.2s cubic-bezier(.2,.65,.3,1)}
/* The inset crops the zoomed image back to its own footprint (1.14x - 6.14% per
   edge = 1x), so it can never spill over neighbouring text, clipped parent or not. */
html.az-anim [data-reveal=tile]:not(.is-in) img{transform:scale(1.14);clip-path:inset(6.14%)}
html.az-anim [data-reveal=tile].is-in:hover img{transition-duration:.6s}

html.az-anim [data-reveal=photo]{opacity:1;transform:none;clip-path:inset(18% 0 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
html.az-anim [data-reveal=photo].is-in{clip-path:inset(0 0 0 0)}
html.az-anim [data-reveal=photo] img{transform:scale(1.18);transition:transform 1.8s cubic-bezier(.2,.65,.3,1)}
html.az-anim [data-reveal=photo].is-in img{transform:scale(1)}
html.az-anim [data-reveal=photo] figcaption{opacity:0;transform:translateY(12px);transition:opacity .6s ease .9s,transform .6s ease .9s}
html.az-anim [data-reveal=photo].is-in figcaption{opacity:1;transform:none}

.az-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.az-line>span{display:block}
/* Line wrappers are structural only: never pick up a page's "h1 span" styling. */
.az-line,.az-line>span{color:inherit!important}
html.az-anim [data-lines] .az-line>span{transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.65,.3,1);transition-delay:calc(var(--i,0) * .09s + var(--d,0s))}
html.az-anim [data-lines].is-in .az-line>span{transform:none}

html.az-anim img[data-parallax]{transform:translate3d(0,var(--py,0px),0) scale(1.16);transition:none;will-change:transform}
/* Page hero entrance. A page opts in by adding .az-hero-wait to <html> in its
   <head> (so nothing flashes before it starts) and .is-hero-in to its first
   section once the hero photo has loaded. The photo develops from black and
   soft focus into full colour while settling from a zoom, then drifts slowly;
   the link, eyebrow, heading lines, copy, buttons and tags follow in order. */
html.az-hero-wait main > .hero > .backdrop{filter:brightness(0)}
html.az-hero-wait main > .hero.is-hero-in > .backdrop{animation:az-hero-zoom 2.8s cubic-bezier(.16,.7,.25,1) both,az-hero-develop 3.2s cubic-bezier(.35,.1,.25,1) both,az-hero-drift 26s ease-in-out 3.2s infinite alternate}
/* Zoom settles quickly; blur and colour clear gradually in one smooth step. */
@keyframes az-hero-zoom{from{transform:scale(1.25)}to{transform:scale(1)}}
/* Both ends list the same filter functions in the same order, so the browser can blend them smoothly. */
@keyframes az-hero-develop{from{filter:saturate(.4) contrast(1) brightness(0) blur(14px)}to{filter:saturate(1.22) contrast(1.06) brightness(1.04) blur(0)}}
@keyframes az-hero-drift{
  from{transform:scale(1)}
  to{transform:scale(1.07) translate3d(-1.5%,-1%,0)}
}
html.az-hero-wait main > .hero :is(.back-link, .eyebrow, .hero-bottom .copy, .hero-bottom .actions, .hero-facts li){opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.65,.3,1),transform .9s cubic-bezier(.2,.65,.3,1);transition-delay:var(--hd,0s)}
html.az-hero-wait main > .hero.is-hero-in :is(.back-link, .eyebrow, .hero-bottom .copy, .hero-bottom .actions, .hero-facts li){opacity:1;transform:none}
html.az-hero-wait main > .hero .back-link{--hd:.5s}
html.az-hero-wait main > .hero .eyebrow{--hd:.62s}
html.az-hero-wait main > .hero .hero-bottom .copy{--hd:1.15s}
html.az-hero-wait main > .hero .hero-bottom .actions{--hd:1.3s}
html.az-hero-wait main > .hero .hero-facts li{--hd:1.5s}
html.az-hero-wait main > .hero .hero-facts li:nth-child(2){--hd:1.6s}
html.az-hero-wait main > .hero .hero-facts li:nth-child(3){--hd:1.7s}
html.az-hero-wait main > .hero h1 .az-line>span{transform:translateY(110%);transition:transform 1.1s cubic-bezier(.2,.65,.3,1);transition-delay:calc(var(--i,0) * .16s + .75s)}
html.az-hero-wait main > .hero.is-hero-in h1 .az-line>span{transform:none}
html.az-hero-wait main > .hero .hero-facts{border-top-color:transparent;transition:border-color 1s ease 1.5s}
html.az-hero-wait main > .hero.is-hero-in .hero-facts{border-top-color:#ffffff50}
/* Homepage hero slider entrance (index.php). Same idea as the page hero above:
   html.az-hero-wait holds it, #home-landing-slider.is-hero-in plays it once. The
   photo ends at the active slide's own zoom (1.06) so nothing jumps afterwards. */
html.az-hero-wait body.az-editorial #home-landing-slider:not(.is-hero-in) .hero-media img{filter:brightness(0)}
html.az-hero-wait body.az-editorial #home-landing-slider .hero-media img[data-intro]{animation:az-home-zoom 2.8s cubic-bezier(.16,.7,.25,1) both,az-hero-develop 3.2s cubic-bezier(.35,.1,.25,1) both}
@keyframes az-home-zoom{from{transform:scale(1.3)}to{transform:scale(1.06)}}
html.az-hero-wait #home-landing-slider :is(.hero-description, .hero-actions, .hero-controls){opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.65,.3,1),transform .9s cubic-bezier(.2,.65,.3,1);transition-delay:var(--hd,0s)}
html.az-hero-wait #home-landing-slider.is-hero-in :is(.hero-description, .hero-actions, .hero-controls){opacity:1;transform:none}
html.az-hero-wait #home-landing-slider .hero-description{--hd:1.1s}
html.az-hero-wait #home-landing-slider .hero-actions{--hd:1.28s}
html.az-hero-wait #home-landing-slider .hero-controls{--hd:1.6s}
html.az-hero-wait #home-landing-slider .hero-title .az-line>span{transform:translateY(110%);transition:transform 1.1s cubic-bezier(.2,.65,.3,1);transition-delay:calc(var(--i,0) * .16s + .55s)}
html.az-hero-wait #home-landing-slider.is-hero-in .hero-title .az-line>span{transform:none}
/* The slider title is set very tight (line-height .91): give each masked line a little headroom so tall letters never clip. */
#home-landing-slider .hero-title .az-line{padding-top:.1em;margin-top:-.1em}