/* Shared visual polish only: keep each page's dimensions, flow and breakpoints. */
:root {
  --vam-ui-blue: #155eef;
  --vam-ui-sky: #38bdf8;
  --vam-ui-shadow: 0 12px 30px -12px rgba(7, 21, 47, .2);
  --vam-ui-ease: cubic-bezier(.22, 1, .36, 1);
  --vam-ui-duration: 180ms;
  --vam-muted: #64748b;
  --vam-logo-filter: saturate(1.04) contrast(1.02) drop-shadow(0 2px 3px rgba(21, 94, 239, .1));
}

body :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--vam-ui-blue) !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 5px rgba(56, 189, 248, .26);
}

:is(a, button, input, select, textarea, summary) {
  -webkit-tap-highlight-color: rgba(21, 94, 239, .15);
}

:is(.btn, .button, .btn-pill, .btn-submit, .btn-start, .btn-finish,
    .btn-home, .btn-back, .btn-nav-login, .btn-login, .btn-hero,
    .icon-btn, .nav-item, .toggle-password, .gender-btn, .trade-btn,
    .option-btn, .custom-file-upload, .phone-actions a) {
  transition: transform var(--vam-ui-duration) var(--vam-ui-ease),
    box-shadow var(--vam-ui-duration) ease, background-color var(--vam-ui-duration) ease,
    border-color var(--vam-ui-duration) ease, color var(--vam-ui-duration) ease;
}

:is(.card, .info-row, .product-card, .kpi-card, .role-card):not(.reveal) {
  transition: transform 200ms var(--vam-ui-ease), box-shadow 200ms ease, border-color 200ms ease;
}
:is(.card, .info-row, .product-card, .kpi-card):focus-within { box-shadow: var(--vam-ui-shadow); }

body :is(.btn, .button, .btn-pill, .btn-submit, .btn-start, .btn-finish,
    .btn-home, .btn-back, .btn-nav-login, .btn-login, .btn-hero, .icon-btn,
    .gender-btn, .trade-btn, .option-btn):active:not(:disabled) {
  transform: translateY(1px) !important;
}

:is(button, input, select, textarea):disabled { cursor: not-allowed; }
body :is(button, .btn, .button):disabled { transform: none !important; }

.custom-file-upload:focus-within {
  outline: 2px solid var(--vam-ui-blue);
  outline-offset: 4px;
  border-color: var(--vam-ui-blue);
}

/* The source PNGs include real alpha; preserve the brand's blue on light surfaces. */
body img:is([src$="logo-vam-full.png"], [src$="logo-vam-icon.png"]) {
  filter: var(--vam-logo-filter) !important;
  mix-blend-mode: normal;
  transition: filter var(--vam-ui-duration) ease, opacity var(--vam-ui-duration) ease;
}
body img[src$="logo-vam-full.png"] {
  /* Keep the previous full logo's box ratio when width or height is automatic. */
  aspect-ratio: 1672 / 941;
  object-fit: contain;
}

/* These containers have dark backgrounds and no existing white logo plate. */
body :is(.left-panel, .left, .hero-panel-brand)
  img:is([src$="logo-vam-full.png"], [src$="logo-vam-icon.png"]) {
  filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(56, 189, 248, .18)) !important;
}

/* Visibility is the fallback; JavaScript enables conceal/reveal only after setup. */
html:not([data-vam-motion="ready"]) :is(.reveal, .hidden-animate) {
  opacity: 1;
  transform: none;
}
html[data-vam-motion="ready"] .reveal:not(.show),
html[data-vam-motion="ready"] .hidden-animate:not(.show-animate) {
  opacity: 0;
  transform: translateY(18px);
}
html[data-vam-motion="ready"] :is(.reveal.show, .hidden-animate.show-animate) {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  body :is(.btn, .button, .btn-pill, .btn-submit, .btn-start, .btn-finish,
      .btn-home, .btn-back, .btn-nav-login, .btn-login, .btn-hero,
      .icon-btn, .phone-actions a):hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--vam-ui-shadow);
  }
  :is(.custom-file-upload, .option-btn):hover:not(:disabled) {
    border-color: var(--vam-ui-blue);
    box-shadow: 0 6px 18px -10px rgba(21, 94, 239, .3);
  }
  body :is(.card, .info-row, .product-card, .kpi-card, .role-card):hover {
    transform: translateY(-3px);
    box-shadow: var(--vam-ui-shadow);
  }
}

/* Avoid sticky touch hover transforms inherited from the original page styles. */
@media (hover: none), (pointer: coarse) {
  body :is(.card, .trust-card, .flow-card, .gallery-card, .value, .info-row,
      .product-card, .bento-card, .feature-item, .why-side, .phone-panel,
      .access-banner, .hero-panel, .role-card, .story, .btn, .button,
      .btn-pill, .btn-submit, .btn-start, .btn-finish, .btn-home, .btn-back,
      .btn-nav-login, .btn-login, .btn-hero, .icon-btn, .phone-actions a,
      .pro-card, .step-card, .kpi-card, .back-link, .chatbot-toggler):hover {
    transform: none !important;
  }
}

@keyframes vam-ui-enter {
  from { opacity: .45; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  :is(.login-card, .split-container, .quiz-container, .upload-card, .success-card) {
    animation: vam-ui-enter 360ms var(--vam-ui-ease);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  html :is(.reveal, .hidden-animate) { opacity: 1 !important; transform: none !important; }
  body :is(.card, .trust-card, .flow-card, .gallery-card, .value, .info-row,
      .product-card, .bento-card, .feature-item, .why-side, .phone-panel,
      .access-banner, .hero-panel, .role-card, .story, .btn, .button,
      .btn-pill, .btn-submit, .btn-start, .btn-finish, .btn-home, .btn-back,
      .btn-nav-login, .btn-login, .btn-hero, .icon-btn, .phone-actions a,
      .pro-card, .step-card, .kpi-card, .back-link, .chatbot-toggler,
      .gender-btn, .trade-btn, .option-btn, .nav a, .nav-item,
      .theme-toggle-btn):is(:hover, :active) {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  body .logo-text:hover img,
  body .toggle-password:hover img,
  body .theme-toggle-btn:hover img,
  body .custom-file-upload:hover svg,
  body .step-card:hover .step-number,
  body .footer-col a:hover,
  body .social-icons a:hover,
  body .chat-footer button:hover { transform: none !important; }
}