/* ================================================================
   UniqTrix - CARD MOTION (structure + night colours)
   Entrance : cards rise into place as they scroll into view (js/motion.js puts .uq-pre on them, then .uq-in when they arrive)
   Hover    : cards lift, glow, and their icon pops
   The day colours of the glow live in css/day.css (body.day-mode sets --uq-glow / --uq-edge); nothing day-specific is in this file.
   Nothing here can leave a card hidden: print, reduced-motion and a 6 s failsafe (until the script has proved it is running) all show everything.
   ================================================================ */

:root {
  --uq-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --uq-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --uq-lift:   -8px;
  --uq-glow:   0 22px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(123,108,246,0.38), 0 0 40px rgba(123,108,246,0.16);
  --uq-edge:   rgba(123,108,246,0.5);
}

/* ── entrance ── */
@keyframes uq-rise  { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes uq-left  { from { opacity: 0; transform: translate3d(-48px, 0, 0); }            to { opacity: 1; transform: none; } }
@keyframes uq-right { from { opacity: 0; transform: translate3d(48px, 0, 0); }             to { opacity: 1; transform: none; } }
@keyframes uq-zoom  { from { opacity: 0; transform: scale(0.94); }                          to { opacity: 1; transform: none; } }
@keyframes uq-pop   { 0% { opacity: 0; transform: scale(0.84); } 62% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: none; } }
@keyframes uq-safe  { to { opacity: 1; transform: none; } }

/* waiting to arrive (only ever set by the script, so with scripts off nothing is hidden) */
html.uq-js .uq-pre                     { opacity: 0; transform: translate3d(0, 34px, 0) scale(0.97); transition: none !important; }
html.uq-js .uq-pre[data-uq="left"]     { transform: translate3d(-48px, 0, 0); }
html.uq-js .uq-pre[data-uq="right"]    { transform: translate3d(48px, 0, 0); }
html.uq-js .uq-pre[data-uq="zoom"]     { transform: scale(0.94); }
html.uq-js .uq-pre[data-uq="pop"]      { transform: scale(0.84); }
/* failsafe: until the script confirms it is working (html.uq-boot is removed the moment the observer first answers, normally within 200 ms) every card shows after 6 s */
html.uq-boot .uq-pre                   { animation: uq-safe 0.01s linear 6s forwards; }

/* arriving */
.uq-in                                 { animation: uq-rise 0.72s var(--uq-ease) var(--uq-d, 0ms) both; will-change: transform, opacity; }
.uq-in[data-uq="left"]                 { animation-name: uq-left; }
.uq-in[data-uq="right"]                { animation-name: uq-right; }
.uq-in[data-uq="zoom"]                 { animation-name: uq-zoom; }
.uq-in[data-uq="pop"]                  { animation-name: uq-pop; animation-duration: 0.62s; animation-timing-function: var(--uq-ease); }

/* sideways entrances need free space beside the page: on phones, tablets and small laptops a card waiting off to the side would make the page
   wider than the screen (a sideways scroll / zoomed-out page on a phone), so there it rises like the others */
@media (max-width: 1359px) {
  html.uq-js .uq-pre[data-uq="left"],
  html.uq-js .uq-pre[data-uq="right"]  { transform: translate3d(0, 34px, 0) scale(0.97); }
  .uq-in[data-uq="left"],
  .uq-in[data-uq="right"]              { animation-name: uq-rise; }
}

/* ── hover: one family for every card (zero specificity, so a card with its own tuned hover keeps it) ── */
@media (hover: hover) and (pointer: fine) {
  :where(.service-card, .portfolio-card, .blog-card, .team-card, .why-card, .testi-card, .audit-card, .card-3d, .qc-card,
         .contact-info-item, .benefit-card, .value-card, .mv-card, .hs-step, .emp-testi-card, .stat-item, .ip-card,
         .seo-score-card, .seo-cat-block, .whois-header, .whois-section, .biz-hours, .contact-map, .ceo-badge, .jr-card,
         .cv-upload-wrap, .ceo-spotlight, .store-card, .store-step) {
    transition: transform 0.42s var(--uq-ease), box-shadow 0.42s ease, border-color 0.35s ease, background-color 0.35s ease;
  }
  :where(.service-card, .portfolio-card, .blog-card, .team-card, .why-card, .testi-card, .audit-card, .card-3d, .qc-card,
         .contact-info-item, .benefit-card, .value-card, .mv-card, .hs-step, .emp-testi-card, .stat-item, .ip-card,
         .seo-score-card, .seo-cat-block, .whois-header, .whois-section, .biz-hours, .contact-map, .ceo-badge, .jr-card,
         .cv-upload-wrap, .ceo-spotlight, .store-card, .store-step):hover {
    transform: translate3d(0, var(--uq-lift), 0);
    box-shadow: var(--uq-glow);
    border-color: var(--uq-edge);
  }
  /* big panels lift less than a small card */
  :where(.ceo-spotlight, .contact-map) { --uq-lift: -5px; }
  /* the icon inside a hovered card pops */
  :where(.service-card, .why-card, .benefit-card, .value-card, .mv-card, .qc-card, .contact-info-item, .audit-card,
         .blog-card, .portfolio-card, .hs-step, .ip-card, .seo-cat-block, .stat-item) [class*="-icon"] {
    transition: transform 0.5s var(--uq-spring);
  }
  :where(.service-card, .why-card, .benefit-card, .value-card, .mv-card, .qc-card, .contact-info-item, .audit-card,
         .blog-card, .portfolio-card, .hs-step, .ip-card, .seo-cat-block, .stat-item):hover [class*="-icon"] {
    transform: translateY(-3px) scale(1.12) rotate(-6deg);
  }
}

/* touch screens have no hover: a card dips a little while it is pressed */
@media (hover: none) {
  :where(.service-card, .portfolio-card, .blog-card, .team-card, .why-card, .testi-card, .card-3d, .qc-card,
         .contact-info-item, .benefit-card, .value-card, .mv-card, .hs-step, .emp-testi-card, .ip-card, .seo-cat-block, .store-card, .store-step) {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  :where(.service-card, .portfolio-card, .blog-card, .team-card, .why-card, .testi-card, .card-3d, .qc-card,
         .contact-info-item, .benefit-card, .value-card, .mv-card, .hs-step, .emp-testi-card, .ip-card, .seo-cat-block, .store-card, .store-step):active {
    transform: scale(0.985);
  }
}

/* ── safety ── */
@media (prefers-reduced-motion: reduce) {
  html.uq-js .uq-pre { opacity: 1 !important; transform: none !important; animation: none !important; }
  .uq-in { animation: none !important; }
  :where(.service-card, .portfolio-card, .blog-card, .team-card, .why-card, .testi-card, .audit-card, .card-3d, .qc-card,
         .contact-info-item, .benefit-card, .value-card, .mv-card, .hs-step, .emp-testi-card, .stat-item, .ip-card, .store-card, .store-step):hover { transform: none; }
}
@media print {
  html.uq-js .uq-pre { opacity: 1 !important; transform: none !important; animation: none !important; }
  .uq-in { animation: none !important; }
}