/*
 * Motion and hover effects. Everything here is an addition on top of the design: pages look the
 * same at rest. All of it is switched off for visitors who ask their device to reduce motion.
 */

/* ---------- Page openings: hero / banner text fades up ---------- */
@keyframes amuk-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
.amuk-intro > * { animation: amuk-fade-up .7s cubic-bezier(.2, .7, .2, 1) both; }
.amuk-intro > :nth-child(2) { animation-delay: .08s; }
.amuk-intro > :nth-child(3) { animation-delay: .16s; }
.amuk-intro > :nth-child(4) { animation-delay: .24s; }
.amuk-intro > :nth-child(n+5) { animation-delay: .32s; }

/* ---------- Scrolling: content fades up as it comes into view (classes added by site.js) ---------- */
.amuk-js .amuk-reveal {
  opacity: 0;
  translate: 0 28px;
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1) var(--amuk-delay, 0ms),
              translate .7s cubic-bezier(.2, .7, .2, 1) var(--amuk-delay, 0ms),
              transform .25s ease, box-shadow .25s ease, filter .15s;
}
.amuk-js .amuk-reveal.amuk-in { opacity: 1; translate: none; }

/* ---------- Hire item cards (catalogue + "Recommended with this") ---------- */
article[data-amuk-item] { transition: transform .25s ease, box-shadow .25s ease; }
article[data-amuk-item]:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(0, 0, 0, .14); }
article[data-amuk-item] .img-btn { overflow: hidden; }
article[data-amuk-item] .img-btn > .amuk-photo,
article[data-amuk-item] .img-btn > span:first-child { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
article[data-amuk-item]:hover .img-btn > .amuk-photo { transform: scale(1.06); }
article[data-amuk-item]:hover .img-btn > span:first-child:not(.amuk-photo) { transform: scale(1.08); }

/* Product page photo zooms gently inside the flightcase lid. */
.amuk-item-media .lid { overflow: hidden; }
.amuk-item-media .lid > .amuk-photo, .amuk-item-media .lid > span:first-child { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.amuk-item-media .case:hover .lid > .amuk-photo { transform: scale(1.05); }
.amuk-item-media .case:hover .lid > span:first-child:not(.amuk-photo) { transform: scale(1.06); }

/* Kit list thumbnails in the flightcase. */
[data-amuk-rows] .amuk-photo { transition: transform .4s ease; }
[data-amuk-rows] > div:hover .amuk-photo { transform: scale(1.08); }

/* ---------- Home page: service cards and category tiles lift ---------- */
#services .case { transition: transform .3s ease; }
#services .case:hover { transform: translateY(-6px); }
.tile:hover { transform: translateY(-5px); }
.tile svg { transition: transform .3s ease; }
.tile:hover svg { transform: scale(1.12); }

/* ---------- Buttons ---------- */
.btn-accent svg, .btn-dark svg { transition: transform .2s ease; }
.btn-accent:hover svg:last-child, .btn-dark:hover svg:last-child { transform: translateX(4px); }
.amuk-case-btn:hover svg { transform: none; }
.btn-add, .btn-accent, .btn-dark, .pill, .step, .btn-line { transition: background-color .15s, color .15s, border-color .15s, filter .15s, transform .1s; }
.btn-add:active, .btn-accent:active, .btn-dark:active, .pill:active, .step:active, .btn-line:active { transform: scale(.97); }

/* "Add to flightcase" pulses when pressed (class added by hire.js). */
@keyframes amuk-added {
  0% { box-shadow: 0 0 0 0 var(--accent); }
  100% { box-shadow: 0 0 0 10px transparent; }
}
.amuk-added { animation: amuk-added .6s ease-out; background: var(--accent) !important; color: #0b0b0b !important; }

/* Flightcase count pops when it goes up (class added by site.js). */
@keyframes amuk-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
.amuk-bump { animation: amuk-bump .45s cubic-bezier(.3, 1.6, .5, 1); }
[data-amuk-bar] strong[data-amuk-count] { display: inline-block; }

/* Footer links fade to the accent colour (header menu hover lives in wp-adjust.css). */
footer a { transition: color .15s; }

/* ---------- Confetti / streamer cannon burst (banner illustration; triggered by site.js) ---------- */
@keyframes amuk-confetti-out {
  0%   { transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)) scale(.15) rotate(-160deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes amuk-streamer-out {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to   { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes amuk-cannon-kick {
  0%   { transform: none; }
  12%  { transform: translate(-7px, 7px); }
  45%  { transform: none; }
}
.amuk-promo-art .p { transform-box: fill-box; transform-origin: center; }
.amuk-promo-art.amuk-burst .p { animation: amuk-confetti-out .95s cubic-bezier(.12, .8, .3, 1) var(--d, 0ms) both; }
.amuk-promo-art.amuk-burst .s { animation: amuk-streamer-out .9s cubic-bezier(.25, .7, .3, 1) .05s both; }
.amuk-promo-art.amuk-burst .c { animation: amuk-cannon-kick .5s ease-out; }
.amuk-promo-media { cursor: pointer; }

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
  .amuk-intro > *, .amuk-added, .amuk-bump { animation: none !important; }
  .amuk-promo-art .p, .amuk-promo-art .s, .amuk-promo-art .c { animation: none !important; }
  .amuk-js .amuk-reveal { opacity: 1; translate: none; transition: none; }
  article[data-amuk-item]:hover, #services .case:hover, .tile:hover { transform: none; }
  article[data-amuk-item]:hover .img-btn > *, .amuk-item-media .case:hover .lid > *, [data-amuk-rows] > div:hover .amuk-photo, .tile:hover svg, .btn-accent:hover svg, .btn-dark:hover svg { transform: none !important; }
}