/* =====================================================================
   Motion layer — shared animations and micro-interactions for every page.
   Loaded by views/partials/header.php; scroll reveals driven by js/motion.js.
   Rules: transform/opacity only (no layout shift), progressive enhancement
   (nothing is hidden unless motion.js ran), reduced-motion respected.
   ===================================================================== */
:root{
  --mo-ease: cubic-bezier(.22,.61,.36,1);
  --mo-ease-out: cubic-bezier(.16,1,.3,1);
  --mo-orange: #ff7f00;
  --mo-ring: 0 0 0 4px rgba(255,127,0,.18);
}

/* ---------- Smooth in-page navigation (sticky header aware) ---------- */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}
[id]{ scroll-margin-top:96px; }

/* ---------- Keyboard focus (all interactive elements) ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
.btn:focus-visible, [tabindex]:focus-visible{
  outline:3px solid rgba(255,127,0,.55); outline-offset:3px; border-radius:6px;
}

/* =====================================================================
   1. Scroll reveal (elements are tagged by motion.js)
   ===================================================================== */
html [data-reveal]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .65s var(--mo-ease) var(--reveal-delay,0ms),
             transform .65s var(--mo-ease-out) var(--reveal-delay,0ms);
}
html [data-reveal="fade"]{ transform:none; }
html [data-reveal].is-revealed{ opacity:1; transform:none; }
@media (max-width:700px){
  html [data-reveal]{ transform:translate3d(0,14px,0); }
}
@media print{
  html [data-reveal]{ opacity:1 !important; transform:none !important; }
}

/* =====================================================================
   2. Hero entrances (CSS only, play once on load)
   Headings move but never start invisible, so LCP is not delayed.
   ===================================================================== */
@keyframes mo-rise   { from{ transform:translate3d(0,18px,0); } to{ transform:none; } }
@keyframes mo-fade-up{ from{ opacity:0; transform:translate3d(0,16px,0); } to{ opacity:1; transform:none; } }
@keyframes mo-fade-down{ from{ opacity:0; transform:translate3d(0,-8px,0); } to{ opacity:1; transform:none; } }
@keyframes mo-float  { 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(0,-10px,0); } }
@keyframes mo-drift  { 0%{ transform:translate3d(-4%,-3%,0) scale(1); } 100%{ transform:translate3d(5%,4%,0) scale(1.12); } }
@keyframes mo-pulse  { 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.12); opacity:.8; } }

@media (prefers-reduced-motion: no-preference){
  /* Product / legal / blog heroes */
  .pp-hero h1, .b-hero h1                 { animation:mo-rise .8s var(--mo-ease-out) both; }
  .pp-hero .pp-eyebrow, .b-hero .b-tag    { animation:mo-fade-up .6s var(--mo-ease) both; }
  .pp-hero .pp-lead, .b-hero .b-lead,
  .b-hero .b-meta                         { animation:mo-fade-up .7s var(--mo-ease) .15s both; }
  .pp-hero .pp-actions, .b-hero .b-filters{ animation:mo-fade-up .7s var(--mo-ease) .28s both; }
  .b-cover                                { animation:mo-fade-up .8s var(--mo-ease) .2s both; }

  /* Industry pages (Healthcare, Hotel, School, Real Estate) — template hero */
  .hero-wrap h1                           { animation:mo-rise .8s var(--mo-ease-out) both; }
  .hero-wrap h1 + p, .hero-wrap p.mt-4    { animation:mo-fade-up .7s var(--mo-ease) .15s both; }
  .hero-wrap .btn                         { animation:mo-fade-up .7s var(--mo-ease) .3s both; }

  /* Products page hero */
  .hero .hero-grid h1                     { animation:mo-rise .8s var(--mo-ease-out) both; }
  .hero .hero-grid h1 ~ p                 { animation:mo-fade-up .7s var(--mo-ease) .15s both; }
  .hero .hero-cta                         { animation:mo-fade-up .7s var(--mo-ease) .28s both; }
  .hero-art .art-target                   { animation:mo-float 7s ease-in-out 1s infinite; }
  .hero-art .art-pie                      { animation:mo-float 8s ease-in-out 1.6s infinite reverse; }

  /* Home hero illustration: gentle float after the template's entrance */
  .page-header.dc-five .image-wrapper img { animation:mo-float 8s ease-in-out 1.2s infinite; }
}

/* =====================================================================
   3. Buttons — lift, shadow, press feedback (labels, sizes, colours unchanged)
   ===================================================================== */
