/* ============================================================================
   OneStone Corporation — shared, additive animation + mobile-safety layer.
   Loaded on every public page via includes/head-meta.php. Purely additive:
   does not redefine any existing layout/colour rules from theme.css or the
   per-page <style> blocks, only adds motion + small robustness fixes.
   ========================================================================== */

/* ---------- Mobile overflow safety net ---------- */
html{ overflow-x:hidden; }
body{ overflow-x:hidden; max-width:100%; }
img, iframe, video, svg{ max-width:100%; }

/* Long unbroken words/URLs inside admin/CMS-entered text (blog body, product
   descriptions, about copy, addresses, spec values) can otherwise force
   horizontal overflow on narrow screens even with the safety net above. */
.blog-post-body, .pd-desc, .about-copy p, .contact-info-card p,
.foot-contact-row span, .contact-line span, .pd-specs .row span,
.contact-form input, .contact-form textarea,
.page-hero h1, .page-hero p, .blog-post-header h1,
.blog-card h3, .blog-card p, .product-card h3, .product-card p{
  overflow-wrap:break-word; word-break:break-word;
}

@media (max-width:600px){
  .contact-map iframe{ height:220px; }
}

/* ---------- Scroll reveal (fade + slight rise) ---------- */
@media (prefers-reduced-motion: no-preference){
  .os-reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
  .os-reveal.os-revealed{ opacity:1; transform:translateY(0); }
}

/* ---------- Button micro-interaction ---------- */
.btn:active, .btn-accent:active, .btn-navy:active, .btn-gold:active, .btn-glass:active{
  transform:scale(.97);
}

/* ---------- Extra card hover polish where theme.css doesn't already have it ---------- */
.blog-card, .cert-card, .contact-info-card, .info-card{
  transition:transform .3s ease, box-shadow .3s ease;
}
.blog-card:hover, .cert-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 34px rgba(0,0,0,.08);
}
.gallery-grid img{ transition:transform .4s ease; }
.gallery-grid a:hover img, .gallery-grid img:hover{ transform:scale(1.045); }

/* ---------- WhatsApp button: subtle professional pulse ---------- */
@keyframes osWaPulse{
  0%   { box-shadow:0 10px 26px rgba(37,211,102,.35), 0 0 0 0 rgba(37,211,102,.45); }
  70%  { box-shadow:0 10px 26px rgba(37,211,102,.35), 0 0 0 14px rgba(37,211,102,0); }
  100% { box-shadow:0 10px 26px rgba(37,211,102,.35), 0 0 0 0 rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: no-preference){
  .os-wa-pulse{ animation:osWaPulse 2.8s ease-out infinite; }
}
.os-wa-pulse:hover{ animation-play-state:paused; transform:scale(1.06); transition:transform .2s ease; }