/* VegasTina motion layer.

   One file for how the site moves, loaded after every other stylesheet. It changes
   no layout, colour or spacing. Rules of the house:
   - Nothing a visitor is about to click moves on hover. Feedback comes on press,
     from shadows and colour, and from icons inside a control.
   - Content already on screen when the page loads is never hidden and re-shown.
     Only blocks further down the page ease in as they are scrolled to.
   - Everything here is switched off by the visitor's "reduce motion" setting
     (site.css has the global switch; the blocks below add their own guards). */

:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------------------------------------------------- page to page */
/* A short cross-fade between pages instead of a white flash. The header is
   matched across pages, so it stays put while the content changes underneath. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 140ms ease-out both motion-fade-out; }
  ::view-transition-new(root) { animation: 220ms var(--ease-out) both motion-fade-in; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(site-header) { animation-duration: 0s; }
}

/* ------------------------------------------------------ page entrance */
/* What is on screen when a page opens rises into place, one block after another,
   while the header stays exactly where it was. Pure CSS, so it starts on the first
   painted frame: nothing is shown, hidden and shown again. The keyframes only have
   a starting point and the fill is "backwards", so no transform is left behind on
   anything (the sticky category rail keeps sticking). */
@media (prefers-reduced-motion: no-preference) {
  .hero-slim, .home-welcome, .home-section, .category-rail,
  .main-column > *, .sidebar > *, .member-workspace > *, .auth-page > * {
    animation: motion-rise 560ms var(--ease-out) backwards;
  }
  .hero-slim, .home-welcome, .category-rail { animation-delay: 40ms; }
  .main-column > :nth-child(1), .member-workspace > :nth-child(1), .auth-page > :nth-child(1) { animation-delay: 90ms; }
  .main-column > :nth-child(2), .member-workspace > :nth-child(2), .auth-page > :nth-child(2) { animation-delay: 150ms; }
  .main-column > :nth-child(3), .member-workspace > :nth-child(3) { animation-delay: 210ms; }
  .main-column > :nth-child(n+4), .member-workspace > :nth-child(n+4) { animation-delay: 270ms; }
  .sidebar > :nth-child(1) { animation-delay: 140ms; }
  .sidebar > :nth-child(2) { animation-delay: 200ms; }
  .sidebar > :nth-child(3) { animation-delay: 260ms; }
  .sidebar > :nth-child(n+4) { animation-delay: 320ms; }
}

/* ------------------------------------------------ easing in on scroll */
/* motion.js adds .motion-ready, then marks blocks below the fold with .reveal
   and adds .is-visible as each one is scrolled to. */
.motion-ready .reveal { opacity: 0; transform: translateY(14px); }
.motion-ready .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
/* Cards in a row arrive one after another rather than all at once. */
.motion-ready .reveal.is-visible:nth-child(2) { transition-delay: 60ms; }
.motion-ready .reveal.is-visible:nth-child(3) { transition-delay: 120ms; }
.motion-ready .reveal.is-visible:nth-child(4) { transition-delay: 180ms; }
.motion-ready .reveal.is-visible:nth-child(5) { transition-delay: 240ms; }
.motion-ready .reveal.is-visible:nth-child(n+6) { transition-delay: 280ms; }

/* ------------------------------------------------------------ photos */
/* Photos fade in when they have loaded, over a soft shimmer, instead of popping. */
.motion-ready img.fade-image { opacity: 0; transition: opacity 420ms ease-out; }
.motion-ready img.fade-image.is-loaded { opacity: 1; }
.motion-ready .is-loading-photo {
  background-image: linear-gradient(100deg, #e6eef9 20%, #f4f8fd 40%, #e6eef9 60%);
  background-size: 220% 100%;
  animation: motion-shimmer 1.4s linear infinite;
}

/* ----------------------------------------------------- press feedback */
.button, .like-button, .forum-tile, .board-shortcut, .rail-link, .board-nav a, .pagination a,
.ticker-controls button, .header-signup, .text-button {
  transition-property: background-color, border-color, color, box-shadow, transform, opacity;
  transition-duration: 180ms;
  transition-timing-function: var(--ease-out);
}
.button:active, .like-button:active, .forum-tile:active, .board-shortcut:active,
.pagination a:active, .ticker-controls button:active { transform: scale(.965); transition-duration: 70ms; }

/* The arrow inside a link leans forward on hover; the link itself stays still. */
.button .icon, .more-link .icon, .section-end-link .icon, .membership-link .icon, .ad-manager-link .icon {
  transition: transform 220ms var(--ease-out);
}
.button:hover .icon:last-child, .more-link:hover .icon, .section-end-link:hover .icon,
.membership-link:hover .icon, .ad-manager-link:hover .icon { transform: translateX(3px); }

/* Cards answer with depth, not movement. Pictures zoom inside their fixed frame. */
.news-card, .board-box, .membership-option, .ad-card, .panel.story-list .story-row {
  transition: box-shadow 260ms var(--ease-out), border-color 260ms var(--ease-out), background-color 200ms ease-out;
}
.news-image img, .story-thumb img, .lead-story img { transition: transform 600ms var(--ease-out), opacity 420ms ease-out; }
.news-card:hover .news-image img, .story-row:hover .story-thumb img { transform: scale(1.04); }

/* ------------------------------------------------- things that appear */
details[open] > .account-menu-popover, .report-menu[open] > form {
  animation: motion-pop-in 170ms var(--ease-out) both; transform-origin: top right;
}
.flash { animation: motion-drop-in 380ms var(--ease-out) both; }
[role="tabpanel"]:not([hidden]) { animation: motion-fade-in 240ms ease-out both; }
.count-badge, .new-badge { animation: motion-badge 420ms var(--ease-spring) both; }
.field-error, .form-error { animation: motion-drop-in 260ms var(--ease-out) both; }

/* The heart answers a like (the page returns to #reactions after the press). */
#reactions:target .like-button.is-liked .icon { animation: motion-heart 520ms var(--ease-spring) both; }

/* The header gains a shadow once the page has moved under it. */
.site-header { transition: box-shadow 260ms ease-out; }
.site-header.is-scrolled { box-shadow: 0 8px 28px #17366512; }

/* Inputs settle into focus instead of snapping. */
.field input, .field select, .field textarea, .comment-form textarea, .search-form, .board-search {
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, background-color 200ms ease-out;
}

@keyframes motion-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes motion-fade-in { from { opacity: 0; } }
@keyframes motion-fade-out { to { opacity: 0; } }
@keyframes motion-drop-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes motion-pop-in { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes motion-badge { from { opacity: 0; transform: scale(.4); } }
@keyframes motion-heart { 0% { transform: scale(.6); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes motion-shimmer { to { background-position: -220% 0; } }