.btn, .ch-btn, .pp-btn, .b-btn, .btn-primary, .btn-pricing, .btn-notify{
  transition:transform .25s var(--mo-ease), box-shadow .25s var(--mo-ease),
             background-color .25s ease, color .25s ease, border-color .25s ease;
  will-change:auto;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover, .ch-btn:hover, .pp-btn:hover, .b-btn:hover,
  .btn-primary:hover, .btn-pricing:hover, .btn-notify:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(255,127,0,.28);
  }
  .btn-light:hover, .pp-btn-ghost:hover{ box-shadow:0 10px 22px rgba(20,22,26,.12); }
}
.btn:active, .ch-btn:active, .pp-btn:active, .b-btn:active,
.btn-primary:active, .btn-pricing:active, .btn-notify:active{
  transform:translateY(0) scale(.98);
  box-shadow:0 4px 10px rgba(255,127,0,.2);
  transition-duration:.08s;
}

/* =====================================================================
   4. Header & navigation
   ===================================================================== */
.ch-header{ transition:box-shadow .35s var(--mo-ease), background-color .35s ease; }
.ch-header.is-scrolled{ box-shadow:0 10px 30px rgba(20,22,26,.07); }

/* Hover underline grows from the left; the active page keeps its underline */
@media (min-width:961px){
  .ch-menu > li > a::after{
    content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px;
    background:var(--mo-orange); border-radius:2px;
    transform:scaleX(0); transform-origin:left center;
    transition:transform .3s var(--mo-ease);
  }
  .ch-menu > li > a:hover::after, .ch-menu > li > a:focus-visible::after,
  .ch-menu > li.active > a::after{ transform:scaleX(1); }
  .ch-has-sub > a .fa-chevron-down{ transition:transform .25s var(--mo-ease); }
  .ch-has-sub:hover > a .fa-chevron-down, .ch-has-sub:focus-within > a .fa-chevron-down{ transform:rotate(180deg); }
  .ch-sub li a{ transition:background-color .2s ease, color .2s ease, padding-left .2s var(--mo-ease); }
  .ch-sub li a:hover{ padding-left:24px; }
}
.ch-logo img{ transition:transform .4s var(--mo-ease); }
@media (hover:hover){ .ch-logo:hover img{ transform:rotate(-8deg) scale(1.06); } }
.ch-toggle i{ transition:transform .3s var(--mo-ease); }
.ch-toggle[aria-expanded="true"] i{ transform:rotate(90deg); }

/* Footer micro-interactions */
.ch-links a i{ transition:transform .2s var(--mo-ease); }
.ch-links a:hover i{ transform:translateX(4px); }
.ch-social a, .ch-badge{ transition:transform .25s var(--mo-ease), background-color .25s ease, border-color .25s ease, color .25s ease; }
@media (hover:hover){ .ch-social a:hover, .ch-badge:hover{ transform:translateY(-3px); } }

/* =====================================================================
   5. Cards — elevation, border glow, icon micro-interactions
   ===================================================================== */
.pp-card, .pp-module, .pp-step, .pp-related a,
.soft-box, .features-block .inner-box, .ai-card{
  transition:transform .35s var(--mo-ease), box-shadow .35s var(--mo-ease), border-color .35s ease, background-color .35s ease;
}
.pp-ai-card{ transition:transform .35s var(--mo-ease), border-color .35s ease, background-color .35s ease; }
.pp-icon, .icon-box, .feature-icon, .icon-tile, .features-block .icon img, .features-block .icon i{
  transition:transform .4s var(--mo-ease), background-color .3s ease, color .3s ease;
}
@media (hover:hover) and (pointer:fine){
  .pp-card:hover, .pp-module:hover, .pp-step:hover{
    transform:translateY(-5px);
    border-color:rgba(255,127,0,.35);
    box-shadow:0 20px 44px rgba(20,22,26,.08);
  }
  .pp-ai-card:hover{ transform:translateY(-5px); border-color:rgba(255,176,102,.45); background:rgba(255,255,255,.07); }
  .pp-related a:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(20,22,26,.07); }
  .ai-card:hover{ transform:translateY(-4px); border-color:rgba(255,127,0,.35); box-shadow:0 16px 36px rgba(20,22,26,.07); }
  .features-block .inner-box:hover{ transform:translateY(-5px); }

  .pp-card:hover .pp-icon, .pp-module:hover .pp-icon, .pp-ai-card:hover .pp-icon,
  .soft-box:hover .icon-box, .soft-box:hover .feature-icon,
  .card:hover .icon-tile, .ai-card:hover .icon-tile,
  .features-block:hover .icon img, .features-block:hover .icon i{
    transform:translateY(-2px) scale(1.08) rotate(-4deg);
  }

  /* Featured product cards on the home page: soft gradient glow */
  .featured-product .inner-box:hover{
    box-shadow:0 0 0 1px rgba(255,190,120,.9), 0 22px 46px rgba(120,40,0,.28);
  }
  /* Blog cards: title colour shift (image zoom/elevation already in blog.css) */
  .b-card h2 a, .b-card h3 a{ transition:color .25s ease; }
  .b-more i{ transition:transform .25s var(--mo-ease); }
  .b-card:hover .b-more i{ transform:translateX(4px); }
}
.view-link .arrow{ transition:transform .25s var(--mo-ease), background-color .25s ease, color .25s ease; }
.card:hover .view-link .arrow{ transform:translateX(3px); }

