/* ══════════════ Flush Plumbing — motion layer (additive only) ══════════════ */

/* ---------- keyframes ---------- */
@keyframes fx-up   { from { opacity:0; transform:translateY(26px) } to { opacity:1; transform:none } }
@keyframes fx-in   { from { opacity:0 }                             to { opacity:1 } }
@keyframes fx-left { from { opacity:0; transform:translateX(-32px) } to { opacity:1; transform:none } }
@keyframes fx-right{ from { opacity:0; transform:translateX(32px) }  to { opacity:1; transform:none } }
@keyframes fx-pop  { from { opacity:0; transform:scale(.92) }        to { opacity:1; transform:none } }
@keyframes fx-bob  { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-7px) } }
@keyframes fx-ribbon { from { opacity:0; transform:translateY(14px) } to { opacity:1; transform:none } }
@keyframes fx-shine {
  0%   { transform:translateX(-120%) skewX(-18deg) }
  100% { transform:translateX(240%)  skewX(-18deg) }
}

/* ---------- hero entrance stagger ---------- */
.hero .eyebrow,
.hero h1,
.hero .sub,
.hero .hero-actions,
.hero .hero-chips,
.hero .oval-a,
.hero .oval-b,
.hero .hero-logo,
.hero .badge-book {
  animation: fx-up 1.2s cubic-bezier(.22,.68,0,1) both;
}
.hero .eyebrow      { animation-delay:.08s }
.hero h1            { animation-delay:.25s }
.hero .sub          { animation-delay:.42s }
.hero .hero-actions { animation-delay:.6s }
.hero .hero-chips   { animation-delay:.78s }
.hero .oval-a       { animation:fx-pop 1.35s cubic-bezier(.22,.68,0,1) .45s both }
.hero .oval-b       { animation:fx-pop 1.35s cubic-bezier(.22,.68,0,1) .68s both }
.hero .hero-logo    { animation:fx-right 1.5s cubic-bezier(.22,.68,0,1) .9s both }
.hero .badge-book   { animation:fx-pop .9s cubic-bezier(.34,1.56,.64,1) 1.4s both }

/* keep the gentle float on the badge once it has landed */
.hero .badge-book { will-change: transform }
.hero-art:hover .oval-a,
.hero-art:hover .oval-b { transition: transform .9s cubic-bezier(.22,.68,0,1) }

/* hours ribbon items */
.ribbon.fx-in > .shell > span { animation: fx-ribbon 1.05s cubic-bezier(.22,.68,0,1) both }
.ribbon.fx-in > .shell > span:nth-child(2) { animation-delay:.18s }
.ribbon.fx-in > .shell > span:nth-child(3) { animation-delay:.36s }

/* ---------- scroll reveal base ---------- */
.fx { opacity:0 }
.fx.fx-in { animation: fx-up 1.25s cubic-bezier(.22,.68,0,1) both }
.fx-l.fx-in { animation-name: fx-left }
.fx-r.fx-in { animation-name: fx-right }
.fx-p.fx-in { animation-name: fx-pop }
.fx-f.fx-in { animation-name: fx-in }

/* ---------- hover polish ---------- */
.svc, .proc-card, .price, .tile, .stat, .town, .way, .map-card, .hours-card, .coupon {
  transition: transform .55s cubic-bezier(.22,.68,0,1), box-shadow .55s ease, filter .55s ease;
}
.svc:hover, .proc-card:hover, .price:hover, .stat:hover, .way:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 44px -22px rgba(4, 20, 45, .38);
}
.svc:hover .ic { transform: rotate(-6deg) scale(1.08) }
.svc .ic { transition: transform .6s cubic-bezier(.34,1.4,.64,1) }
.svc .num { transition: opacity .55s ease, transform .55s ease }
.svc:hover .num { opacity:1; transform: translateY(-4px) }

.tile:hover, .frame:hover, .hanger-shot:hover, .proc-hub:hover { transform: translateY(-5px) }
.tile img, .frame img, .proc-hub img, .hanger-shot img { transition: transform 1.05s cubic-bezier(.22,.68,0,1) }
.tile:hover img, .frame:hover img, .proc-hub:hover img, .hanger-shot:hover img { transform: scale(1.06) }

.chip { transition: transform .45s ease, background-color .45s ease }
.chip:hover { transform: translateY(-3px) }

.town:hover { transform: translateY(-3px) }

/* buttons: lift + light sweep */
.btn { position:relative; overflow:hidden; transition: transform .4s ease, box-shadow .4s ease, filter .4s ease }
.btn:hover { transform: translateY(-2px) }
.btn:active { transform: translateY(0) scale(.985) }
.btn::after {
  content:""; position:absolute; inset:0 auto 0 0; width:38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
  transform: translateX(-120%) skewX(-18deg); pointer-events:none;
}
.btn:hover::after { animation: fx-shine 1.1s ease }
.btn svg { transition: transform .45s ease }
.btn:hover svg { transform: translateX(3px) }

/* nav links underline */
.nav-links a { position:relative }
.nav-links a::after {
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s cubic-bezier(.22,.68,0,1);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left }

/* ---------- stats count-up ---------- */
.stat b { display:inline-block }

/* ---------- process connector draw ---------- */
.proc-wrap { position:relative }
.proc-card { position:relative }
.proc-card::before {
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px;
  background: linear-gradient(180deg, var(--blue-600, #1361c9), transparent);
  border-radius:3px; transform: scaleY(0); transform-origin: top;
  transition: transform 1.35s cubic-bezier(.22,.68,0,1);
  opacity:.85;
}
.proc-card.fx-in::before { transform: scaleY(1) }

/* ---------- FAQ accordion ---------- */
.qa { transition: box-shadow .5s ease, background-color .5s ease }
.qa summary { transition: color .4s ease }
.qa[open] > .a { animation: fx-up .7s cubic-bezier(.22,.68,0,1) both }

/* ---------- form fields ---------- */
.field input, .field textarea, .field select, .enq input, .enq textarea, .enq select {
  transition: box-shadow .4s ease, border-color .4s ease, transform .4s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  transform: translateY(-1px);
}

/* ---------- footer ---------- */
.foot-grid .fx-in { animation-duration: 1.2s }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx, .fx.fx-in, .hero *, .ribbon.fx-in > .shell > span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .btn:hover::after { animation: none }
  .proc-card::before { transform: scaleY(1) }
}