/* ═══════════════════════════════════════════════════════════
   3D Card FX — edgy edition
   Additive layer for WaTo homepage.
   Mouse-tracking tilt, glowing edges, deep shadows,
   scroll-reveal entrances. JS companion in 3d-cards.js.
   ═══════════════════════════════════════════════════════════ */

/* ── Perspective containers ── */
.logo-band .grid,
.pain-grid,
.steps,
.svc-grid,
.hostband,
.compare {
  perspective: 900px;
  perspective-origin: 50% 50%;
}

/* ═══ GLOWING CARD BASE ═══
   Every card gets a luminous cyan edge-glow on hover
   and a deep, shifting shadow for real depth */

.logo-band a,
.pain,
.step,
.svc-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.15,.9,.3,1.1), box-shadow .4s ease;
  will-change: transform;
}

/* Cyan glow layer — hidden until hover */
.logo-band a::after,
.pain::after,
.step::after,
.svc-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(55,189,242,.4), rgba(18,152,207,.15), rgba(55,189,242,.3));
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
  filter: blur(8px);
}
.logo-band a:hover::after,
.pain:hover::after,
.step:hover::after,
.svc-card:hover::after {
  opacity: 1;
}

/* Deep shadow on hover — shifts with perspective */
.logo-band a:hover,
.pain:hover,
.step:hover,
.svc-card:hover {
  box-shadow:
    0 25px 50px rgba(17,24,39,.15),
    0 10px 20px rgba(55,189,242,.12),
    0 0 0 1px rgba(55,189,242,.2);
  border-color: rgba(55,189,242,.4);
}


/* ═══ LOGO BAND — flat at rest, pop on hover ═══ */
.logo-band a:hover {
  transform: translateY(-10px) scale(1.04) !important;
}


/* ═══ PAIN CARDS — flat at rest, pop on hover ═══ */
.pain:hover {
  transform: translateY(-10px) translateZ(20px) scale(1.03) !important;
}


/* ═══ STEPS — flat at rest, pop on hover ═══ */
.step:hover {
  transform: translateY(-12px) scale(1.04) !important;
}

/* step number badge gets a glow */
.step:hover .step-no {
  box-shadow: 0 0 20px rgba(55,189,242,.5), 0 0 40px rgba(55,189,242,.2);
  background: var(--cyan-dark);
  transition: background .3s ease, box-shadow .3s ease;
}


/* ═══ SERVICE / INDUSTRY CARDS — flat at rest, pop on hover ═══ */
.svc-card:hover {
  transform: translateY(-12px) scale(1.04) !important;
}

/* tag badge glow on hover */
.svc-card:hover .tag {
  box-shadow: 0 0 14px rgba(18,152,207,.5);
  transition: box-shadow .3s ease;
}

/* icon lift */
.svc-card:hover .svc-ico {
  background: rgba(55,189,242,.25);
  box-shadow: 0 6px 18px rgba(55,189,242,.25);
  transition: background .3s ease, box-shadow .3s ease;
}


/* ═══ WHOSTS — flat at rest, tilt on hover ═══ */
.hostband-text {
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.15,.9,.3,1.1);
}
.hostband-art {
  transform-origin: right center;
  transition: transform .5s cubic-bezier(.15,.9,.3,1.1);
}
.hostband:hover .hostband-text {
  transform: rotateY(3deg) translateZ(10px);
}
.hostband:hover .hostband-art {
  transform: rotateY(-3deg) rotateX(2deg) translateZ(10px) scale(1.05);
}
/* checklist items stagger in on hover */
.hostband .checklist li {
  transition: transform .3s ease, opacity .3s ease;
}
.hostband:hover .checklist li:nth-child(1) { transform: translateX(4px); transition-delay: 0s; }
.hostband:hover .checklist li:nth-child(2) { transform: translateX(7px); transition-delay: .06s; }
.hostband:hover .checklist li:nth-child(3) { transform: translateX(10px); transition-delay: .12s; }
.hostband:hover .checklist li:nth-child(4) { transform: translateX(13px); transition-delay: .18s; }


