/* Extras for index2.html: 3D hero canvas + WhatsApp contact form */
/* Hero background — same 3D scene as index.html */
.hero-atmosphere {
  background:
    radial-gradient(1200px 700px at 85% -10%, rgba(147, 51, 234, 0.22), transparent 60%),
    radial-gradient(900px 600px at -10% 40%, rgba(236, 72, 153, 0.12), transparent 60%);
}
.hero-atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(192, 132, 252, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(192, 132, 252, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 75%);
}
.hero-atmosphere::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--bg, #09090f));
}
#hero3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.95; }
.hero .hero-grid { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { #hero3d { display: none; } }
html[data-motion="off"] #hero3d { display: none; }
/* Contact — WhatsApp form */
.restored-contact .container { max-width: 620px; }
.wa-form {
  position: relative; display: grid; gap: 16px; padding: 34px; border-radius: 26px;
  background: linear-gradient(160deg, rgba(30, 14, 50, 0.8), rgba(8, 4, 14, 0.9));
  border: 1px solid rgba(192, 132, 252, 0.38);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.wa-form::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; z-index: -1; filter: blur(8px); opacity: 0.55;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.45), transparent 40%, transparent 60%, rgba(147, 51, 234, 0.45));
}
.wa-field input, .wa-field textarea {
  width: 100%; padding: 16px 18px; border-radius: 14px; color: #fff; font: inherit; font-size: 0.95rem; outline: none; resize: vertical;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(192, 132, 252, 0.16);
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.wa-field textarea { min-height: 140px; }
.wa-field input::placeholder, .wa-field textarea::placeholder { color: #7f7399; }
.wa-field input:focus, .wa-field textarea:focus { border-color: #c084fc; box-shadow: 0 0 0 4px rgba(147, 51, 234, 0.18); background: rgba(255, 255, 255, 0.06); }
.wa-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border: 0; border-radius: 999px;
  font: inherit; font-weight: 600; font-size: 0.95rem; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #9333ea, #ec4899);
  box-shadow: 0 10px 30px -8px rgba(147, 51, 234, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.35s, box-shadow 0.35s;
}
.wa-submit:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(236, 72, 153, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.wa-submit .icon { width: 20px; height: 20px; color: #25d366; }
.wa-hint { margin: 0; font-size: 0.8rem; color: #7f7399; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Descriptive internal links help visitors explore the main services. */
.service-card-link,
.project-learn-link {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: auto;
  padding-top: 22px;
  color: var(--service-ink, #d0b5ff);
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
}
.service-card-link:hover,
.service-card-link:focus-visible,
.project-learn-link:hover,
.project-learn-link:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.project-cta .project-learn-link {
  display: block;
  margin-top: 18px;
  padding-top: 0;
  color: #d5bcff;
}

/* ---------- Smoother, staggered section reveals ---------- */
.motion-ready [data-reveal] {
  transition:
    opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  filter: blur(0);
}
.motion-ready [data-reveal].reveal-pending {
  filter: blur(6px);
  transform: perspective(1100px) translate3d(0, 56px, 0) rotateX(0) scale(0.985);
}
.motion-ready [data-reveal="left"].reveal-pending {
  transform: translate3d(-70px, 30px, 0);
}
.motion-ready [data-reveal="right"].reveal-pending {
  transform: translate3d(70px, 30px, 0);
}
.motion-ready [data-reveal="tilt"].reveal-pending {
  transform: perspective(1100px) translate3d(0, 64px, 0) rotateX(10deg) scale(0.97);
}
.motion-ready [data-reveal="scene"].reveal-pending {
  transform: perspective(1400px) translate3d(0, 70px, 0) rotateX(8deg) scale(0.95);
}
/* section titles lead the cascade a touch faster */
.motion-ready h2[data-reveal],
.motion-ready .section-heading[data-reveal],
.motion-ready .reference-section-heading[data-reveal] {
  transition-duration: 0.8s, 1s, 0.8s;
}
@media (prefers-reduced-motion: reduce) {
  .motion-ready [data-reveal] { filter: none !important; transition: none !important; }
}

/* services / grid cards: slower, more visible entrance */
.motion-ready .services-grid [data-reveal],
.motion-ready .values-grid [data-reveal],
.motion-ready .tips-grid [data-reveal],
.motion-ready .pricing-deck [data-reveal] {
  transition-duration: 1.1s, 1.35s, 1.05s;
}
.motion-ready .services-grid [data-reveal].reveal-pending {
  transform: perspective(1100px) translate3d(0, 72px, 0) rotateX(12deg) scale(0.94);
  filter: blur(8px);
}