/* ============================================================
   motion.css — high-end spring motion layer.
   Additive only: no existing spacing, type or colour token is
   redefined here. Loaded last so it can extend transitions.

   Springs are real physics curves (mass 1) expressed as CSS
   linear() ramps — the same solver Framer Motion uses:
     entrance  stiffness 170 / damping 26  (no overshoot, 705ms)
     hover     stiffness 400 / damping 28  (soft overshoot, 515ms)
     press     stiffness 520 / damping 30  (crisper, 455ms)
   ============================================================ */

:root {
  --spring-entrance: linear(0, 0.0227, 0.0783, 0.1523, 0.2349, 0.3193, 0.4015, 0.4787, 0.5495, 0.6132, 0.6699, 0.7196, 0.7629, 0.8003, 0.8323, 0.8597, 0.8829, 0.9025, 0.919, 0.9329, 0.9445, 0.9542, 0.9622, 0.9689, 0.9744, 0.979, 0.9828, 0.9859, 0.9885, 0.9906, 0.9923, 0.9937, 0.9949, 0.9958, 0.9966, 0.9973, 0.9978, 0.9982, 0.9985, 0.9988, 0.999);
  --spring-hover: linear(0, 0.0293, 0.1035, 0.2049, 0.3196, 0.4373, 0.5505, 0.6543, 0.7459, 0.8238, 0.8878, 0.9387, 0.9776, 1.006, 1.0254, 1.0376, 1.044, 1.046, 1.0448, 1.0416, 1.037, 1.0317, 1.0263, 1.0211, 1.0163, 1.012, 1.0084, 1.0054, 1.003, 1.0012, 0.9998, 0.9989, 0.9983, 0.998, 0.9979, 0.9979, 0.9981, 0.9983, 0.9985, 0.9988, 0.999);
  --spring-press: linear(0, 0.03, 0.1062, 0.2111, 0.3304, 0.4532, 0.5714, 0.6798, 0.775, 0.8554, 0.9208, 0.9717, 1.0096, 1.0359, 1.0526, 1.0615, 1.0643, 1.0627, 1.058, 1.0513, 1.0437, 1.0358, 1.0282, 1.0211, 1.0149, 1.0097, 1.0054, 1.002, 0.9996, 0.9978, 0.9967, 0.9961, 0.9959, 0.996, 0.9962, 0.9967, 0.9971, 0.9977, 0.9982, 0.9986, 0.999);

  --spring-entrance-dur: 705ms;
  --spring-hover-dur: 515ms;
  --spring-press-dur: 455ms;

  /* Elevation used only while an element is lifted under the cursor. */
  --lift-shadow: 0 14px 34px rgba(32, 36, 31, 0.13), 0 2px 6px rgba(32, 36, 31, 0.06);
  --lift-shadow-dark: 0 18px 44px rgba(0, 0, 0, 0.34), 0 2px 6px rgba(0, 0, 0, 0.18);
  --lift-shadow-sm: 0 8px 20px rgba(32, 36, 31, 0.14);
}

/* ---- 1. Hero: fade-in + upward slide on load, spring-eased, staggered ---- */
/* motion.js promotes the hero's [data-rise] nodes to [data-hero-rise] before
   main.js can observe them, so the hero plays on load instead of on scroll. */
.hero [data-hero-rise] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 520ms var(--spring-entrance),
    transform var(--spring-entrance-dur) var(--spring-entrance);
  transition-delay: var(--rise-delay, 0ms);
  will-change: opacity, transform;
}
.hero[data-motion-in] [data-hero-rise] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.hero[data-motion-in] [data-hero-rise][data-motion-settled] { will-change: auto; }

/* Scroll reveals below the fold get the same spring feel. */
[data-rise] {
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 500ms var(--spring-entrance),
    transform var(--spring-entrance-dur) var(--spring-entrance);
}
[data-rise][data-shown] { transform: translate3d(0, 0, 0); }

/* ---- 2. Cards: gentle scale-up with shadow elevation on hover ---- */
.pricing-card,
.callout,
.testimonial,
.gallery-link .photo-placeholder {
  transition:
    transform var(--spring-hover-dur) var(--spring-hover),
    box-shadow var(--spring-hover-dur) var(--spring-hover);
}

