/* Altrove Collective — motion states.

   Every hidden starting state lives under html.motion, which the inline script in
   <head> only sets when JavaScript modules run and the visitor has not asked for
   reduced motion. Without it, every element is simply where it belongs.

   Timing: entrances use --ease-out (fast start, long settle); things that cross the
   screen (curtain, rules, clips) use --ease-io. */

html.motion { scroll-behavior: auto !important; }

/* ---------- Entrances ---------- */

/* A direct visit fades the page in once fonts are ready */
.motion.enter:not(.is-ready) body { opacity: .01; } /* not 0: browsers count a page faded in from 0 as unpainted until much later */
.motion.enter.is-ready body { opacity: 1; transition: opacity .8s var(--ease); }

/* Leaving: the page drifts up a little as the curtain rises over it */
.is-leaving main,
.is-leaving .colophon,
.is-leaving .cover { transform: translate3d(0, -5vh, 0); transition: transform .8s var(--ease-io); }

/* The intro (first visit to the cover): paper, the seal turning, a count, a line.
   Then the paper lifts away and the cover's masthead rises behind it. */
html.intro .loader { clip-path: inset(0 0 0 0); }
.loader__count {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums lining-nums;
  font-variation-settings: "opsz" 11;
  color: var(--inchiostro);
}
.loader__seal { transition: transform 1.1s var(--ease-io), opacity .5s var(--ease); }
.loader__label,
.loader__count,
.loader__bar { transition: opacity .4s var(--ease), transform .8s var(--ease-io); }
html.intro-out .loader {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.05s var(--ease-io) .12s;
  pointer-events: none;
}
html.intro-out .loader__seal { transform: translate3d(0, -40px, 0) scale(.86); opacity: 0; }
html.intro-out .loader__label,
html.intro-out .loader__count,
html.intro-out .loader__bar { opacity: 0; transform: translate3d(0, -24px, 0); }

/* ---------- Split text ---------- */

.motion [data-split]:not(.is-split) { opacity: 0; }
.is-split .line {
  display: block;
  overflow: hidden;
  /* room for ascenders, descenders and italic overhang inside the mask */
  padding: .14em .1em .2em;
  margin: -.14em -.1em -.2em;
}
.is-split .line__inner { display: block; }
.is-split .w { display: inline; }

.motion [data-split="lines"] .line__inner { transform: translate3d(0, calc(100% + .5em), 0); }
.motion [data-split="lines"].is-in .line__inner {
  transform: none;
  transition: transform 1.25s var(--ease-out);
  transition-delay: calc(var(--delay, 0s) + var(--l, 0) * 95ms);
}

.is-split[data-split="chars"] .w { display: inline-block; white-space: nowrap; }
.is-split[data-split="chars"] .c { display: inline-block; }
.motion [data-split="chars"] .c { transform: translate3d(0, calc(100% + .5em), 0); }
.motion [data-split="chars"].is-in .c {
  transform: none;
  transition: transform 1.15s var(--ease-out);
  transition-delay: calc(var(--delay, 0s) + var(--c, 0) * 32ms);
}

/* Scrubbed statements start pale; the script inks each word as it is read */
.motion [data-scrub] .w { opacity: .16; }

/* ---------- Reveals ---------- */

.motion [data-reveal="up"] { opacity: 0; transform: translate3d(0, 32px, 0); }
.motion [data-reveal="down"] { opacity: 0; transform: translate3d(0, -16px, 0); }
.motion [data-reveal="fade"] { opacity: 0; }
.motion [data-reveal="scale"] { opacity: 0; transform: scale(.88); }
.motion [data-reveal="figure"] { opacity: 0; transform: translate3d(0, 9%, 0) scale(1.03); }
.motion [data-reveal="up"].is-in,
.motion [data-reveal="down"].is-in,
.motion [data-reveal="fade"].is-in,
.motion [data-reveal="scale"].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1s var(--ease), transform 1.3s var(--ease-out);
  transition-delay: var(--delay, 0s);
}
.motion [data-reveal="figure"].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 1.4s var(--ease), transform 2.4s var(--ease-out);
  transition-delay: var(--delay, 0s);
}

/* Hairlines draw from the left */
.motion [data-reveal="rule"] { transform: scaleX(0); transform-origin: left center; }
.motion [data-reveal="rule"].is-in { transform: none; transition: transform 1.6s var(--ease-io) var(--delay, 0s); }

