/* Generated by tools/build_site.py from render/player.html. Do not edit by hand. */
/* Every motion is a CSS animation so render.js can seek it frame by frame. */
  .w { opacity: 0; animation: ink 220ms ease-out forwards; animation-delay: var(--d, 0ms); }
  @keyframes ink { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
  .tail { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 360ms ease-out forwards; animation-delay: var(--d, 0ms); }
  .tail[stroke-dasharray="0.02 0.035"] { stroke-dashoffset: 0; opacity: 0; animation-name: fadein; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fadein { to { opacity: 1; } }
  .face-a { animation: hide 1ms linear forwards; animation-delay: var(--swap, 700ms); }
  .face-b { opacity: 0; animation: show 1ms linear forwards; animation-delay: var(--swap, 700ms); }
  @keyframes hide { to { opacity: 0; } }
  @keyframes show { to { opacity: 1; } }
  .pop { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pop 260ms cubic-bezier(.3,1.5,.6,1) forwards; animation-delay: var(--d, 0ms); }
  @keyframes pop { from { opacity: 0; transform: scale(.85) translateY(20px); } to { opacity: 1; transform: none; } }
  .glow { animation: glow 1.6s ease-in-out infinite alternate; }
  @keyframes glow { from { opacity: .65; } to { opacity: 1; } }
  .grow { transform-box: fill-box; transform-origin: 50% 100%; animation: grow 2.4s ease-out forwards; }
  @keyframes grow { from { transform: scaleY(.9); } to { transform: scaleY(1.06); } }
  .dimmer { animation: dim 1.4s ease-in forwards; }
  @keyframes dim { from { opacity: 0; } to { opacity: .3; } }
  .tear { animation: tear 1.8s ease-in forwards; animation-delay: var(--swap, 1200ms); opacity: 0; }
  @keyframes tear { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 1; transform: translateY(26px); } }
  .pen { transform-box: fill-box; transform-origin: 0 100%; animation: pen .5s ease-in-out infinite alternate; }
  @keyframes pen { to { transform: rotate(-6deg) translateX(6px); } }

  /* phone: typing dots, typed-then-deleted drafts, voice-note waveforms */
  .blink { opacity: 0; animation: show 1ms linear var(--d, 0ms) forwards, hide 1ms linear var(--e, 1e9ms) forwards; }
  .dotp { animation: dotp 480ms ease-in-out infinite alternate; animation-delay: var(--k, 0ms); }
  @keyframes dotp { from { opacity: .3; } to { opacity: 1; } }
  .wave { transform-box: fill-box; transform-origin: center; animation: wave 520ms ease-in-out infinite alternate; animation-delay: var(--k, 0ms); }
  @keyframes wave { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

  /* flashbacks: the photo drops onto the page; rewind jerks the scene backwards before it plays */
  .drop-in { transform-origin: 50% 40%; animation: drop 700ms cubic-bezier(.2,.9,.3,1.1) forwards; opacity: 0; }
  @keyframes drop { from { opacity: 0; transform: translateY(-160px) rotate(6deg) scale(1.08); } to { opacity: 1; transform: none; } }
  .rewind { animation: rewind 900ms steps(9) forwards; }
  @keyframes rewind { 0% { transform: translateX(0); } 20% { transform: translateX(-26px); } 40% { transform: translateX(18px); } 60% { transform: translateX(-12px); } 80% { transform: translateX(6px); } 100% { transform: none; } }
  /* cold open: the masthead stamps on over the frozen scene */
  .stamp { opacity: 0; transform-origin: 50% 300px; animation: stamp 320ms cubic-bezier(.3,1.6,.6,1) 250ms forwards; }
  @keyframes stamp { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
  .fade-in { animation: fadein5 400ms ease-out forwards; opacity: 0; }
  @keyframes fadein5 { to { opacity: .5; } }

  /* camera: a slow push in for the whole shot */
  .cam { transform-origin: 50% 45%; animation: push var(--dur, 4s) linear forwards; }
  @keyframes push { from { transform: scale(1); } to { transform: scale(1.05); } }
  /* cover swings open like a magazine cover at the end of its shot */
  .swing { transform-origin: 0 50%; animation: swing 600ms ease-in forwards; animation-delay: var(--swing, 1s); }
  @keyframes swing { to { transform: perspective(2400px) rotateY(-88deg); opacity: .4; } }
  /* contents page: dives into this issue's row */
  .dive { animation: dive 1.4s cubic-bezier(.6,0,.8,.4) forwards; animation-delay: 0ms; }
  @keyframes dive { 0%, 55% { transform: scale(1); } 100% { transform: scale(3.2); opacity: .2; } }
  /* reply page: the page curls off to reveal the study */
  .curl { transform-origin: 100% 100%; animation: curl 700ms ease-in forwards; }
  @keyframes curl { to { transform: rotate(-24deg) translate(-1300px, -300px); } }