/* =========================================================================
   VIVEK DIGITAL — Contact Page Animation System
   Scoped exclusively to body.page-id-336 (Contact). Never loads elsewhere.
   Uses the site's own brand tokens (Astra blue palette) rather than the
   About page's gold system, so it reads as native to this page.
   Tokens: blue #046BD2, blue-dark #045CB4, ink #1E293B, border #D1D5DB.
   No content, text, layout, colors, or functionality are altered — only
   opacity/transform/box-shadow/background transitions are added.
   ========================================================================= */

body.page-id-336 {
  --ct-blue: #046BD2;
  --ct-blue-dark: #045CB4;
  --ct-ink: #1E293B;
  --ct-border: #D1D5DB;
  --ct-bg-soft: #F0F5FA;
  --ct-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- base reveal primitive (opacity/transform only, zero layout shift) ---- */
body.page-id-336 .ct-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ct-ease), transform 0.7s var(--ct-ease);
  transition-delay: var(--ct-delay, 0ms);
  will-change: opacity, transform;
}
body.page-id-336 .ct-reveal.ct-in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
   1) PAGE LOAD — eyebrow, heading, supporting text (hero band)
   ========================================================================= */
body.page-id-336 section.elementor-element-126d1a9 {
  position: relative;
  overflow: hidden;
}

/* extremely subtle animated background sheen, brand-blue, low opacity */
body.page-id-336 section.elementor-element-126d1a9::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(640px 320px at 18% 25%, rgba(4, 107, 210, 0.05), transparent 60%),
    radial-gradient(640px 320px at 82% 75%, rgba(4, 92, 180, 0.045), transparent 60%);
  background-size: 200% 200%;
  animation: ct-bg-drift 20s ease-in-out infinite alternate;
}
@keyframes ct-bg-drift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
body.page-id-336 section.elementor-element-126d1a9 > .elementor-container {
  position: relative;
  z-index: 1;
}

/* eyebrow ("— Contact"), heading, supporting text — sequential fade + up */
body.page-id-336 section.elementor-element-126d1a9 .elementor-element-69a11c8,
body.page-id-336 section.elementor-element-126d1a9 .elementor-element-2b27673,
body.page-id-336 section.elementor-element-126d1a9 .elementor-element-fc281f3 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ct-ease), transform 0.6s var(--ct-ease);
}
body.page-id-336.ct-loaded section.elementor-element-126d1a9 .elementor-element-69a11c8 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.02s;
}
body.page-id-336.ct-loaded section.elementor-element-126d1a9 .elementor-element-2b27673 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.14s;
}
body.page-id-336.ct-loaded section.elementor-element-126d1a9 .elementor-element-fc281f3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.28s;
}

/* =========================================================================
   2) CONTACT FORM CONTAINER — fade-up on load/reveal
   ========================================================================= */
body.page-id-336 .elementor-element-4c7c473 {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ct-ease), transform 0.7s var(--ct-ease);
  transition-delay: 0.4s;
}
body.page-id-336.ct-loaded .elementor-element-4c7c473,
body.page-id-336 .elementor-element-4c7c473.ct-in {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================================
   3) INPUT FIELD MICRO-INTERACTIONS — hover/focus glow, label lift
   ========================================================================= */
body.page-id-336 .forminator-field {
  transition: transform 0.3s var(--ct-ease);
}

body.page-id-336 .forminator-input,
body.page-id-336 .forminator-textarea {
  transition: border-color 0.28s var(--ct-ease), box-shadow 0.28s var(--ct-ease), background-color 0.28s var(--ct-ease);
}

/* gentle hover cue before focus */
body.page-id-336 .forminator-input:hover,
body.page-id-336 .forminator-textarea:hover {
  border-color: var(--ct-blue);
}

/* focus: soft brand-blue glow ring, no layout shift */
body.page-id-336 .forminator-input:focus,
body.page-id-336 .forminator-textarea:focus {
  border-color: var(--ct-blue) !important;
  box-shadow: 0 0 0 4px rgba(4, 107, 210, 0.12) !important;
  outline: none !important;
}

/* label subtly brightens when its field is focused */
body.page-id-336 .forminator-field:focus-within .forminator-label {
  color: var(--ct-blue);
  transition: color 0.25s ease;
}

/* placeholder fades naturally rather than snapping */
body.page-id-336 .forminator-input,
body.page-id-336 .forminator-textarea {
  transition-property: border-color, box-shadow, background-color, color;
}

