/* Premium motion: an Apple-like layer for the home hero and every bento grid.
 *
 * One easing everywhere (a long expo-out: fast start, long gentle settle, no bounce), short
 * travel (18 to 24px), a soft blur that sharpens into focus, and a 90ms stagger. Loaded by
 * _Layout; assets/premium-motion.js adds the scroll parts. Nothing here runs under reduced
 * motion, and the hero headline never starts invisible: it is the page's LCP element, so it
 * only rises and sharpens. */
:root { --pm-ease: cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: no-preference) {
  /* ---- Home hero: the load sequence ---- */
  .energy-hero-video { animation: pm-settle 2.4s var(--pm-ease) both; transform-origin: 70% 80%; }
  .energy-hero-copy > .hero-std-badge { animation: pm-rise 1.1s var(--pm-ease) .15s both; }
  .energy-hero-copy > h1 { animation: pm-focus 1.2s var(--pm-ease) .24s both; }
  .energy-hero-copy > .energy-hero-lead { animation: pm-rise 1.1s var(--pm-ease) .36s both; }
  .energy-hero-copy > .energy-hero-cta { animation: pm-rise 1.1s var(--pm-ease) .48s both; }
  .energy-stats > div { animation: pm-rise 1.1s var(--pm-ease) both; }
  .energy-stats > div:nth-child(1) { animation-delay: .62s; }
  .energy-stats > div:nth-child(2) { animation-delay: .72s; }

  /* ---- Bento grids: revealed in reading order as they scroll in ---- */
  .bento-cell { transition: opacity 1s var(--pm-ease), transform 1.1s var(--pm-ease), clip-path 1.2s var(--pm-ease), filter 1s var(--pm-ease);
    transition-delay: calc(var(--pm-i, 0) * 90ms); }
  .bento-text.pm-wait { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  .bento-img.pm-wait { clip-path: inset(10% 10% 10% 10% round 24px); transform: scale(1.06); filter: saturate(.85); }
  .bento-img { clip-path: inset(0 0 0 0 round 0); }

  /* ---- Floating "Book a Demo" tab ----
     Pages that show it from the start: it glides in from the edge and sharpens, a beat after
     the page settles. The home page (data-after) reveals it once the hero has gone, on the
     same long ease. Hover widens it into the page and lifts its icon a touch. The three-class
     selectors match styles.css, which this file loads after. */
  .btn.btn-primary.demo-tab { transition: transform .9s var(--pm-ease), opacity .6s var(--pm-ease), visibility .6s, filter .9s var(--pm-ease),
      padding .6s var(--pm-ease), background-color .2s ease, border-color .2s ease; }
  .btn.btn-primary.demo-tab[data-after=""] { animation: pm-tab-in 1.1s var(--pm-ease) 1.2s both; }
  .btn.btn-primary.demo-tab[data-after]:not([data-after=""]):not(.is-visible) { filter: blur(6px); }
  .btn.btn-primary.demo-tab .wui-icon { transition: transform .6s var(--pm-ease); }
  @media (hover: hover) and (pointer: fine) {
    .btn.btn-primary.demo-tab:hover { padding-left: 15px; }
    .btn.btn-primary.demo-tab:hover .wui-icon { transform: translateY(-2px); }
  }

  /* Hover: the photo leans in, slowly. Pointer devices only. */
  @media (hover: hover) and (pointer: fine) {
    .bento-img.pm-in:hover { transform: scale(1.015); transition: transform 1.4s var(--pm-ease); }
  }
}

@keyframes pm-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes pm-rise { from { opacity: 0; transform: translateY(18px); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes pm-tab-in { from { opacity: 0; transform: translateX(100%); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes pm-focus { from { transform: translateY(18px); filter: blur(10px); } to { transform: none; filter: blur(0); } }