/* Subtle motion for the marketing site, sign-in pages and host dashboard. Guest pages don't load this file.
   Everything sits behind prefers-reduced-motion, and nothing depends on JavaScript to become visible. */
@media (prefers-reduced-motion: no-preference) {

  /* Page-to-page: the logo stays put while the page cross-fades; the sign-in form re-shapes between login ↔ sign-up. */
  @view-transition { navigation: auto; }
  .logo { view-transition-name: hive-logo; }
  .side { view-transition-name: auth-side; }
  #form { view-transition-name: auth-form; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
  ::view-transition-group(hive-logo), ::view-transition-group(auth-form) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
  ::view-transition-old(auth-form) { animation: m-out .16s ease-in both; }
  ::view-transition-new(auth-form) { animation: m-in .34s .1s cubic-bezier(.2, .8, .2, 1) both; }

  /* The logo's hexagon floats gently and every so often turns one face (a hexagon looks the same after 60°, so the loop is seamless). */
  .logo .hex { animation: hex-life 10s ease-in-out 1.5s infinite; }
  .logo:hover .hex { animation: hex-turn .7s cubic-bezier(.34, 1.56, .64, 1); }

  /* First arrival on a page (skipped when a page transition already animates it — see the .vt class). */
  html:not(.vt) .hero2 > div:first-child > * { animation: m-in .7s cubic-bezier(.2, .8, .2, 1) both; }
  html:not(.vt) .hero2 > div:first-child > :nth-child(2) { animation-delay: .08s; }
  html:not(.vt) .hero2 > div:first-child > :nth-child(3) { animation-delay: .16s; }
  html:not(.vt) .hero2 > div:first-child > :nth-child(4) { animation-delay: .24s; }
  html:not(.vt) .hero2 .showcase { animation: m-in .9s .15s cubic-bezier(.2, .8, .2, 1) both; }
  html:not(.vt) #form, html:not(.vt) .side blockquote, html:not(.vt) .side p { animation: m-in .6s cubic-bezier(.2, .8, .2, 1) both; }
  html:not(.vt) .side p { animation-delay: .1s; }

  /* Homepage sections ease up as they scroll into view (home.js adds .rv / .in). */
  .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0s); }
  .rv.in { opacity: 1; transform: none; }

  /* Dashboard: a soft fade when moving between pages, a quicker one between an event's tabs. */
  #view.enter { animation: m-in .35s cubic-bezier(.2, .8, .2, 1) both; }
  #tab { animation: m-fade .22s ease-out both; }
  .menu:not([hidden]) { animation: m-pop .16s ease-out both; transform-origin: top right; }

  .btn { transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; }
  .btn.primary:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0) scale(.98); }
}

/* The logo mark as a true regular hexagon rather than the ⬢ glyph, whose ink isn't centred in its box. */
.logo .hex { width: .78em; height: .9em; font-size: 1.15em; color: transparent; overflow: hidden; background: var(--honey);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); margin-right: 1px; }
@media print { .rv { opacity: 1 !important; transform: none !important; } }

@keyframes m-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes m-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
@keyframes hex-life {
  0%, 100% { transform: translateY(0) rotate(0); }
  20% { transform: translateY(-1.5px) rotate(0); }
  40% { transform: translateY(0) rotate(0); }
  60% { transform: translateY(-1.5px) rotate(0); }
  84% { transform: translateY(0) rotate(0); }
  94%, 99.99% { transform: translateY(0) rotate(60deg); }
}
@keyframes hex-turn { to { transform: rotate(60deg); } }