/* ═══ FAQ — lift + glow on open ═══ */
.faq details {
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  transform-origin: top center;
}
.faq details[open] {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 40px rgba(17,24,39,.10), 0 0 0 1px rgba(55,189,242,.15);
  border-color: rgba(55,189,242,.35);
}
.faq details[open] summary {
  color: var(--cyan-text);
}


/* ═══ COMPARE TABLE — row pop ═══ */
.compare > div {
  transition: transform .25s ease, background .25s ease;
}
.compare .us:hover {
  transform: translateX(4px) scale(1.01);
  background: #0d2d55;
}
.compare .them:hover {
  transform: translateX(-4px) scale(1.01);
  background: #f8f9fb;
}


/* ═══ SCROLL REVEAL — cards fly in from angles ═══ */
.tilt-reveal {
  opacity: 0;
  transition: opacity .7s ease, transform .7s cubic-bezier(.15,.9,.3,1);
}
/* different entrance angles per position */
.tilt-reveal.from-left   { transform: rotateY(12deg) translateX(-40px) translateZ(-30px); }
.tilt-reveal.from-right  { transform: rotateY(-12deg) translateX(40px) translateZ(-30px); }
.tilt-reveal.from-bottom { transform: rotateX(-10deg) translateY(50px) translateZ(-30px); }
.tilt-reveal.from-tilt   { transform: rotateX(8deg) rotateY(6deg) translateY(40px); }

.tilt-reveal.in {
  opacity: 1;
  transform: none;
}


/* ═══ MOUSE-GLOW — light follows cursor on cards ═══ */
.tilt-card {
  --mx: 50%;
  --my: 50%;
  overflow: hidden;
}
.tilt-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    600px circle at var(--mx) var(--my),
    rgba(55,189,242,.08),
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .3s ease;
}
.tilt-card:hover::before {
  opacity: 1;
}


/* ═══ PROMOBAR PILLS — subtle float ═══ */
.promobar span {
  transition: transform .3s ease, box-shadow .3s ease;
}
.promobar span:hover {
  transform: translateY(-3px);
}

/* ═══ TRIAGE BUTTONS — 3D press ═══ */
.triage-btn {
  transform: translateZ(0);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.triage-btn:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 12px 28px rgba(15,109,179,.2);
}
.triage-btn:active {
  transform: translateY(0) scale(.97);
}


/* ═══ TECH PILLS — pop on hover ═══ */
.techbar .tlist span {
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.techbar .tlist span:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 10px 24px rgba(55,189,242,.15);
  border-color: rgba(55,189,242,.4);
}


/* ═══ STATS — number pulse on scroll ═══ */
.trust .stat b {
  transition: transform .3s ease, text-shadow .3s ease;
}
.trust .stat:hover b {
  transform: scale(1.08);
  text-shadow: 0 4px 20px rgba(55,189,242,.25);
}


/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .logo-band a, .pain, .step, .svc-card,
  .hostband-text, .hostband-art,
  .faq details, .compare > div,
  .tilt-reveal {
    transform: none !important;
    transition: opacity .3s ease, box-shadow .2s ease !important;
  }
  .tilt-reveal { opacity: 1 !important; }
  .tilt-card::before { display: none; }
}

/* ═══ Mobile — dial back, keep some punch ═══ */
@media (max-width: 980px) {
  .logo-band a, .pain, .step, .svc-card {
    transform: none;
  }
  .logo-band a:hover, .pain:hover, .step:hover, .svc-card:hover {
    transform: translateY(-6px) scale(1.02);
  }
  .hostband-text, .hostband-art { transform: none; }
  .tilt-reveal.from-left, .tilt-reveal.from-right {
    transform: translateY(30px);
  }
}