/* Frames open from the bottom while the picture settles */
.motion [data-reveal="clip"] { clip-path: inset(100% 0 0 0); }
.motion [data-reveal="clip"] > img,
.motion [data-reveal="clip"] > .portrait__initials { transform: scale(1.22); }
.motion [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.5s var(--ease-io) var(--delay, 0s); }
.motion [data-reveal="clip"].is-in > img,
.motion [data-reveal="clip"].is-in > .portrait__initials { transform: none; transition: transform 2.2s var(--ease-out) var(--delay, 0s); }
.motion .person:hover [data-reveal="clip"].is-in > img { transform: scale(1.035); transition-duration: 1.2s; transition-delay: 0s; }

/* Masthead letters rise out of their slot, one after another */
.motion [data-reveal="letters"] .masthead__l { transform: translate3d(0, 108%, 0); }
.motion [data-reveal="letters"].is-in .masthead__l {
  transform: none;
  transition: transform 1.6s var(--ease-out);
  transition-delay: calc(var(--delay, 0s) + var(--i, 0) * 75ms);
}

/* Groups: children follow one another */
.motion [data-stagger] > * { opacity: 0; transform: translate3d(0, 26px, 0); }
.motion [data-stagger].is-in > * {
  opacity: 1;
  transform: none;
  transition: opacity .9s var(--ease), transform 1.2s var(--ease-out);
  transition-delay: calc(var(--delay, 0s) + var(--i, 0) * 90ms);
}

/* ---------- The menu opens as a circle from its button ---------- */

.motion .menu {
  clip-path: circle(0 at var(--mx, calc(100% - 48px)) var(--my, 36px));
  transition: clip-path .75s var(--ease-io);
}
.motion .menu.is-open { clip-path: circle(150% at var(--mx, calc(100% - 48px)) var(--my, 36px)); }
.motion .menu__list li,
.motion .menu__foot { opacity: 0; transform: translate3d(0, 34px, 0); transition: opacity .25s var(--ease), transform .4s var(--ease); }
.motion .menu.is-open .menu__list li,
.motion .menu.is-open .menu__foot {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease) calc(.22s + var(--i, 0) * 60ms), transform 1s var(--ease-out) calc(.22s + var(--i, 0) * 60ms);
}
.motion .menu.is-open .menu__foot { --i: 3; }

/* ---------- The map draws itself toward Rome ---------- */

.motion .routes__path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.motion .routes.is-drawn .routes__path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.4s var(--ease-io) calc(.2s + var(--i, 0) * 140ms), opacity .4s var(--ease), stroke-width .4s var(--ease);
}
.motion .routes__city,
.motion .routes__label,
.motion .routes__coord { opacity: 0; }
.motion .routes__rome { transform: scale(0); }
.motion .routes.is-drawn .routes__city,
.motion .routes.is-drawn .routes__label,
.motion .routes.is-drawn .routes__coord { opacity: 1; transition: opacity .8s var(--ease) .3s, fill .3s var(--ease), transform .3s var(--ease); }
.motion .routes.is-drawn .routes__label--rome,
.motion .routes.is-drawn .routes__coord { transition-delay: 1.6s, 0s, 0s; } /* only the first fade waits */
.motion .routes.is-drawn .routes__rome { transform: none; transition: transform 1s var(--ease-out) 1.5s; }
.motion .routes.has-focus .routes__label:not(.routes__label--rome) { opacity: .35; }
.motion .routes.has-focus .routes__label.is-focus { opacity: 1; }
.motion .routes__pulse { opacity: 0; }
.motion .routes.is-drawn .routes__pulse { animation: routes-pulse 2.6s var(--ease-out) 2.2s infinite; }
@keyframes routes-pulse {
  0% { opacity: .9; transform: scale(1); }
  100% { opacity: 0; transform: scale(4.2); }
}


/* ---------- Seal rings and figures ---------- */

.note__art .seal__ring { animation: altrove-spin 80s linear infinite; }

/* ---------- Reduced motion: nothing moves on its own ---------- */

@media (prefers-reduced-motion: reduce) {
  .link:hover { animation: none; }
  .note__art .seal__ring,
  .routes__pulse { animation: none !important; }
  .btn__roll > span,
  .btn__roll::after,
  .nav__roll > span,
  .nav__roll::after { transition: none; }
}