/* The opening (the top page, once a visit; Intro.astro, site.js): the logo draws itself — the sun comes up, the line art
   is drawn stroke by stroke (each stroke a mask over the logo's own traced lines), the name writes in. White steam then
   rises from the logo's own steam lines, the screen slowly turns white and hazy, and as the haze clears the site appears.
   Shown only while <html> has .intro-on (set in the page head when it should play). */

.intro { display: none; }
html.intro-on { overflow: hidden; }
html.intro-on .intro { display: block; visibility: visible; }
/* nothing of the page paints before the cover does; the page shows again under the white haze */
html.intro-on body { animation: intro-page-show 0s linear 3.3s both; }
@keyframes intro-page-show { from { visibility: hidden; } to { visibility: visible; } }
html.intro-on.intro-skip body { animation: none; visibility: visible; }

.intro__cover { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #fbf3e8;
  animation: intro-fade .5s linear 3.4s both; }
.intro__logo { display: block; width: 280px; height: 280px; overflow: visible;
  animation: intro-soften 1.7s cubic-bezier(.45, 0, .55, 1) 2.2s both; }
@media (max-width: 639px) { .intro__logo { width: 220px; height: 220px; } }
@keyframes intro-soften { to { filter: blur(8px); opacity: .35; transform: translateY(-6px) scale(1.02); } }

.intro__sun { transform-box: fill-box; transform-origin: center; animation: intro-pop .8s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
@keyframes intro-pop { from { transform: scale(0); } to { transform: none; } }
/* the strokes that uncover the line art, in drawing order */
.intro__pen { fill: none; stroke: #fff; stroke-width: 18; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: intro-draw var(--t, .4s) cubic-bezier(.45, .05, .35, 1) var(--d) both; }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
/* the name writes in from the left */
.intro__wipe { transform-box: fill-box; transform-origin: left center; animation: intro-wipe .7s cubic-bezier(.16, 1, .3, 1) 1.75s both; }
@keyframes intro-wipe { from { transform: scaleX(0); } to { transform: none; } }
/* wisps: thick soft white strokes rising out of the logo's three steam lines */
.intro__wisp { fill: none; stroke: #fff; stroke-width: 13; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: url(#intro-soft);
  animation: intro-draw 1.7s cubic-bezier(.4, .2, .3, 1) var(--d) both, intro-wisp 2.2s cubic-bezier(.4, .2, .3, 1) var(--d) both; }
@keyframes intro-wisp { from { transform: translateY(8px); opacity: .9; } to { transform: translateY(-28px); opacity: .8; } }

/* steam: soft white puffs swelling out of the logo's steam lines, slowly, one after another */
.intro__steam { position: fixed; inset: 0; z-index: 101; pointer-events: none; overflow: hidden; filter: url(#intro-ragged);
  animation: intro-fade 1.2s cubic-bezier(.45, 0, .55, 1) 3.9s both; }
.intro__puff { position: absolute; left: calc(50% + 36px + var(--x)); top: calc(50% + 62px); width: var(--s); height: var(--s);
  border-radius: 58% 42% 55% 45% / 46% 58% 42% 54%; filter: blur(18px);
  background: radial-gradient(closest-side, #fff 0%, rgb(255 255 255 / .92) 40%, rgb(255 255 255 / .55) 66%, rgb(222 204 180 / .28) 84%, rgb(222 204 180 / 0));
  animation: intro-puff var(--t, 2.8s) cubic-bezier(.45, 0, .55, 1) var(--d) both; }
@media (max-width: 639px) { .intro__puff { left: calc(50% + 29px + var(--x)); top: calc(50% + 48px); } }
@keyframes intro-puff {
  from { transform: translate(-50%, -50%) scale(.45) rotate(0deg); opacity: 0; }
  55% { opacity: .7; }
  to { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(var(--k)) rotate(var(--r)); opacity: .8; }
}
/* the haze over everything: it whitens and blurs slowly, rests, and clears onto the site */
.intro__mist { position: fixed; inset: 0; z-index: 102; pointer-events: auto; animation: intro-mist 3s linear 2.15s both; }
@keyframes intro-mist {
  0% { background-color: rgb(255 255 255 / 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
    animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
  52% { background-color: rgb(255 255 255 / .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  58% { background-color: rgb(255 255 255 / .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    animation-timing-function: cubic-bezier(.5, 0, .5, 1); }
  100% { background-color: rgb(255 255 255 / 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); }
}
@keyframes intro-fade { to { opacity: 0; } }

/* the page is slow: the haze waits, white, until it has loaded (site.js) */
.intro.is-hold, .intro.is-hold * { animation-play-state: paused !important; }
/* skipped (a tap, a scroll, a key): everything fades at once */
.intro.is-skip { animation: intro-fade .45s ease both; }
.intro.is-skip * { animation-play-state: paused !important; }

/* the hero's sun rises as the haze clears, not hidden under it */
@media (prefers-reduced-motion: no-preference) {
  html.has-intro .hero-orb__sun .sun__disc { animation-delay: 4.25s; }
  html.has-intro .hero-orb__ring .sun__ring { animation-delay: 4.65s; }
}