/* Shared motion. Short, eased, and switched off for people who ask the system for less motion. */
:root { --ease-out: cubic-bezier(.2,.7,.2,1); --ease-gear: cubic-bezier(.3,.7,.2,1); }

/* ---------- Logo gears ---------- */
.logo-motion { display: block; line-height: 0; }
.logo-motion .logo-compact { display: none; }
@media (max-width: 650px) {
  .logo-motion .logo-wide[data-media] { display: none; }
  .logo-motion .logo-compact { display: block; }
}
.logo-motion svg { display: block; overflow: visible; }
.logo-gear { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease-gear); }
/* Meshed gears turn in opposite directions; the small one turns further. */
a:is(:hover, :focus-visible) .logo-gear-big { transform: rotate(90deg); }
a:is(:hover, :focus-visible) .logo-gear-small { transform: rotate(-150deg); }
/* A short turn on first load so people notice the gears are alive (motion.js removes the class afterwards). */
.logo-intro .logo-gear-big { animation: gear-hello-big 1.1s .35s var(--ease-gear) backwards; }
.logo-intro .logo-gear-small { animation: gear-hello-small 1.1s .35s var(--ease-gear) backwards; }
@keyframes gear-hello-big { from { transform: rotate(-90deg); } to { transform: rotate(0); } }
@keyframes gear-hello-small { from { transform: rotate(150deg); } to { transform: rotate(0); } }

/* ---------- Scroll reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js-motion :is(.section-title, .entries > *, .popular-card, .photo-category, .attachment-explainer, .attachment-form,
    .request-copy, .form-card, .about-company-copy, .about-company-fact, .service article, .brand-ribbon,
    .shipment-collage, .machine-section, .results-panel, .sidebox, .help-row):not(.is-in) {
    opacity: 0; transform: translateY(18px);
  }
  .js-motion :is(.section-title, .entries > *, .popular-card, .photo-category, .attachment-explainer, .attachment-form,
    .request-copy, .form-card, .about-company-copy, .about-company-fact, .service article, .brand-ribbon,
    .shipment-collage, .machine-section, .results-panel, .sidebox, .help-row).is-in {
    /* backwards, not both: after the reveal, hover transforms must work again. */
    animation: reveal-up .6s var(--reveal-delay, 0ms) var(--ease-out) backwards;
  }
}
@keyframes reveal-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Hero: photo settles in, copy follows ---------- */
.spbox-frame .hero.hero-layered { background-image: none !important; }
.spbox-frame .hero > .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .spbox-frame .hero > .hero-bg { animation: hero-settle 2.2s var(--ease-out) both; }
  .js-motion .spbox-frame .hero-copy > * { animation: reveal-up .7s var(--ease-out) backwards; }
  .js-motion .spbox-frame .hero-copy > :nth-child(1) { animation-delay: .05s; }
  .js-motion .spbox-frame .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .js-motion .spbox-frame .hero-copy > :nth-child(3) { animation-delay: .2s; }
  .js-motion .spbox-frame .hero-copy > :nth-child(4) { animation-delay: .28s; }
  .js-motion .spbox-frame .hero-copy > :nth-child(5) { animation-delay: .34s; }
  .js-motion .spbox-frame .hero-copy > :nth-child(6) { animation-delay: .4s; }
}
@keyframes hero-settle { from { transform: scale(1.08); opacity: .4; } to { transform: none; opacity: 1; } }