/* Module feature rows: subtle highlight */
.pp-features li{ transition:background-color .2s ease; border-radius:6px; }
@media (hover:hover){ .pp-features li:hover{ background:rgba(255,127,0,.04); } }

/* =====================================================================
   6. AI-inspired accents (subtle, slow, GPU-only)
   ===================================================================== */
.pp-ai, .pp-vision, .pp-hero{ position:relative; overflow:hidden; isolation:isolate; }
.pp-ai::before, .pp-vision::before, .pp-hero::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  width:60%; aspect-ratio:1; border-radius:50%;
}
.pp-ai::before{ top:-30%; left:-15%; background:radial-gradient(circle, rgba(255,127,0,.16) 0%, rgba(255,127,0,0) 65%); }
.pp-vision::before{ top:-50%; right:-20%; background:radial-gradient(circle, rgba(124,58,237,.14) 0%, rgba(124,58,237,0) 65%); }
.pp-hero::before{ top:-40%; right:-15%; width:55%; background:radial-gradient(circle, rgba(255,127,0,.12) 0%, rgba(255,127,0,0) 65%); }
.pp-ai > *, .pp-vision > *, .pp-hero > *{ position:relative; z-index:1; }
@media (prefers-reduced-motion: no-preference){
  .pp-ai::before, .pp-vision::before, .pp-hero::before{ animation:mo-drift 16s ease-in-out infinite alternate; }
  .ai-eyebrow i, .pp-ai .pp-eyebrow i{ display:inline-block; animation:mo-pulse 3s ease-in-out infinite; }
}
/* Gradient border shimmer on the AI principles box */
.pp-principles{ background-image:linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.05)); }

/* =====================================================================
   7. FAQ, details and alerts
   ===================================================================== */
.pp-faq details, .b-faq details{ transition:border-color .25s ease, box-shadow .25s ease; }
.pp-faq details[open], .b-faq details[open]{ border-color:rgba(255,127,0,.35); box-shadow:0 10px 26px rgba(20,22,26,.05); }
@media (prefers-reduced-motion: no-preference){
  .pp-faq details[open] > p, .b-faq details[open] > p,
  .b-toc-mobile[open] > .b-toc{ animation:mo-fade-down .35s var(--mo-ease) both; }
  .alert, .invalid-feedback, .text-danger.small{ animation:mo-fade-down .45s var(--mo-ease) both; }
}
.b-toc a, .pp-crumbs a, .b-crumbs a{ transition:background-color .2s ease, color .2s ease; }

/* =====================================================================
   8. Forms — focus transitions (fields, names and handlers unchanged)
   ===================================================================== */
.form-control, .modal-custom-input, .form-control-custom,
.contact-section input, .contact-section textarea, .modal input, .modal textarea{
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.form-control:focus, .modal-custom-input:focus, .form-control-custom:focus,
.contact-section input:focus, .contact-section textarea:focus, .modal input:focus, .modal textarea:focus{
  border-color:var(--mo-orange) !important;
  box-shadow:var(--mo-ring) !important;
  outline:none;
}
.form-control:focus:invalid:not(:placeholder-shown),
.modal-custom-input:focus:invalid:not(:placeholder-shown){
  border-color:#d93025 !important; box-shadow:0 0 0 4px rgba(217,48,37,.14) !important;
}

/* =====================================================================
   9. Reduced motion — keep everything visible, remove movement
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html [data-reveal]{ opacity:1 !important; transform:none !important; }
  .wow{ visibility:visible !important; animation:none !important; }
}