/* Motion for thevct.co.uk: page openings, scroll reveals, the number plate shine and small hover
   touches. All of it is skipped for visitors who ask for reduced motion, and nothing is hidden
   unless motion.js has run (it adds .motion to <html>), so the page is complete without it. */

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

  /* ---- Page openings: hero content rises in, one line after another ---- */
  .hero-grid > div:first-child > *,
  .page-hero .wrap > * { animation: vct-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-grid > div:first-child > :nth-child(2), .page-hero .wrap > :nth-child(2) { animation-delay: .08s; }
  .hero-grid > div:first-child > :nth-child(3), .page-hero .wrap > :nth-child(3) { animation-delay: .16s; }
  .hero-grid > div:first-child > :nth-child(4), .page-hero .wrap > :nth-child(4) { animation-delay: .24s; }
  .hero-grid > div:first-child > :nth-child(5), .page-hero .wrap > :nth-child(5) { animation-delay: .32s; }
  .hero-grid > div:first-child > :nth-child(n+6), .page-hero .wrap > :nth-child(n+6) { animation-delay: .4s; }
  .hero-stage { animation: vct-rise-far 1.1s cubic-bezier(.2, .7, .2, 1) .45s both; }

  @keyframes vct-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes vct-rise-far { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }

  /* ---- Scroll reveals (only once motion.js is running) ---- */
  .motion .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms), transform .75s cubic-bezier(.2, .7, .2, 1) var(--d, 0ms);
  }
  .motion .reveal.reveal--zoom { transform: translateY(24px) scale(.97); }
  .motion .reveal.in { opacity: 1; transform: none; }

  /* ---- The number plate: a light sweeps across it to catch the eye ---- */
  .plate { position: relative; transition: box-shadow .25s ease, transform .25s ease; }
  .plate::after {
    content: "";
    position: absolute;
    top: -30%;
    bottom: -30%;
    left: -40%;
    width: 18%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .35) 30%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, .35) 70%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: vct-shine 5.5s cubic-bezier(.4, 0, .2, 1) 1.2s infinite;
  }
  .plate:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 4px #ffd307, inset 0 0 0 5.5px #1d1d1b, 0 0 0 5px rgba(255, 211, 7, .35), 0 22px 44px -18px rgba(0, 0, 0, .85);
  }
  .plate:focus-within::after { animation: none; opacity: 0; }  /* stay still while someone types */

  @keyframes vct-shine { 0% { left: -40%; } 24% { left: 125%; } 100% { left: 125%; } }

  /* ---- Small touches ---- */
  .btn { transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }

  .use, .post, .card, .mini, .rule, .role, .plan { transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .2s ease; }
  .use:hover, .post:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(16, 24, 40, .45); }
  .shot img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
  button.shot:hover img { transform: scale(1.015); }

  .top { transition: box-shadow .3s ease, background-color .3s ease; }
  .top.scrolled { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .7); }

  .faq details[open] > p { animation: vct-fade .35s ease both; }
  .faq summary:after { transition: transform .25s ease; }
  .faq details[open] summary:after { transform: rotate(180deg); }
  @keyframes vct-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

  #perVehicle.tick { animation: vct-tick .3s cubic-bezier(.2, .7, .2, 1); display: inline-block; }
  @keyframes vct-tick { from { opacity: .3; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}