/* The animated Cramurai logo, shared by every page that shows the big logo.
   He floats, the star twinkles, and a page of his book turns every 5 seconds.
   Use it like this (the picture path depends on where the page is):
   <span class="alogo"><span class="floaty"><img src="assets/CramuraiLogo-site.png" alt="Cramurai"><i class="pagemask"><i class="pageglow"><i class="page p1"></i><i class="page p2"></i><i class="page p3"></i></i></i><i class="star"></i></span></span>
   Set the size with --logo-w on .alogo. */
  .alogo { display: inline-block; padding: 12px; }
  .alogo img {
    display: block; width: var(--logo-w, 200px); height: auto;
    filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px rgba(255,255,255,0.45));
  }
  .floaty { display: block; position: relative; animation: bob 4s ease-in-out 0.7s infinite, sway 8s 1.7s infinite, tiltin 2s ease-in-out 0.7s 1, tilt 4s ease-in-out 2.7s infinite; }
  @keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
  /* always flowing: the up-and-down, the lean and the drift each peak at a different moment,
     so the logo is never fully still. The drift is widest while he floats down. */
  @keyframes sway {
    0% { transform: translateX(0); animation-timing-function: ease-out; }
    25% { transform: translateX(2px); animation-timing-function: ease-in-out; }
    75% { transform: translateX(-2px); animation-timing-function: ease-in; }
    100% { transform: translateX(0); }
  }
  /* lean: right at the top of the float, left at the bottom, so every trip down shows both.
     tiltin eases into it from standing straight when the page loads. */
  @keyframes tiltin { from { rotate: 0deg; } to { rotate: 1deg; } }
  @keyframes tilt { 0%, 100% { rotate: 1deg; } 50% { rotate: -1deg; } }
  @keyframes flip1 {
    0%, 76% { opacity: 0; transform: rotateX(55deg) rotateY(0deg) scaleY(1.743); }
    77% { opacity: 1; transform: rotateX(55deg) rotateY(0deg) scaleY(1.743); animation-timing-function: ease-in; }
    87% { opacity: 1; transform: rotateX(55deg) rotateY(-100deg) scaleY(1.743); animation-timing-function: linear; }
    94% { opacity: 1; transform: rotateX(55deg) rotateY(-155deg) scaleY(1.743); animation-timing-function: ease-out; }
    99% { opacity: 1; transform: rotateX(55deg) rotateY(-180deg) scaleY(1.743); }
    100% { opacity: 0; transform: rotateX(55deg) rotateY(-180deg) scaleY(1.743); }
  }
  @keyframes flip2 {
    0%, 76% { opacity: 0; transform: rotateX(55deg) rotateY(0deg) translateX(7.93%) rotateY(0deg) translateX(-7.93%) scaleY(1.743); }
    77% { opacity: 1; transform: rotateX(55deg) rotateY(0deg) translateX(7.93%) rotateY(0deg) translateX(-7.93%) scaleY(1.743); animation-timing-function: ease-in; }
    87% { opacity: 1; transform: rotateX(55deg) rotateY(-100deg) translateX(7.93%) rotateY(40deg) translateX(-7.93%) scaleY(1.743); animation-timing-function: linear; }
    94% { opacity: 1; transform: rotateX(55deg) rotateY(-155deg) translateX(7.93%) rotateY(38deg) translateX(-7.93%) scaleY(1.743); animation-timing-function: ease-out; }
    99% { opacity: 1; transform: rotateX(55deg) rotateY(-180deg) translateX(7.93%) rotateY(0deg) translateX(-7.93%) scaleY(1.743); }
    100% { opacity: 0; transform: rotateX(55deg) rotateY(-180deg) translateX(7.93%) rotateY(0deg) translateX(-7.93%) scaleY(1.743); }
  }
  @keyframes flip3 {
    0%, 76% { opacity: 0; transform: rotateX(55deg) rotateY(0deg) translateX(7.93%) rotateY(0deg) translateX(7.93%) rotateY(0deg) translateX(-15.86%) scaleY(1.743); }
    77% { opacity: 1; transform: rotateX(55deg) rotateY(0deg) translateX(7.93%) rotateY(0deg) translateX(7.93%) rotateY(0deg) translateX(-15.86%) scaleY(1.743); animation-timing-function: ease-in; }
    87% { opacity: 1; transform: rotateX(55deg) rotateY(-100deg) translateX(7.93%) rotateY(40deg) translateX(7.93%) rotateY(40deg) translateX(-15.86%) scaleY(1.743); animation-timing-function: linear; }
    94% { opacity: 1; transform: rotateX(55deg) rotateY(-155deg) translateX(7.93%) rotateY(38deg) translateX(7.93%) rotateY(38deg) translateX(-15.86%) scaleY(1.743); animation-timing-function: ease-out; }
    99% { opacity: 1; transform: rotateX(55deg) rotateY(-180deg) translateX(7.93%) rotateY(0deg) translateX(7.93%) rotateY(0deg) translateX(-15.86%) scaleY(1.743); }
    100% { opacity: 0; transform: rotateX(55deg) rotateY(-180deg) translateX(7.93%) rotateY(0deg) translateX(7.93%) rotateY(0deg) translateX(-15.86%) scaleY(1.743); }
  }
  .pagemask, .pageglow, .page { position: absolute; inset: 0; display: block; }
  .pagemask { clip-path: polygon(0 0, 100% 0, 100% 48.6%, 73.1% 48.6%, 49.4% 55.6%, 25.9% 48.6%, 0 48.6%); }
  .pageglow { filter: drop-shadow(0 0 1px #FFF3DD) drop-shadow(0 0 1px #FFF3DD); }
  .page {
    background: url("CramuraiLogo-site.png") 0 0 / 100% 100% no-repeat;
    transform-origin: 49.4% 55.6%; opacity: 0;
    animation: flip1 5s linear infinite;
  }
  .p1 { clip-path: polygon(49.4% 55.6%, 49.4% 64.6%, 57.6% 62.71%, 57.6% 53.19%); }
  .p2 { clip-path: polygon(57.33% 53.27%, 57.33% 62.77%, 65.5% 60.89%, 65.5% 50.87%); animation-name: flip2; }
  .p3 { clip-path: polygon(65.27% 50.93%, 65.27% 60.94%, 70.2% 59.8%, 72.16% 52.46%, 72.37% 50.84%, 71.98% 49.85%, 70.98% 49.48%, 69.36% 49.73%); animation-name: flip3;
  }
  @keyframes twinkle {
    0%, 60%, 100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
    80% { transform: scale(1.35) rotate(18deg); filter: brightness(1.25); }
  }
  .star {
    position: absolute; inset: 0; display: block;
    background: url("CramuraiLogo-site.png") 0 0 / 100% 100% no-repeat;
    clip-path: circle(7.6% at 75.5% 22%); transform-origin: 75.5% 22%;
    animation: twinkle 3.5s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce) { .floaty, .page, .star { animation: none !important; } }