/* W4 Newsstand — animation styles.
   Everything the JS needs. No preprocessor, no framework. */

.w4-stage {
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;

  /* resting drift — nothing in this world ever sits perfectly still */
  --w4-ix: 1px;
  --w4-iy: 0.7px;
  --w4-ir: 0.35deg;
}

.w4-stage img {
  -webkit-user-drag: none;
  user-select: none;
}

/* The drift: a 4-position stepped wobble, never interpolated.
   Each element gets its own duration + negative delay from the JS
   so the whole page isn't nodding in unison. */
@keyframes w4-idle {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  25%  { transform: translate(var(--w4-ix), calc(var(--w4-iy) * -1)) rotate(var(--w4-ir)); }
  50%  { transform: translate(calc(var(--w4-ix) * -1), 0px) rotate(calc(var(--w4-ir) * -1)); }
  75%  { transform: translate(0px, var(--w4-iy)) rotate(0deg); }
}

/* Same drift without rotation — for anything already using rotate/scale,
   or anything tall enough that a rotation reads as a lean. */
@keyframes w4-idle-t {
  0%   { transform: translate(0px, 0px); }
  25%  { transform: translate(var(--w4-ix), calc(var(--w4-iy) * -1)); }
  50%  { transform: translate(calc(var(--w4-ix) * -1), 0px); }
  75%  { transform: translate(0px, var(--w4-iy)); }
}

/* A cel cutting on. Never a fade — one frame off, next frame fully on. */
@keyframes w4-appear {
  0%   { opacity: 0; }
  1%   { opacity: 1; }
  100% { opacity: 1; }
}

/* A rule drawing itself left to right, on a stepped timing function. */
@keyframes w4-draw {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* The wordmark's four hard cuts: W / W4 / W4 NEWS / W4 NEWSSTAND.
   The percentages are measured off w4_logo.png — if that art is
   re-exported at a different crop, these need remeasuring. */
@keyframes w4-wordmark {
  0%,   24.99%  { clip-path: inset(0 89.4% 0 0); }
  25%,  49.99%  { clip-path: inset(0 78.9% 0 0); }
  50%,  74.99%  { clip-path: inset(0 41.3% 0 0); }
  75%,  100%    { clip-path: inset(0 0 0 0); }
}

/* A straight crossing, edge to edge. */
@keyframes w4-cross {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Two-frame hop, no easing, no rotation. */
@keyframes w4-hop {
  0%,   49.99% { transform: translateY(0); }
  50%,  100%   { transform: translateY(var(--w4-hop, -7px)); }
}