/* ---------- Cards and links react to the pointer ---------- */
.spbox-frame .popular-card { transition: transform .25s var(--ease-out), border-color .2s, box-shadow .25s; }
.spbox-frame .popular-card:hover { box-shadow: 0 12px 26px #17171714; }
.spbox-frame .popular-photo, .spbox-frame .photo-category-image img { transition: transform .45s var(--ease-out); }
.spbox-frame .popular-card:hover .popular-photo { transform: scale(1.07) rotate(-2deg); }
.spbox-frame .photo-category-image { overflow: hidden; }
.spbox-frame a.photo-category:hover .photo-category-image img { transform: scale(1.05); }
.spbox-frame a.photo-category { transition: transform .25s var(--ease-out), box-shadow .2s, border-color .2s; }
.spbox-frame a.photo-category:hover { transform: translateY(-3px); }
.spbox-frame :is(.popular-card em, .entry em, .photo-category-arrow, .entry-help-links a) { display: inline-block; transition: transform .25s var(--ease-out); }
.spbox-frame :is(.popular-card:hover em, .entry:hover em, a.photo-category:hover .photo-category-arrow, .entry-help-links a:hover) { transform: translateX(4px); }
.spbox-frame .btn span[aria-hidden="true"] { display: inline-block; transition: transform .25s var(--ease-out); }
.spbox-frame .btn:hover span[aria-hidden="true"] { transform: translateX(4px); }
.spbox-frame .btn { transition: background-color .2s, border-color .2s, transform .2s var(--ease-out), box-shadow .2s; }
.spbox-frame .btn-red:hover { transform: translateY(-1px); box-shadow: 0 8px 18px #F1761840; }
.spbox-frame .btn:active { transform: translateY(0) scale(.98); }
.spbox-frame .shipment-tile img { transition: transform .45s var(--ease-out), filter .2s; }
.spbox-frame .shipment-tile { overflow: hidden; }
.spbox-frame .shipment-tile:hover img { transform: scale(1.04); }
/* Snap points would fight the continuous drift. */
.spbox-frame .brand-ribbon.is-drifting { scroll-snap-type: none; scroll-behavior: auto; }
.spbox-frame .ribbon-logo img { transition: transform .3s var(--ease-out), filter .3s; }
.spbox-frame .ribbon-logo:hover img { transform: scale(1.06); }
.spbox-frame .service article { transition: transform .25s var(--ease-out), box-shadow .25s; }
.spbox-frame .service article:hover { transform: translateY(-3px); box-shadow: 0 10px 22px #1414140f; }

/* ---------- Finder ---------- */
.finder .product-card { transition: transform .22s var(--ease-out), border-color .16s, box-shadow .22s; }
.finder .product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 26px #2021261a; }
.finder .photo-open img { transition: transform .45s var(--ease-out); }
.finder .product-card:hover .photo-open img { transform: scale(1.06); }
.finder .card-request .icon { transition: transform .25s var(--ease-out); }
.finder .card-request:hover .icon { transform: translateX(3px); }
/* Results arrive in a short cascade after every filter change. */
.finder .product-card { animation: card-in .38s var(--ease-out) backwards; }
.finder .product-card:nth-child(2) { animation-delay: 40ms; }
.finder .product-card:nth-child(3) { animation-delay: 80ms; }
.finder .product-card:nth-child(4) { animation-delay: 120ms; }
.finder .product-card:nth-child(5) { animation-delay: 160ms; }
.finder .product-card:nth-child(n+6) { animation-delay: 200ms; }
@keyframes card-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
#result-count.bump { animation: count-bump .32s var(--ease-out); display: inline-block; }
@keyframes count-bump { 40% { transform: scale(1.18); color: var(--brand); } }
.finder .machine-tile[aria-pressed="true"] { animation: tile-pick .35s var(--ease-out); }
@keyframes tile-pick { 40% { transform: scale(.95); } }
.finder .machine-tile:hover { transform: translateY(-2px); }
.finder .machine-tile { transition: border-color .17s, background-color .17s, box-shadow .17s, transform .2s var(--ease-out); }
.finder .check input, .finder .cat-row { transition: background-color .15s, color .15s; }

@media (prefers-reduced-motion: reduce) {
  .logo-gear, .logo-motion * { transition: none !important; animation: none !important; }
  .hero > .hero-bg, .finder .product-card, #result-count.bump, .finder .machine-tile { animation: none !important; }
  .finder .product-card, .finder .photo-open img, .finder .machine-tile { transition: none !important; transform: none !important; }
}