/* The pingato.com intro: a 4s cinematic over the finished front page,
   which is the theme's ordinary template (layout.php). Loaded only on the
   front page; intro.php adds the layers and the head check, intro.js docks
   the mark onto the page's own .brand and removes the layers.

   html.intro-on  the intro is playing (set in <head> unless it is skipped)
   html.intro-done  the effects are over: the page fades in under the big mark */

.intro-overlay {
  display: none;
}

.intro-on .intro-overlay {
  display: block;
}

/* The page waits under the intro: its mark appears when the intro's mark
   lands on it, everything else fades in once the effects are over. */
.intro-on .brand,
.intro-on .menu-toggle {
  visibility: hidden;
}

.intro-on main,
.intro-on .license-note {
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.intro-on.intro-done main,
.intro-on.intro-done .license-note {
  opacity: 1;
}

/* Intro, 4s from load:
     0.00-0.25  black, film grain only
     0.25-0.70  a red dot sparks, snaps to a slit, opens to full almond
     0.70-0.98  a slow blink: the eyes close and reopen
     0.25-2.80  the camera creeps in (94% to 100%), speeding up
     0.98-2.55  the cat surfaces behind the eyes; the glow beats twice
     2.00-2.55  the glow dies and the eyes go out: hollow sockets
     2.70-2.82  lightning: a first strike, a flicker, the main strike
     2.80-3.10  the logo slams in, the frame shakes
     3.15-3.75  a gleam sweeps across the logo
     2.82-4.00  the cat decays to 6% behind the logo; grain clears */
.intro-stage {
  position: fixed;
  inset: 0;
  animation: camera 3.1s linear 0s forwards;
}

.intro-eyes {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: unsafe center;
  place-content: unsafe center;
  pointer-events: none;
  opacity: 0;
  animation:
    eyes-in 0.1s linear 0.25s forwards,
    eyes-out 0.35s ease-in 2.2s forwards;
}

.intro-eyes svg {
  width: min(57.6vw, 736px);
  aspect-ratio: 3048 / 3253;
  overflow: visible;
}

.eye {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.12, 0.04);
  animation: open-eye 0.73s linear 0.25s forwards;
}

.eye-fill {
  fill: #b30012;
}

.eye-glow {
  fill: #ff2a30;
  filter: url(#blood-glow);
  opacity: 0;
  animation:
    glow-in 0.45s ease-out 0.25s forwards,
    heartbeat 0.5s ease-in-out 1.3s,
    glow-out 0.55s ease-in 2s forwards;
}

.intro-gato,
.intro-type {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: unsafe center;
  place-content: unsafe center;
  margin: 0;
  pointer-events: none;
  opacity: 0;
}

.intro-gato {
  z-index: 1;
  animation: show-gato 4s linear forwards;
}

.intro-gato span {
  display: block;
  width: min(57.6vw, 736px);
  aspect-ratio: 3048 / 3253;
  background: #d0efff;
  animation: strike-gato 4s linear forwards;
  -webkit-mask: url("/images/pingato_gato.svg") center / contain no-repeat;
  mask: url("/images/pingato_gato.svg") center / contain no-repeat;
}

/* Sheet lightning across the whole frame. */
.intro-flash {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    120% 90% at 50% 35%,
    #eaf6ff 0%,
    #7fb8ff 45%,
    #10203a 100%
  );
  animation: sheet-lightning 4s linear forwards;
}

.intro-type {
  z-index: 4;
  animation: slam 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) 2.8s forwards;
}

.intro-type span {
  display: block;
  width: min(72vw, 920px);
  aspect-ratio: 4012 / 429;
  background: linear-gradient(
      105deg,
      #00b0ff 0% 42%,
      #e6f7ff 50%,
      #00b0ff 58% 100%
    )
    100% 0 / 250% 100%;
  animation: gleam 0.6s ease-in-out 3.15s forwards;
  -webkit-mask: url("/images/pingato_type.svg") center / contain no-repeat;
  mask: url("/images/pingato_type.svg") center / contain no-repeat;
}

.intro-grain {
  position: fixed;
  inset: -50%;
  z-index: 5;
  pointer-events: none;
  opacity: 0.07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:
    grain-jitter 0.4s steps(1) 10,
    grain-out 0.8s ease-out 3.2s forwards;
}