.pricing-card:hover,
.pricing-card:focus-within {
  transform: translate3d(0, -5px, 0) scale(1.012);
  box-shadow: var(--lift-shadow);
}
.pricing-card[data-tone="dark"]:hover,
.pricing-card[data-tone="dark"]:focus-within {
  box-shadow: var(--lift-shadow-dark);
}

.callout:hover,
.testimonial:hover {
  transform: translate3d(0, -2px, 0) scale(1.006);
  box-shadow: var(--lift-shadow-sm);
}

.gallery-link:hover .photo-placeholder,
.gallery-link:focus-visible .photo-placeholder {
  transform: translate3d(0, -4px, 0) scale(1.014);
  box-shadow: var(--lift-shadow);
}
/* The existing inner image zoom keeps its own timing but gains the spring. */
.photo-placeholder img {
  transition: transform var(--spring-hover-dur) var(--spring-hover);
}

/* Step rows: a quiet lateral nudge, no elevation. */
.step {
  transition: transform var(--spring-hover-dur) var(--spring-hover);
}
.step:hover { transform: translate3d(3px, 0, 0); }

/* ---- 3. Buttons: primary CTA micro-interaction ---- */
.btn {
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--spring-hover-dur) var(--spring-hover),
    box-shadow var(--spring-hover-dur) var(--spring-hover);
  transform: translate3d(0, 0, 0) scale(1);
}
.btn:hover { transform: translate3d(0, -2px, 0) scale(1.018); }
.btn-accent:hover,
.btn-onDark:hover { box-shadow: var(--lift-shadow-sm); }

.btn:active {
  transform: translate3d(0, 0, 0) scale(0.964);
  box-shadow: none;
  transition-duration: var(--spring-press-dur);
  transition-timing-function: var(--spring-press);
}
.btn:focus-visible { transform: translate3d(0, -1px, 0) scale(1.012); }
.btn[disabled],
.btn:disabled { transform: none; box-shadow: none; }

/* Submit button while the request is in flight: settles back, stays calm. */
.request-form button[type="submit"]:disabled { transform: none; }

/* Small chrome controls get the press feel without the lift. */
.lang-btn {
  transition:
    background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease),
    transform var(--spring-press-dur) var(--spring-press);
}
.lang-btn:active { transform: scale(0.92); }

/* Form fields: focus lift, colour-safe. */
input, textarea, select {
  transition:
    border-color 160ms var(--ease),
    background-color 160ms var(--ease),
    transform var(--spring-hover-dur) var(--spring-hover);
}
.field:focus-within input,
.field:focus-within textarea,
.field:focus-within select { transform: translate3d(0, -1px, 0); }

/* ---- 4. Accessibility fallback ---- */
@media (prefers-reduced-motion: reduce) {
  .hero [data-hero-rise],
  .hero[data-motion-in] [data-hero-rise] {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
  [data-rise],
  [data-rise][data-shown] { transform: none; }

  .pricing-card,
  .callout,
  .testimonial,
  .gallery-link .photo-placeholder,
  .photo-placeholder img,
  .step,
  .btn,
  .lang-btn,
  input, textarea, select {
    transition-property: background, background-color, color, border-color, box-shadow;
    transition-duration: 120ms;
    transition-timing-function: var(--ease);
  }
  .pricing-card:hover,
  .pricing-card:focus-within,
  .callout:hover,
  .testimonial:hover,
  .gallery-link:hover .photo-placeholder,
  .gallery-link:focus-visible .photo-placeholder,
  .gallery-link:hover .photo-placeholder img,
  .gallery-link:focus-visible .photo-placeholder img,
  .step:hover,
  .btn:hover,
  .btn:active,
  .btn:focus-visible,
  .lang-btn:active,
  .field:focus-within input,
  .field:focus-within textarea,
  .field:focus-within select {
    transform: none;
  }
  /* Elevation is kept as a static, instant cue so hover is still legible. */
}