/* All motion is mobile only. Resting appearance comes from site.css. */
@media (max-width:900px) and (prefers-reduced-motion:no-preference) {
  :root { --motion-ease:cubic-bezier(.22,1,.36,1); --motion-spring:cubic-bezier(.2,.85,.3,1.12); }


  .site-header {transition:box-shadow 350ms ease,background 350ms ease}
  .site-header.motion-scrolled {box-shadow:0 8px 28px #0006;background:#080808}
  .hero-media > picture > img {animation:mobile-photo-drift 9s ease-in-out 1.5s infinite alternate}
  @keyframes mobile-photo-drift {from{transform:scale(1.015) translateY(0)}to{transform:scale(1.06) translateY(-5px)}}
  .hero-price {animation:mobile-price-breathe 4s ease-in-out 1.6s infinite}
  .hero-media .status-dot,.stock-status .status-dot {animation:mobile-stock-pulse 2.6s ease-in-out infinite}
  .calc-category-btn.is-active,.calc-product-option.is-selected,.quick-kg.is-active {animation:mobile-selection 350ms var(--motion-ease)}
  .form-status:not(:empty),.promo-result:not(:empty) {animation:mobile-dialog 350ms var(--motion-ease)}
  .toast {transition:opacity 300ms ease,transform 400ms var(--motion-spring)}
  @keyframes mobile-price-breathe {0%,100%{translate:0 0}50%{translate:0 -5px}}
  @keyframes mobile-stock-pulse {0%,100%{box-shadow:0 0 0 0 #d7803d00}50%{box-shadow:0 0 0 6px #d7803d25}}
  @keyframes mobile-selection {from{box-shadow:0 0 0 3px #d7803d40}to{box-shadow:0 0 0 0 #d7803d00}}
  .button,.icon-button,.primary-btn,.secondary-btn,.ghost-btn,.tab-btn,.calc-category-btn,.calc-product-option,.quick-kg,.mobile-action-bar a,.product-card,.choice {
    transition:scale 260ms var(--motion-spring),background 220ms ease,border-color 220ms ease,color 220ms ease,box-shadow 260ms ease;
  }
  .button:active,.icon-button:active,.primary-btn:active,.secondary-btn:active,.ghost-btn:active,.tab-btn:active,.calc-category-btn:active,.quick-kg:active,.mobile-action-bar a:active {scale:.965}
  .product-card:active,.calc-product-option:active,.choice:active {scale:.986;border-color:var(--accent)}
  .button .icon,.text-link .icon,.icon-button .icon {transition:transform 300ms var(--motion-ease)}
  .button:active .icon,.text-link:active .icon {transform:translateX(3px)}
  .menu-toggle[aria-expanded="true"] .icon {transform:rotate(90deg)}
  .faq-item>summary .icon,.map-details>summary .icon {transition:transform 380ms var(--motion-ease)}
  .faq-item[open]>summary .icon,.map-details[open]>summary .icon {transform:rotate(45deg)}
  .faq-item[data-motion-state="closed"]>summary .icon,.map-details[data-motion-state="closed"]>summary .icon {transform:rotate(0deg)}
  @keyframes mobile-backdrop-close {from{opacity:1}to{opacity:0}}
  dialog[open] {animation:mobile-dialog 480ms var(--motion-ease) both}
  dialog[open]::backdrop {animation:mobile-backdrop 380ms ease-out both}
  dialog[open][data-motion-closing]::backdrop {animation:mobile-backdrop-close 180ms ease-out both}
  .nav-dialog[open] {animation:mobile-drawer 540ms var(--motion-ease) both}
  .nav-dialog[open] .mobile-nav a {animation:mobile-nav-item 500ms var(--motion-ease) var(--nav-delay,100ms) both}
  .nav-dialog[open] .nav-contact {animation:mobile-nav-item 540ms var(--motion-ease) 420ms both}
  @keyframes mobile-dialog {from{opacity:0;transform:translateY(20px) scale(.965)}to{opacity:1;transform:none}}
  @keyframes mobile-backdrop {from{opacity:0}to{opacity:1}}
  @keyframes mobile-drawer {from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
  @keyframes mobile-nav-item {from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
}
/* A 320px screen needs the long contact link to remain inside its column. */
@media(max-width:350px) {
  .contact-number {font-size:25px;gap:6px}
  .secondary-number {font-size:21px}
  .hero h1 {font-size:72px}
}
@media print { body::after{display:none} }