/* The opening screen on the home page (intro.js, intro-ribbon.js).

   A black screen with only the logo. The logo waits unseen while a gold ribbon sweeps in
   and coils into its shape; then the logo itself takes the ribbon's place (.intro-formed)
   and flies to the navigation as the screen fades. Without the script the screen fades by
   itself from 1.4 s, and a browser with scripts switched off shows the logo standing still. It
   plays on every visit to the home page; a visitor who asked for less motion never sees
   it: brand.css stops every animation under reduced motion, and a screen that cannot fade
   must not appear. */
.intro { position:fixed; inset:0; z-index:40; display:grid; place-items:center; overflow:hidden; background:#000; animation:intro-out .5s cubic-bezier(.4,0,.2,1) 1.4s forwards; }
.intro.intro-live { animation:none; }
@media (prefers-reduced-motion:reduce) { .intro { display:none; } }
/* The ribbon's canvas fills the screen and gives way to the logo once it has coiled up. */
.intro canvas { position:absolute; inset:0; width:100%; height:100%; transition:opacity .28s ease; }
.intro-live.intro-formed canvas { opacity:0; }
/* A vignette, then a fine film grain drawn by the browser from a small noise filter. */
.intro::before { content:''; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse 80% 75% at 50% 50%,transparent 55%,#000000a0 100%); }
.intro::after { content:''; position:absolute; inset:-60%; z-index:3; pointer-events:none; opacity:.06; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); animation:intro-grain .42s steps(3) infinite; }
/* The logo, the gold roll alone (logo-large.png), in the middle of the screen. intro-ribbon.js
   coils the ribbon into exactly this box, so its size is set here and nowhere else. */
/* Unseen until the ribbon has formed it, so it never shows for a moment before the script
   starts. Only a browser that runs no scripts at all shows it from the start. */
.intro-logo { position:relative; z-index:1; width:clamp(132px,24vmin,220px); height:auto; aspect-ratio:1; opacity:0; transition:opacity .28s ease; }
@media (scripting:none) { .intro-logo { opacity:1; } }
/* As the ribbon closes, the logo appears with one soft breath of gold light around it,
   and lands: drawn in a little, then just past its size, then still, in under 0.3 s. */
.intro-formed .intro-logo { opacity:1; animation:intro-breath .7s ease-out; }
/* The crown (the owner, October 2): as the logo closes, two rings of soft gold light run
   out from it once, as rings run out from a drop falling into still water, and are gone
   before the screen has faded. They never stay: a ring standing round the logo is a look
   he set aside. intro.js adds the element when the logo forms. */
.intro-crown { position:absolute; left:50%; top:50%; z-index:1; width:clamp(132px,24vmin,220px); aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none; }
.intro-crown::before,.intro-crown::after { content:''; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 1.5px #f5d47dcc,0 0 14px 3px #f5d47d66,inset 0 0 10px 1px #f5d47d40; opacity:0; animation:intro-crown .9s cubic-bezier(.15,.7,.3,1) forwards; }
.intro-crown::after { animation:intro-crown-second .8s cubic-bezier(.15,.7,.3,1) .14s forwards; }
/* The copy that flies to the navigation (intro.js); it never catches a click. */
.intro-flight { position:fixed; z-index:41; left:0; top:0; margin:0; pointer-events:none; transform-origin:0 0; will-change:transform; }
/* The navigation's own logo waits until the flying one has landed on it. */
.intro-playing .nav-brand .brand-mark { visibility:hidden; }
/* While the logo is on screen the first screen waits, and rises into place as the logo
   flies to the navigation (intro.js puts .intro-veiled on the hero and takes it away). */
.hero.intro-veiled > * { opacity:0; transform:translateY(24px); }
.hero > * { transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
.hero > :nth-child(2) { transition-delay:.05s; }
.hero > :nth-child(3) { transition-delay:.1s; }
.hero > :nth-child(4) { transition-delay:.15s; }
.hero > :nth-child(5) { transition-delay:.22s; }
.hero > :nth-child(6) { transition-delay:.3s; }
@keyframes intro-out { to { opacity:0; visibility:hidden; } }
@keyframes intro-crown { 0% { transform:scale(.96); opacity:0; } 12% { opacity:.95; } 100% { transform:scale(2.6); opacity:0; } }
@keyframes intro-crown-second { 0% { transform:scale(.96); opacity:0; } 15% { opacity:.7; } 100% { transform:scale(2); opacity:0; } }
@keyframes intro-breath { 0% { filter:drop-shadow(0 0 0 #f5d47d00); } 35% { filter:drop-shadow(0 0 26px #f5d47d99); } 100% { filter:drop-shadow(0 0 0 #f5d47d00); } }
@keyframes intro-grain { 0% { transform:translate(0,0); } 33% { transform:translate(-4%,3%); } 66% { transform:translate(3%,-5%); } 100% { transform:translate(-2%,2%); } }