/* Everyday Macros opening animation, ported unchanged from the designer's reference
   (cookbook-loader.html). Plays once per app launch; see loader.js. Fonts come from the app's
   own Lora and Work Sans. Lora has no 300 weight, so the title renders at 400, exactly as
   the reference did with Google Fonts. */
  /* ===== Everyday Macros cookbook loader — reference implementation =====
     Duration: 2.7s (set --em-dur). Timeline as % of duration:
       0–58%   one slow float on the cover
       58–80%  book turns to face the viewer
       60–84%  cover opens on the spiral binding (first page is plain white)
       68–93%  fast zoom in
       80–93%  fade to solid white
  */
  .em-loader { --em-dur: 2.7s; position: fixed; inset: 0; z-index: 9999; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
  .em-zoom { width: 1000px; height: 1200px; flex: none; position: relative; transform-origin: center; }
  .em-stage { position: absolute; inset: 0; width: 1000px; height: 1200px; transform: scale(var(--em-fit, .6)); transform-origin: center; perspective: 2600px; perspective-origin: 50% 50%; }
  .em-book { position: absolute; left: 50%; top: 50%; width: 816px; height: 1056px; margin: -528px 0 0 -408px; transform-style: preserve-3d; transform: translateY(-14px) rotateY(26deg) rotateZ(-4deg) scale(.8); }
  .em-abs { position: absolute; inset: 0; }
  .em-cover { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 0 50%; }
  .em-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
  .em-white { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }

  .em-loader.is-playing .em-book  { animation: emBook  var(--em-dur) linear forwards; }
  .em-loader.is-playing .em-cover { animation: emCover var(--em-dur) linear forwards; }
  .em-loader.is-playing .em-zoom  { animation: emZoom  var(--em-dur) linear forwards; }
  .em-loader.is-playing .em-white { animation: emWhite var(--em-dur) linear forwards; }

  @keyframes emBook {
    0%   { transform: translateY(-14px) rotateY(26deg) rotateZ(-4deg) scale(.8); animation-timing-function: cubic-bezier(.33,0,.4,1); }
    58%  { transform: translateY(-34px) rotateY(21deg) rotateZ(-2.5deg) scale(.81); animation-timing-function: cubic-bezier(.6,0,.3,1); }
    80%, 100% { transform: translateY(-30px) rotateY(0deg) rotateZ(0deg) scale(.86); }
  }
  @keyframes emCover {
    0%   { transform: rotateY(0deg); }
    60%  { transform: rotateY(0deg); animation-timing-function: cubic-bezier(.55,0,.25,1); }
    84%  { transform: rotateY(-170deg); }
    100% { transform: rotateY(-172deg); }
  }
  @keyframes emZoom {
    0%, 68% { transform: scale(1); animation-timing-function: cubic-bezier(.7,0,.95,.4); }
    93%, 100% { transform: scale(8); }
  }
  @keyframes emWhite {
    0%, 80% { opacity: 0; animation-timing-function: ease-in; }
    93%, 100% { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .em-loader.is-playing .em-book, .em-loader.is-playing .em-cover, .em-loader.is-playing .em-zoom { animation: none; }
    .em-loader { --em-dur: 0.8s; }
  }

  /* Cover typography */
  .em-cover-front { transform: translateZ(.5px); background: #fff; overflow: hidden; font-family: 'Work Sans', sans-serif; color: #262220; }
  .em-cover-layout { position: absolute; inset: 0; padding: .83in .83in .83in 1.08in; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: space-between; }
  .em-frame { position: absolute; top: .5in; right: .5in; bottom: .5in; left: .75in; border: .75pt solid #d8d2cb; }
  .em-title-block { text-align: center; max-width: 6in; position: relative; z-index: 1; }
  .em-mark { display: block; width: 385px; height: auto; margin: 0 auto 58px; position: relative; left: 27px; }
  .em-kicker { font-size: 23px; letter-spacing: 6.3px; text-transform: uppercase; color: #8a8177; margin-bottom: 24px; line-height: .95; }
  .em-title { margin: 7px 0 0; font-weight: 300; font-size: 91px; letter-spacing: 3.3px; line-height: 1; font-family: Lora, serif; }
  .em-rule { width: 77px; height: 1px; background: #d8d2cb; margin: 29px auto; }
  .em-sub { font-family: Lora, serif; font-weight: 300; font-size: 24px; letter-spacing: 1.1px; }
  .em-tags { font-size: 14px; letter-spacing: 4.5px; color: #8a8177; margin-top: 22px; line-height: 5.65; text-transform: uppercase; white-space: nowrap; }
  .em-brand { position: relative; z-index: 1; margin: 22px 0 39px; }
  .em-brand img { width: 252px; height: 96px; object-fit: contain; display: block; margin: -15px auto; mix-blend-mode: multiply; }
  .em-hole { position: absolute; left: 18px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #b9b1a7, #8f877d); box-shadow: inset 1px 2px 3px rgba(0,0,0,.45); }
  .em-coil { position: absolute; left: -9px; width: 36px; height: 7px; border-radius: 3.5px; transform-origin: 33px 50%; transform: translateZ(2.5px) rotateZ(-9deg); background: linear-gradient(180deg, #4a4a4a 0%, #1c1c1c 55%, #1c1c1c 100%); box-shadow: 0 1.5px 1.5px rgba(0,0,0,.22); }
  .em-coil-side { position: absolute; left: -6px; width: 37px; height: 7px; border-radius: 3.5px; transform-origin: 100% 50%; transform: rotateZ(-6deg); background: linear-gradient(180deg, #4a4a4a 0%, #1c1c1c 50%, #1c1c1c 100%); }

  /* App additions. Instead of ending on white, the whole scene fades out while the book opens
     and zooms, so the app shows through the opening page. (Tyson asked for this on 2026-11-02;
     the reference's .em-white step is no longer used.) */
  .em-loader { cursor: pointer; }
  .em-loader.is-playing { animation: emReveal var(--em-dur) linear forwards; }
  .em-loader.is-playing .em-white { animation: none; }
  @keyframes emReveal {
    0%, 66% { opacity: 1; animation-timing-function: cubic-bezier(.4,0,.6,1); }
    92%, 100% { opacity: 0; }
  }
  .em-loader.is-leaving { opacity: 0; transition: opacity .25s ease; pointer-events: none; }
  html.em-intro, html.em-intro body { overflow: hidden; }