/* ==========================================================================
   PLOP! — the motion vocabulary.

   The brief bans one thing above all: a page where every block fades upward.
   So there is no fade-up here. Four verbs, and each of them is a claim about a
   physical event rather than an opacity ramp:

     slide   a print is pushed across the table into place
     drop    an object is put down, and settles by two pixels
     stamp   something is pressed onto the paper, hard and once
     settle  a piece of paper is laid down: it lands turned and straightens

   `settle` is the only one that touches typography, and it is used sparingly —
   most of the words on this site are meant to have been lying on the table
   before you arrived. What moves is the RELATIONSHIP between objects: a photo
   slides and uncovers a note, a corner folds and a photograph is underneath.

   Everything here is opt-in through data-reveal, and everything here is off
   under prefers-reduced-motion.
   ========================================================================== */

/* the default state is the finished state, so a document with no script — or a
   reader who asked for no motion — sees the page already assembled */
[data-reveal] { transition: transform var(--t-slow) var(--settle),
                            opacity var(--t-mid) linear;
                transition-delay: var(--delay, 0ms); }

html.js [data-reveal]:not(.is-in) { opacity: 0; }

html.js [data-reveal="slide"]:not(.is-in) {
  transform: translate3d(-6%, 1.4rem, 0) rotate(-2.4deg);
}
html.js [data-reveal="drop"]:not(.is-in) {
  transform: translate3d(0, -1.6rem, 0) rotate(3deg) scale(.97);
}
html.js [data-reveal="stamp"]:not(.is-in) {
  transform: rotate(var(--tilt, 0deg)) scale(1.5);
  opacity: 0;
}
html.js [data-reveal="settle"]:not(.is-in) {
  transform: translate3d(0, .5rem, 0) rotate(-1.1deg) scale(.99);
}

[data-reveal].is-in {
  opacity: 1;
  transform: rotate(var(--tilt, 0deg));
}

/* stamp lands fast and does not ease out: a stamp is pressed, not floated */
[data-reveal="stamp"] { transition-duration: var(--t-fast); transition-timing-function: var(--snap); }
/* drop overshoots by the two pixels the brief allows and no more */
[data-reveal="drop"] { transition-timing-function: cubic-bezier(.24,.86,.36,1.04); }

/* --- the hero entrance -------------------------------------------------- */
/* core/hero.js releases these once the photograph has decoded, so nothing
   animates into place around an empty grey box. */
[data-enter] {
  transition: transform var(--t-slow) var(--settle), opacity var(--t-mid) linear;
  transition-delay: var(--delay, 0ms);
}
html.js [data-enter]:not(.is-in) { opacity: 0; }
html.js .hero__print[data-enter]:not(.is-in)   { transform: translate3d(0, 2.5rem, 0) rotate(-3.4deg) scale(.98); }
html.js .hero__headline[data-enter]:not(.is-in),
html.js .hero__descriptor[data-enter]:not(.is-in) { transform: translate3d(-.8rem, .4rem, 0) rotate(-1.4deg); }
html.js .hero__sticker[data-enter]:not(.is-in)  { transform: rotate(-26deg) scale(.7); }
html.js .hero__cta[data-enter]:not(.is-in),
html.js .hero__tab[data-enter]:not(.is-in)      { transform: translate3d(0, 1.2rem, 0) rotate(4deg); }
html.js .hero__hint[data-enter]:not(.is-in)     { transform: translate3d(0, .5rem, 0); }
[data-enter].is-in { opacity: 1; transform: rotate(var(--tilt, 0deg)); }

/* the short hand-drawn underline that draws itself under the headline */
.hero__underline path { stroke-dasharray: 320; stroke-dashoffset: 320; }
html.js .hero__underline[data-enter].is-in path {
  transition: stroke-dashoffset 560ms var(--push) 240ms;
  stroke-dashoffset: 0;
}
html:not(.js) .hero__underline path { stroke-dashoffset: 0; }

/* --- the drawing line --------------------------------------------------- */
.scrawl__tip {
  fill: var(--tomato);
  opacity: 0;
  transition: opacity 160ms linear;
}
.scrawl.is-drawn path { stroke-dashoffset: 0 !important; }

/* ==========================================================================
   Reduced motion.

   Everything is placed, nothing travels. Objects keep their rotations, because
   a rotation is where the object IS, not an animation of it — what goes is the
   inertia, the throws, the fold, the drawn line and the staggered entrances.
   No content and no control is removed.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html.js [data-reveal]:not(.is-in),
  html.js [data-enter]:not(.is-in) {
    opacity: 1;
    transform: rotate(var(--tilt, 0deg));
  }
  .scrawl path { stroke-dashoffset: 0 !important; }
  .scrawl__tip { display: none; }
  body { transition: none; }
}