/* 17 / 18 / 20: a branded colour curtain, followed by the existing first view. */
.opening-screen{display:none}
@media(prefers-reduced-motion:no-preference){
 body.with-opening{animation:none}
 html.opening-running,body.opening-running{overflow:hidden}
 html:has(body.with-opening){scrollbar-gutter:stable}
 .with-opening .opening-screen{
  display:block;position:fixed;inset:0;z-index:80;overflow:hidden;
  background:var(--paper);pointer-events:none;
  animation:opening-curtain 1.3s cubic-bezier(.65,0,.35,1) 3.4s both;
 }
 .opening-colour{
  position:absolute;inset:-12%;
  background:
   radial-gradient(ellipse at 92% 100%,#df6344 0%,#df634400 54%),
   radial-gradient(ellipse at 62% 92%,#e6be4ca6 0%,#e6be4c00 43%),
   linear-gradient(180deg,#f5f2e9 46%,#eee8dc 58%,#b9becf 76%,#406dce 100%);
  animation:opening-colour-rise 4.7s cubic-bezier(.3,0,.3,1) both;
 }
 .variant-18 .opening-colour{
  background:
   radial-gradient(ellipse at 83% 100%,#9ebec7 0%,#9ebec700 55%),
   linear-gradient(180deg,#f4f5ee 45%,#e6eeea 58%,#b5cbd1 76%,#496880 100%);
 }
 .opening-identity{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-start;padding:0 8%;transform:translateY(-3svh);
 }
 .opening-identity .opening-brand-svg{
  display:block;width:clamp(231px,25.2vw,315px);max-width:86vw;height:auto;
  animation:opening-logo-in 1.25s ease .3s both;
 }
 .opening-tagline{
  animation:opening-tagline-reveal 1s cubic-bezier(.25,.1,.25,1) 1.1s both;
 }
 .with-opening>main,.with-opening>.site-header,.with-opening>.site-footer{
  animation:opening-page-rise 1.3s cubic-bezier(.65,0,.35,1) 3.4s both;
 }
 .with-opening :is(.fv-type-line,.form-hero-copy>.form-label,.form-hero-bottom>a){animation-delay:4s}
 .with-opening .geometry-hero{animation-delay:4s}
 .with-opening .form-japanese{animation-delay:5.7s}
 .with-opening .form-hero-bottom>a::after{animation-delay:5.7s}
 .opening-skipped .opening-screen{display:none}
 .opening-skipped>main,.opening-skipped>.site-header,.opening-skipped>.site-footer,
 .opening-skipped :is(.fv-type-line,.form-hero-copy>.form-label,.form-hero-bottom>a,.geometry-hero,.form-japanese){animation:none!important}
}
@keyframes opening-colour-rise{
 from{transform:translate3d(0,14%,0);opacity:.15}
 45%{opacity:1}
 to{transform:translate3d(0,-2%,0);opacity:1}
}
@keyframes opening-logo-in{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
@keyframes opening-tagline-reveal{from{transform:translateY(12px)}to{transform:translateY(0)}}
@keyframes opening-curtain{from{transform:translate3d(0,0,0);visibility:visible}to{transform:translate3d(0,-100%,0);visibility:hidden}}
@keyframes opening-page-rise{from{transform:translate3d(0,100svh,0)}to{transform:none}}
@media(max-width:768px){
 .opening-identity{padding-inline:40px}
 .opening-identity .opening-brand-svg{width:min(60.9vw,252px)}
}