/* mtto.me shared motion layer */
@view-transition { navigation: auto; }

/* shared brand mark that morphs between pages */
.brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -.03em; display: inline-block; }
.brand .dot { color: #ffd23f; }
.fx-home main h1, .brand, .home { view-transition-name: brand; }

/* cursor glow */
.fx-glow { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  pointer-events: none; z-index: 1; opacity: 0; transition: opacity .5s;
  background: radial-gradient(closest-side, rgba(143,155,255,.16), rgba(143,155,255,.06) 45%, transparent 70%); will-change: transform; }
.fx-glow.on { opacity: 1; }

/* spotlight on tiles and cards */
a.tile, a.card { position: relative; }
a.tile::after, a.card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.11), transparent 60%); }
a.tile:hover::after, a.card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: fx-out .22s ease-in both; }
  ::view-transition-new(root) { animation: fx-in .38s cubic-bezier(.2,.8,.2,1) both; }
  ::view-transition-group(brand) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  @keyframes fx-out { to { opacity: 0; transform: translateY(-10px) scale(.99); } }
  @keyframes fx-in { from { opacity: 0; transform: translateY(14px); } }

  /* fallback page fade for browsers without page transitions */
  .fx-novt body > .stage, .fx-novt body > main { animation: fx-in .4s cubic-bezier(.2,.8,.2,1) backwards; }

  /* home intro */
  .fx-intro main h1:not(.split) { opacity: 0; }
  .fx-intro main h1 .ch { display: inline-block; animation: fx-rise .8s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i) * 70ms + 80ms); }
  .fx-intro main h1 .dot { display: inline-block; animation: fx-drop .7s cubic-bezier(.3,1.6,.5,1) backwards; animation-delay: 420ms; }
  .fx-intro main .play { animation: fx-up .6s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: 700ms; }
  .fx-intro main .play + .play { animation-delay: 790ms; }
  @keyframes fx-rise { from { opacity: 0; transform: translateY(45%); filter: blur(10px); } }
  @keyframes fx-drop { 0% { opacity: 0; transform: translateY(-160%) scale(.6); } 60% { opacity: 1; } }
  @keyframes fx-up { from { opacity: 0; transform: translateY(14px); } }

  /* staggered tiles */
  a.card, a.tile, .chip { animation: fx-up .55s cubic-bezier(.2,.8,.2,1) backwards; }
  a.card:nth-child(1), a.tile:nth-child(1) { animation-delay: 60ms } a.card:nth-child(2), a.tile:nth-child(2) { animation-delay: 100ms }
  a.card:nth-child(3), a.tile:nth-child(3) { animation-delay: 140ms } a.card:nth-child(4), a.tile:nth-child(4) { animation-delay: 180ms }
  a.card:nth-child(5), a.tile:nth-child(5) { animation-delay: 220ms } a.card:nth-child(6), a.tile:nth-child(6) { animation-delay: 260ms }
  a.card:nth-child(7), a.tile:nth-child(7) { animation-delay: 300ms } a.card:nth-child(8) { animation-delay: 340ms }
  a.card:nth-child(9) { animation-delay: 380ms } a.card:nth-child(10) { animation-delay: 420ms } a.card:nth-child(11) { animation-delay: 460ms }
  a.card:nth-child(12) { animation-delay: 500ms } a.card:nth-child(13) { animation-delay: 540ms } a.card:nth-child(14) { animation-delay: 580ms }
  a.card:nth-child(15) { animation-delay: 620ms } a.card:nth-child(16) { animation-delay: 650ms } a.card:nth-child(17) { animation-delay: 680ms }
  a.card:nth-child(18) { animation-delay: 710ms } a.card:nth-child(19) { animation-delay: 740ms } a.card:nth-child(n+20) { animation-delay: 770ms }
  .chip { animation-duration: .4s; }

  /* magnetic buttons */
  .fx-mag { transition: transform .35s cubic-bezier(.2,.8,.2,1), background .2s !important; }
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}