/* ==========================================================================
   PoisTech motion layer
   Cross-document view transitions, scroll reveals and hover cinematics.
   Everything here is additive: with motion disabled the site is unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Cross-document view transitions
   Chromium runs a real morph between pages. Other browsers ignore the rule
   and fall back to the scripted fade in motion.js.
   -------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

/* The chrome stays put while the page body crossfades underneath it. */
.site-header { view-transition-name: pt-header; }
.site-footer { view-transition-name: pt-footer; }
.whatsapp-fab { view-transition-name: pt-fab; }

::view-transition-group(pt-header),
::view-transition-group(pt-footer),
::view-transition-group(pt-fab) {
  animation-duration: 320ms;
}

/* The outgoing page sinks and dims; the incoming page rises into place. */
::view-transition-old(root) {
  animation: pt-out 260ms cubic-bezier(.4, 0, .2, 1) both;
}
::view-transition-new(root) {
  animation: pt-in 420ms cubic-bezier(.16, .84, .34, 1) both;
}

@keyframes pt-out {
  from { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
  to   { opacity: 0; transform: scale(.985) translateY(-10px); filter: blur(3px); }
}
@keyframes pt-in {
  from { opacity: 0; transform: scale(1.012) translateY(18px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* A clicked product image is tagged pt-media by motion.js, and the detail
   page's main image carries the same name — so the photo physically flies
   from the card into the product page. */
.single-machine .pd-main { view-transition-name: pt-media; }

::view-transition-group(pt-media) {
  animation-duration: 480ms;
  animation-timing-function: cubic-bezier(.16, .84, .34, 1);
}
::view-transition-old(pt-media),
::view-transition-new(pt-media) {
  /* Let the two images cross-dissolve while the frame morphs. */
  mix-blend-mode: normal;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   2. Scripted fallback fade (browsers without cross-document transitions)
   -------------------------------------------------------------------------- */
body.pt-leaving main,
body.pt-leaving .page-hero {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

/* --------------------------------------------------------------------------
   3. First paint
   -------------------------------------------------------------------------- */
@keyframes pt-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
html.pt-motion body > main { animation: pt-enter 520ms cubic-bezier(.16, .84, .34, 1) both; }
html.pt-motion .hero-inner > * { animation: pt-enter 640ms cubic-bezier(.16, .84, .34, 1) both; }
html.pt-motion .hero-inner > *:nth-child(1) { animation-delay: 60ms; }
html.pt-motion .hero-inner > *:nth-child(2) { animation-delay: 140ms; }
html.pt-motion .hero-inner > *:nth-child(3) { animation-delay: 220ms; }
html.pt-motion .hero-inner > *:nth-child(4) { animation-delay: 300ms; }

/* Slow drift on the hero photograph. */
@keyframes pt-drift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(0, -1.2%, 0); }
}
html.pt-motion .hero-media img {
  animation: pt-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   4. Scroll reveals
   Elements marked data-reveal start hidden and are released by motion.js.
   The .pt-motion guard means they are always visible without JavaScript.
   -------------------------------------------------------------------------- */
html.pt-motion [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16, .84, .34, 1),
              transform .7s cubic-bezier(.16, .84, .34, 1);
}
html.pt-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Children of a revealed grid come in one after another. */
html.pt-motion [data-reveal].is-in > * {
  animation: pt-enter .62s cubic-bezier(.16, .84, .34, 1) both;
}
html.pt-motion [data-reveal].is-in > *:nth-child(1) { animation-delay: .00s; }
html.pt-motion [data-reveal].is-in > *:nth-child(2) { animation-delay: .07s; }
html.pt-motion [data-reveal].is-in > *:nth-child(3) { animation-delay: .14s; }
html.pt-motion [data-reveal].is-in > *:nth-child(4) { animation-delay: .21s; }
html.pt-motion [data-reveal].is-in > *:nth-child(5) { animation-delay: .28s; }
html.pt-motion [data-reveal].is-in > *:nth-child(6) { animation-delay: .35s; }
html.pt-motion [data-reveal].is-in > *:nth-child(7) { animation-delay: .42s; }
html.pt-motion [data-reveal].is-in > *:nth-child(8) { animation-delay: .49s; }
html.pt-motion [data-reveal].is-in > *:nth-child(9) { animation-delay: .56s; }

/* --------------------------------------------------------------------------
   5. Hover cinematics
   -------------------------------------------------------------------------- */
.card, .teaser, .news-card {
  transition: transform .38s cubic-bezier(.16, .84, .34, 1),
              box-shadow .38s cubic-bezier(.16, .84, .34, 1),
              border-color .38s ease;
}
.card:hover, .teaser:hover { transform: translateY(-6px); }

.card-media img, .teaser-img img { transition: transform .8s cubic-bezier(.16, .84, .34, 1); }
.card:hover .card-media img, .teaser:hover .teaser-img img { transform: scale(1.08); }

.btn { transition: background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }

.panel { transition: background .3s ease, transform .3s ease; }
.panel:hover { background: var(--bg-softer); }
.panel-icon { transition: transform .35s cubic-bezier(.16, .84, .34, 1), background .3s ease; }
.panel:hover .panel-icon { transform: scale(1.1) rotate(-6deg); }

.metric, .pillar { transition: background .3s ease; }
.metric:hover, .pillar:hover { background: var(--bg-softer); }

.gallery figure img { transition: transform .9s cubic-bezier(.16, .84, .34, 1); }
.gallery figure:hover img { transform: scale(1.1); }

/* Header condenses once you start scrolling. */
.site-header {
  transition: box-shadow .3s ease, padding .3s ease, background .3s ease;
}
.site-header.is-stuck {
  box-shadow: 0 6px 26px rgba(16, 32, 48, .09);
  backdrop-filter: saturate(1.1) blur(6px);
  background: rgba(255, 255, 255, .94);
}

/* Progress bar showing how far down the page you are. */
.pt-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--blue), #2f86d6);
  z-index: 400; pointer-events: none;
}

/* FAQ answers slide rather than snap. */
.faq details[open] .answer { animation: pt-enter .38s cubic-bezier(.16, .84, .34, 1) both; }

/* --------------------------------------------------------------------------
   6. Accessibility — one switch turns the whole layer off.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.pt-motion [data-reveal],
  html.pt-motion [data-reveal].is-in > *,
  html.pt-motion body > main,
  html.pt-motion .hero-inner > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  html.pt-motion .hero-media img { animation: none !important; }
  .card:hover, .teaser:hover, .btn:hover { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  .pt-progress { display: none; }
}