/* Phase 18: calm, guided motion for the Dolfin tyre finder. */
.dolfin-finder-motion { max-width: 66rem; overflow: clip; }

.dolfin-finder-motion .dolfin-finder__header { position: relative; isolation: isolate; margin-bottom: 1.5rem; padding: clamp(2.25rem, 5vw, 4rem) clamp(1.3rem, 6vw, 4.5rem); overflow: hidden; border-radius: .7rem; color: #fff; text-align: center; background: linear-gradient(130deg, #051923, color-mix(in srgb, var(--dolfin-blue, #0079b8) 64%, #051923)); box-shadow: 0 1.6rem 3.6rem rgb(1 31 46 / 16%); }
.dolfin-finder-motion .dolfin-finder__header::before,
.dolfin-finder-motion .dolfin-finder__header::after { position: absolute; z-index: -1; border: 1px solid rgb(255 255 255 / 12%); border-radius: 50%; content: ""; }
.dolfin-finder-motion .dolfin-finder__header::before { width: 21rem; height: 21rem; top: -15rem; left: -6rem; }
.dolfin-finder-motion .dolfin-finder__header::after { width: 26rem; height: 26rem; right: -15rem; bottom: -19rem; box-shadow: 0 0 0 4rem rgb(255 255 255 / 2%); }
.dolfin-finder__eyebrow { display: block; margin-bottom: .8rem; color: #f26a21; font-size: .68rem; font-weight: 800; letter-spacing: .19em; }
.dolfin-finder-motion .dolfin-finder__header h1 { margin: 0 0 .65rem; color: #fff; font-size: clamp(2.3rem, 5vw, 4rem); }
.dolfin-finder-motion .dolfin-finder__header p { max-width: 43rem; margin: 0 auto; color: rgb(255 255 255 / 72%); line-height: 1.65; }
.dolfin-finder__route { display: flex; width: min(13rem, 48%); margin: 1.5rem auto 0; align-items: center; }
.dolfin-finder__route i { height: 2px; flex: 1; background: linear-gradient(90deg, #29a8e8, #f26a21); transform: scaleX(0); transition: transform 950ms cubic-bezier(.16, 1, .3, 1) 550ms; }
.dolfin-finder__route i:first-child { transform-origin: right; }
.dolfin-finder__route i:last-child { transform-origin: left; }
.dolfin-finder__route b { width: .65rem; height: .65rem; border: 2px solid #f26a21; border-radius: 50%; opacity: 0; transform: scale(.5); transition: opacity 450ms ease 900ms, transform 650ms cubic-bezier(.16, 1, .3, 1) 900ms; }

.dolfin-finder-motion .dolfin-finder__disclaimer { position: relative; padding: 1rem 1.2rem 1rem 1.5rem; overflow: hidden; border-radius: .65rem; box-shadow: 0 .7rem 1.8rem rgb(102 76 0 / 7%); }
.dolfin-finder-motion .dolfin-finder__disclaimer::before { position: absolute; inset: 0 auto 0 0; width: .24rem; background: linear-gradient(180deg, #e0a400, #f26a21); content: ""; transform: scaleY(0); transform-origin: top; transition: transform 900ms cubic-bezier(.16, 1, .3, 1) 260ms; }
.dolfin-finder-motion .dolfin-finder__form { position: relative; gap: 1.15rem; padding: clamp(1.35rem, 3.5vw, 2.25rem); border-radius: .7rem; background: linear-gradient(145deg, #eef8fc, #fff); box-shadow: 0 1.3rem 3rem rgb(1 39 57 / 9%); }
.dolfin-finder-motion .dolfin-finder__field { transition: transform 320ms ease; }
.dolfin-finder-motion .dolfin-finder__field:focus-within { transform: translateY(-.16rem); }
.dolfin-finder-motion .dolfin-finder__field label { transition: color 250ms ease; }
.dolfin-finder-motion .dolfin-finder__field:focus-within label { color: #0079b8; }
.dolfin-finder-motion :is(.dolfin-finder__input, .dolfin-finder__select) { min-height: 2.8rem; transition: border-color 250ms ease, box-shadow 300ms ease, background-color 300ms ease; }
.dolfin-finder-motion .dolfin-finder__field:focus-within :is(.dolfin-finder__input, .dolfin-finder__select) { background: #fff; box-shadow: 0 .7rem 1.4rem rgb(0 93 133 / 10%); }
.dolfin-finder-motion .dolfin-finder__btn { min-height: 3.25rem; background: linear-gradient(110deg, #0079b8, #159edb); box-shadow: 0 .85rem 1.7rem rgb(0 105 155 / 20%); transition: background 260ms ease, transform 360ms cubic-bezier(.16, 1, .3, 1), box-shadow 360ms ease; }
.dolfin-finder-motion .dolfin-finder__btn:hover { transform: translateY(-.18rem); box-shadow: 0 1.1rem 2rem rgb(0 105 155 / 28%); }

.dolfin-finder-motion .dolfin-finder__results { padding-top: .75rem; }
.dolfin-finder-motion .dolfin-finder__results > h2 { display: flex; align-items: center; gap: 1rem; font-size: clamp(1.5rem, 2.5vw, 2rem); }
.dolfin-finder-motion .dolfin-finder__results > h2::after { width: 5rem; height: 2px; background: linear-gradient(90deg, #0079b8, #f26a21); content: ""; transform: scaleX(0); transform-origin: left; transition: transform 950ms cubic-bezier(.16, 1, .3, 1) 320ms; }
.dolfin-finder-motion .dolfin-card { border-radius: .7rem; box-shadow: 0 .85rem 2.1rem rgb(1 39 57 / 7%); transition: opacity 700ms ease, transform 950ms cubic-bezier(.16, 1, .3, 1), box-shadow 400ms ease; }
.dolfin-finder-motion .dolfin-card:hover { transform: translateY(-.4rem); box-shadow: 0 1.4rem 2.8rem rgb(0 94 139 / 14%); }
.dolfin-finder-motion .dolfin-card__compat { background: linear-gradient(145deg, #eff9fd, #fff); }
.dolfin-finder-motion .dolfin-finder__no-match { padding: clamp(2rem, 5vw, 3.5rem); border: 1px dashed #bfd8e4; border-radius: .7rem; background: linear-gradient(145deg, #f2fafd, #fff); box-shadow: 0 1.1rem 2.6rem rgb(1 39 57 / 7%); }
.dolfin-finder-motion .dolfin-finder__support { box-shadow: 0 .8rem 1.8rem rgb(1 39 57 / 6%); }
.dolfin-finder-motion .dolfin-finder__support a { transition: color 250ms ease, transform 320ms ease; }
.dolfin-finder-motion .dolfin-finder__support a:hover { display: inline-block; transform: translateY(-.1rem); }

.dolfin-finder-motion-ready [data-dolfin-finder-reveal] { opacity: 0; transform: translateY(2rem); }
.dolfin-finder-motion-ready [data-dolfin-finder-reveal="hero"] { transform: translateY(1.25rem) scale(.993); transition: opacity 950ms ease, transform 1250ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-finder-motion-ready [data-dolfin-finder-reveal="notice"] { transform: translateX(-1.5rem); transition: opacity 720ms ease, transform 900ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-finder-motion-ready [data-dolfin-finder-reveal="form"] { transform: translateY(2rem) scale(.99); transition: opacity 850ms ease, transform 1100ms cubic-bezier(.16, 1, .3, 1), box-shadow 400ms ease; }
.dolfin-finder-motion-ready [data-dolfin-finder-reveal="results"] { transition: opacity 850ms ease, transform 1100ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-finder-motion-ready [data-dolfin-finder-reveal].dolfin-finder-is-visible { opacity: 1; transform: none; }
.dolfin-finder-motion-ready [data-dolfin-finder-reveal="hero"].dolfin-finder-is-visible .dolfin-finder__route i { transform: scaleX(1); }
.dolfin-finder-motion-ready [data-dolfin-finder-reveal="hero"].dolfin-finder-is-visible .dolfin-finder__route b { opacity: 1; transform: scale(1); }
.dolfin-finder-motion-ready [data-dolfin-finder-reveal="notice"].dolfin-finder-is-visible::before { transform: scaleY(1); }
.dolfin-finder-motion-ready [data-dolfin-finder-field] { opacity: 0; transform: translateY(.9rem); transition: opacity 580ms ease, transform 760ms cubic-bezier(.16, 1, .3, 1); transition-delay: calc(280ms + var(--finder-field-delay, 0ms)); }
.dolfin-finder-motion-ready .dolfin-finder-is-visible [data-dolfin-finder-field] { opacity: 1; transform: none; }
.dolfin-finder-motion-ready [data-dolfin-finder-result] { opacity: 0; transform: perspective(58rem) translateY(2.3rem) rotateX(4deg); transform-origin: bottom; transition-delay: calc(280ms + var(--finder-result-delay, 0ms)); }
.dolfin-finder-motion-ready .dolfin-finder-is-visible [data-dolfin-finder-result] { opacity: 1; transform: none; }
.dolfin-finder-motion-ready [data-dolfin-finder-reveal="results"].dolfin-finder-is-visible > h2::after { transform: scaleX(1); }
.dolfin-finder-motion-ready [data-dolfin-finder-no-match] { opacity: 0; transform: scale(.985); transition: opacity 650ms 260ms ease, transform 850ms 260ms cubic-bezier(.16, 1, .3, 1); }
.dolfin-finder-motion-ready .dolfin-finder-is-visible [data-dolfin-finder-no-match] { opacity: 1; transform: none; }

@media (max-width: 35rem) {
  .dolfin-finder-motion .dolfin-finder__header { padding-inline: 1.1rem; }
  .dolfin-finder-motion .dolfin-finder__form { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dolfin-finder-motion *,
  .dolfin-finder-motion *::before,
  .dolfin-finder-motion *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .dolfin-finder-motion-ready [data-dolfin-finder-reveal],
  .dolfin-finder-motion-ready [data-dolfin-finder-field],
  .dolfin-finder-motion-ready [data-dolfin-finder-result],
  .dolfin-finder-motion-ready [data-dolfin-finder-no-match] { opacity: 1; transform: none; }
}