/* =========================================================================
   4) CTA / SUBMIT BUTTON — hover lift + glow, press feedback
   ========================================================================= */
body.page-id-336 .forminator-button-submit {
  transition: transform 0.25s var(--ct-ease), box-shadow 0.25s var(--ct-ease), background-color 0.25s ease;
  will-change: transform, box-shadow;
}
body.page-id-336 .forminator-button-submit:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 24px rgba(4, 107, 210, 0.28);
}
body.page-id-336 .forminator-button-submit:active {
  transform: scale(0.97);
  transition-duration: 0.12s;
}

/* =========================================================================
   5) CONTACT INFORMATION — staggered reveal + card-style hover
   ========================================================================= */
body.page-id-336 section.elementor-element-1e14875 .elementor-element-2b0ec09,
body.page-id-336 section.elementor-element-1e14875 .elementor-element-634a028,
body.page-id-336 section.elementor-element-1e14875 .elementor-element-ce82104 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.65s var(--ct-ease), transform 0.65s var(--ct-ease);
  transition-delay: var(--ct-delay, 0ms);
}
body.page-id-336 section.elementor-element-1e14875.ct-in .elementor-element-2b0ec09,
body.page-id-336 section.elementor-element-1e14875.ct-in .elementor-element-634a028,
body.page-id-336 section.elementor-element-1e14875.ct-in .elementor-element-ce82104 {
  opacity: 1;
  transform: translateY(0);
}

/* each info row (email / phone / address) behaves like a subtle card on hover,
   without altering the existing DOM, spacing, icons, or text */
body.page-id-336 .elementor-element-72382ff .elementor-icon-list-item {
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ct-ease), transform 0.6s var(--ct-ease);
  transition-delay: var(--ct-delay, 0ms);
}
body.page-id-336 .elementor-element-72382ff.ct-in .elementor-icon-list-item {
  opacity: 1;
  transform: translateY(0);
}
body.page-id-336 .elementor-element-72382ff .elementor-icon-list-item::before {
  content: "";
  position: absolute;
  inset: -8px -12px;
  z-index: -1;
  border-radius: 10px;
  background: var(--ct-bg-soft);
  box-shadow: 0 8px 20px rgba(4, 107, 210, 0.10);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s var(--ct-ease), transform 0.3s var(--ct-ease);
  pointer-events: none;
}
body.page-id-336 .elementor-element-72382ff .elementor-icon-list-item:hover {
  transform: translateY(-4px);
}
body.page-id-336 .elementor-element-72382ff .elementor-icon-list-item:hover::before {
  opacity: 1;
  transform: translateY(0);
}
body.page-id-336 .elementor-element-72382ff .elementor-icon-list-icon svg {
  transition: transform 0.3s var(--ct-ease), color 0.3s ease;
}
body.page-id-336 .elementor-element-72382ff .elementor-icon-list-item:hover .elementor-icon-list-icon svg {
  transform: scale(1.12);
}

/* =========================================================================
   Mobile optimization — lighter effects, no background animation loop
   ========================================================================= */
@media (max-width: 767px) {
  body.page-id-336 section.elementor-element-126d1a9::before {
    animation: none;
  }
  body.page-id-336 .elementor-element-72382ff .elementor-icon-list-item:hover {
    transform: translateY(-2px);
  }
}

/* =========================================================================
   Respect prefers-reduced-motion — static, fully visible, no motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  body.page-id-336 * {
    animation: none !important;
    transition: none !important;
  }
  body.page-id-336 .ct-reveal,
  body.page-id-336 section.elementor-element-126d1a9 .elementor-element-69a11c8,
  body.page-id-336 section.elementor-element-126d1a9 .elementor-element-2b27673,
  body.page-id-336 section.elementor-element-126d1a9 .elementor-element-fc281f3,
  body.page-id-336 .elementor-element-4c7c473,
  body.page-id-336 section.elementor-element-1e14875 .elementor-element-2b0ec09,
  body.page-id-336 section.elementor-element-1e14875 .elementor-element-634a028,
  body.page-id-336 section.elementor-element-1e14875 .elementor-element-ce82104,
  body.page-id-336 .elementor-element-72382ff .elementor-icon-list-item {
    opacity: 1 !important;
    transform: none !important;
  }
  body.page-id-336 .elementor-element-72382ff .elementor-icon-list-item::before {
    opacity: 0 !important;
  }
  body.page-id-336 .forminator-button-submit:hover,
  body.page-id-336 .forminator-button-submit:active {
    transform: none !important;
  }
}