/*
 * tuning-database.co.uk, v3: motion on every page (js/motion.js marks what
 * moves; without the script nothing here applies). Transform and opacity only.
 */

/* The soft light behind the hero and the page heads. */
.v3-lit {
  position: relative;
  isolation: isolate;
}

.v3-light {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.v3-light.is-on {
  opacity: 1;
}

:root {
  --v3-light-a: 0.16;
}

:root[data-theme="light"] {
  --v3-light-a: 0.11;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --v3-light-a: 0.11;
  }
}

/* The screenshot under the hero rises into place once. */
.js .home-hero__shot {
  animation: v3-rise 0.7s var(--ease-out) both;
}

@keyframes v3-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* A card lifts a little under the pointer. */
@media (hover: hover) {
  .home-plan,
  .plan,
  .home-service__find {
    transition: transform var(--dur-2) var(--ease-out);
  }

  /* .js raises these above the arrival rule (.js .reveal.is-in, site.css). */
  .js .home-plan:hover,
  .js .plan:hover,
  .js .home-service__find:hover {
    transform: translateY(-3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v3-light {
    display: none;
  }

  .js .home-hero__shot {
    animation: none;
  }

  .js .home-plan:hover,
  .js .plan:hover,
  .js .home-service__find:hover {
    transform: none;
  }
}