/* Dock: after 5s idle or a scroll, the cat and wordmark slide onto the
   page's own mark (.brand) and hand over to it. Transforms are set by
   intro.js. */
.intro-gato span,
.intro-type span {
  transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

.intro-gato.docked {
  transition: opacity 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Creep in, accelerating into the strike at 2.8s (90.323%), then a
   decaying shake that settles by 3.1s. */
@keyframes camera {
  0%,
  8.065% {
    transform: scale(0.94);
    animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6);
  }
  90.323% {
    transform: scale(1);
    animation-timing-function: linear;
  }
  91.935% {
    transform: translate(-7px, 4px);
  }
  93.548% {
    transform: translate(6px, -5px);
  }
  95.161% {
    transform: translate(-4px, -2px);
  }
  96.774% {
    transform: translate(3px, 3px);
  }
  98.387% {
    transform: translate(-1px, 1px);
  }
  100% {
    transform: none;
  }
}

@keyframes eyes-in {
  to {
    opacity: 1;
  }
}

@keyframes eyes-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* From 0.25s: snap to a slit by 0.4s (20.548%), open to the full
   almond by 0.7s (61.644%), blink shut at 0.86s (83.562%), reopen by
   0.98s. The full almond fills the cat's eye openings. */
@keyframes open-eye {
  0% {
    transform: scale(0.12, 0.04);
    animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1);
  }
  20.548% {
    transform: scale(0.22, 1);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  61.644% {
    transform: scale(1, 1);
    animation-timing-function: ease-in;
  }
  83.562% {
    transform: scale(1, 0.06);
    animation-timing-function: ease-out;
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes glow-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Two beats: lub-dub. */
@keyframes heartbeat {
  0%,
  100% {
    opacity: 1;
  }
  20% {
    opacity: 0.45;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0.45;
  }
}

@keyframes glow-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* 4s from load. Hidden until the blink ends (0.98s, 24.5%), surfaces
   to 24% by 2.55s (63.75%) and holds. Lightning: first strike 2.7s
   (67.5%), flicker to 30% at 2.74s (68.5%), main strike 2.8s (70%),
   then decays to 6% by 4s. */
@keyframes show-gato {
  0%,
  24.5% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
  63.75% {
    opacity: 0.24;
    animation-timing-function: step-end;
  }
  67.5% {
    opacity: 1;
    animation-timing-function: step-end;
  }
  68.5% {
    opacity: 0.3;
    animation-timing-function: step-end;
  }
  70% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.15, 0.7, 0.3, 1);
  }
  100% {
    opacity: 0.06;
  }
}

/* Solid white through the lightning, back to its color one frame after
   the main strike (2.817s, 70.425%). */
@keyframes strike-gato {
  0% {
    background-color: #d0efff;
    animation-timing-function: step-end;
  }
  67.5% {
    background-color: #fff;
    animation-timing-function: step-end;
  }
  70.425%,
  100% {
    background-color: #d0efff;
  }
}

@keyframes sheet-lightning {
  0% {
    opacity: 0;
    animation-timing-function: step-end;
  }
  67.5% {
    opacity: 0.22;
    animation-timing-function: step-end;
  }
  68.5% {
    opacity: 0.04;
    animation-timing-function: step-end;
  }
  70% {
    opacity: 0.4;
    animation-timing-function: cubic-bezier(0.1, 0.6, 0.3, 1);
  }
  80%,
  100% {
    opacity: 0;
  }
}

@keyframes slam {
  0% {
    opacity: 0;
    transform: scale(1.18);
    filter: blur(10px);
  }
  40% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes gleam {
  to {
    background-position: 0% 0;
  }
}

@keyframes grain-jitter {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-7%, 4%);
  }
  50% {
    transform: translate(5%, -6%);
  }
  75% {
    transform: translate(-3%, -8%);
  }
}

@keyframes grain-out {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-eyes,
  .intro-flash,
  .intro-grain {
    display: none;
  }

  .intro-stage,
  .intro-gato,
  .intro-gato span,
  .intro-type,
  .intro-type span {
    animation: none;
  }

  .intro-gato {
    opacity: 0.06;
  }

  .intro-type {
    opacity: 1;
  }

  .intro-type span {
    background-position: 0% 0;
  }

  .intro-gato span,
  .intro-type span,
  .intro-gato.docked {
    transition: none;
  }
}