/* ============================================================================
   MOTION LAYER, second design (2026-09-15)
   ----------------------------------------------------------------------------
   The first design stacked a dozen effects and James's verdict was "everything
   moves too much and acts a little weird". This is the rethink: ONE motion
   language, used sparingly, so the site reads as calm and expensive rather
   than busy.

   The whole vocabulary:
     - Rise: opacity 0 -> 1 with a 14px lift, ease-out, about 0.7s. Used for
       the hero entrance (staggered top to bottom) and for scroll reveals
       (grids stagger by 60ms so a row reads left to right, once).
     - Settle: a photograph eases from scale 1.03 to 1 as its card reveals.
     - Hover: the existing card lift and photo zoom, plus an ink underline that
       draws under text links. Nothing else reacts to the cursor.
     - Numbers: landlord stats, Growth Metrics bars and labels, table figures,
       and the Transactions donut count or grow to their real value once.
     - Pages: a plain 0.3s crossfade between pages where the browser supports
       it; the header stays fixed through it.

   Nothing here is required for the page to work. All of it sits behind
   `prefers-reduced-motion: no-preference` and `html.m-on`, which js/motion.js
   adds; without the script, or with reduced motion on, the site is still.
   The entrance uses CSS animations (not transitions waiting on a JS class),
   so nothing can ever be left invisible if the script stops early.
   ============================================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---- Pages: plain crossfade ------------------------------------------- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: m-fade-out 0.18s ease both; }
  ::view-transition-new(root) { animation: m-fade-in 0.32s ease both; }
  .site-header { view-transition-name: aura-header; }
  ::view-transition-old(aura-header), ::view-transition-new(aura-header) { animation: none; }
  @keyframes m-fade-out { to { opacity: 0; } }
  @keyframes m-fade-in { from { opacity: 0; } }

  /* ---- The one movement --------------------------------------------------- */
  @keyframes m-rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }

  /* ---- Hero entrance ----------------------------------------------------- */
  /* Top to bottom, 120ms apart. Animations with `both` fill, so the elements
     start hidden and are guaranteed to end visible. The photo keeps its own
     slow zoom from style.css. */
  html.m-on .hero h1,
  html.m-on .hero > .wrap > p,
  html.m-on .hero .hero-actions,
  html.m-on .hero .search-bar,
  html.m-on .page-hero .crumb,
  html.m-on .page-hero h1,
  html.m-on .page-hero .hero-lede,
  html.m-on .page-hero .hero-inner > p:not(.crumb):not(.hero-lede),
  html.m-on .page-hero .hero-toolbar {
    animation: m-rise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  html.m-on .page-hero .crumb { animation-delay: 0.05s; }
  html.m-on .hero h1, html.m-on .page-hero h1 { animation-delay: 0.12s; }
  html.m-on .hero > .wrap > p, html.m-on .page-hero .hero-lede { animation-delay: 0.26s; }
  html.m-on .hero .hero-actions, html.m-on .page-hero .hero-inner > p:not(.crumb):not(.hero-lede) { animation-delay: 0.38s; }
  html.m-on .hero .search-bar, html.m-on .page-hero .hero-toolbar { animation-delay: 0.5s; }

  /* ---- Scroll reveals ---------------------------------------------------- */
  /* style.css already fades .reveal up 24px over 0.7s. Shorter travel and a
     softer curve here, plus a left-to-right stagger inside grids. */
  html.m-on .reveal { transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
  html.m-on .reveal.in { transform: none; }
  html.m-on .hood-grid > .reveal:nth-child(2), html.m-on .listing-grid > .reveal:nth-child(2), html.m-on .team-grid > .reveal:nth-child(2),
  html.m-on .value-grid > .reveal:nth-child(2), html.m-on .stat-row > .reveal:nth-child(2), html.m-on .ll-results > .reveal:nth-child(2),
  html.m-on .why-points > .reveal:nth-child(2), html.m-on .switch-rail > .reveal:nth-child(2), html.m-on .ll-referrals > .reveal:nth-child(2) { transition-delay: 0.06s; }
  html.m-on .hood-grid > .reveal:nth-child(3), html.m-on .listing-grid > .reveal:nth-child(3), html.m-on .team-grid > .reveal:nth-child(3),
  html.m-on .value-grid > .reveal:nth-child(3), html.m-on .stat-row > .reveal:nth-child(3), html.m-on .ll-results > .reveal:nth-child(3),
  html.m-on .why-points > .reveal:nth-child(3), html.m-on .switch-rail > .reveal:nth-child(3) { transition-delay: 0.12s; }
  html.m-on .hood-grid > .reveal:nth-child(4), html.m-on .listing-grid > .reveal:nth-child(4), html.m-on .team-grid > .reveal:nth-child(4),
  html.m-on .value-grid > .reveal:nth-child(4), html.m-on .stat-row > .reveal:nth-child(4), html.m-on .ll-results > .reveal:nth-child(4),
  html.m-on .why-points > .reveal:nth-child(4), html.m-on .switch-rail > .reveal:nth-child(4) { transition-delay: 0.18s; }
  html.m-on .hood-grid > .reveal:nth-child(5), html.m-on .listing-grid > .reveal:nth-child(5), html.m-on .team-grid > .reveal:nth-child(5),
  html.m-on .ll-results > .reveal:nth-child(5), html.m-on .switch-rail > .reveal:nth-child(5) { transition-delay: 0.24s; }
  html.m-on .hood-grid > .reveal:nth-child(6), html.m-on .listing-grid > .reveal:nth-child(6), html.m-on .team-grid > .reveal:nth-child(6),
  html.m-on .ll-results > .reveal:nth-child(6), html.m-on .switch-rail > .reveal:nth-child(6) { transition-delay: 0.3s; }
  /* Photographs settle from a hair larger as their card arrives. */
  html.m-on .reveal .card-media img, html.m-on .hood-card.reveal img, html.m-on .why-photo.reveal img, html.m-on .team-card.reveal .team-photo img {
    transform: scale(1.03); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.m-on .reveal.in .card-media img, html.m-on .hood-card.reveal.in img, html.m-on .why-photo.reveal.in img, html.m-on .team-card.reveal.in .team-photo img { transform: none; }
  /* style.css hover zooms must still win once the card is in. */
  html.m-on .hood-card.reveal.in:hover img { transform: scale(1.07); }
  html.m-on .listing-card.reveal.in:hover .card-media img { transform: scale(1.06); }

  /* ---- Hover ------------------------------------------------------------- */
  html.m-on .text-link {
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat; background-size: 0 1px; background-position: 0 100%;
    transition: color 0.25s, background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.m-on .text-link:hover { background-size: 100% 1px; }

  /* ---- Landlords: numbers and graphs ------------------------------------- */
  html.m-on .stat b, html.m-on .ll-bar b, html.m-on .ll-legend b, html.m-on .ll-table td.n { font-variant-numeric: tabular-nums; }
  html.m-on .ll-bar i { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); }
  html.m-on .ll-bars.m-in .ll-bar i { transform: none; }
  html.m-on .ll-bars .ll-bar:nth-of-type(2) i { transition-delay: 0.1s; }
  html.m-on .ll-bars .ll-bar:nth-of-type(3) i { transition-delay: 0.2s; }
  html.m-on .ll-bars .ll-bar:nth-of-type(5) i { transition-delay: 0.3s; }
  html.m-on .ll-bars .ll-bar:nth-of-type(6) i { transition-delay: 0.4s; }
  html.m-on .ll-bars .ll-bar:nth-of-type(7) i { transition-delay: 0.5s; }
  html.m-on .ll-table tbody tr { opacity: 0; transition: opacity 0.6s ease; }
  html.m-on .ll-table.m-in tbody tr { opacity: 1; }
  html.m-on .ll-table tbody tr:nth-child(2) { transition-delay: 0.1s; }
  html.m-on .ll-table tbody tr:nth-child(3) { transition-delay: 0.2s; }
  html.m-on .ll-legend li { opacity: 0; transition: opacity 0.6s ease; }
  html.m-on .ll-legend.m-in li { opacity: 1; }
  html.m-on .ll-legend li:nth-child(2) { transition-delay: 0.12s; }
  html.m-on .ll-legend li:nth-child(3) { transition-delay: 0.24s; }

  /* ---- Lightbox ---------------------------------------------------------- */
  html.m-on .lightbox.on { animation: m-fade-in 0.25s ease both; }
  html.m-on .lightbox.on img { animation: m-rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
}