/*
 * Viranex interaction layer.
 * Motion is intentionally limited to precise pointing devices and visitors
 * who have not requested reduced motion.
 */

/* Footer typography is intentionally consistent across every page template. */
#viranex-homepage-visual .vxh-footer p,
#viranex-homepage-visual .vxh-footer a,
#vx-marketing-page .vxm-footer p,
#vx-marketing-page .vxm-footer a,
#vx-demo-page .vxd-footer p,
#vx-demo-page .vxd-footer a,
#vx-process-page .vxp-footer p,
#vx-process-page .vxp-footer a,
#vx-about-page .vxa-footer p,
#vx-about-page .vxa-footer a,
#vx-contact-page .vxc-footer p,
#vx-contact-page .vxc-footer a,
#vx-websites-page .vxw-footer p,
#vx-websites-page .vxw-footer a,
#vx-generic-page .vxg-footer p,
#vx-generic-page .vxg-footer a { font-size: 14px; }

#viranex-homepage-visual .viranex-footer-contact .viranex-contact-email,
#viranex-homepage-visual .viranex-footer-contact .viranex-address,
#vx-marketing-page .viranex-footer-contact .viranex-contact-email,
#vx-marketing-page .viranex-footer-contact .viranex-address,
#vx-demo-page .viranex-footer-contact .viranex-contact-email,
#vx-demo-page .viranex-footer-contact .viranex-address,
#vx-process-page .viranex-footer-contact .viranex-contact-email,
#vx-process-page .viranex-footer-contact .viranex-address,
#vx-about-page .viranex-footer-contact .viranex-contact-email,
#vx-about-page .viranex-footer-contact .viranex-address,
#vx-contact-page .viranex-footer-contact .viranex-contact-email,
#vx-contact-page .viranex-footer-contact .viranex-address,
#vx-websites-page .viranex-footer-contact .viranex-contact-email,
#vx-websites-page .viranex-footer-contact .viranex-address,
#vx-generic-page .viranex-footer-contact .viranex-contact-email,
#vx-generic-page .viranex-footer-contact .viranex-address { font-size: 14px; }

#viranex-homepage-visual .viranex-legal-row,
#viranex-homepage-visual .viranex-legal-row a,
#vx-marketing-page .viranex-legal-row,
#vx-marketing-page .viranex-legal-row a,
#vx-demo-page .viranex-legal-row,
#vx-demo-page .viranex-legal-row a,
#vx-process-page .viranex-legal-row,
#vx-process-page .viranex-legal-row a,
#vx-about-page .viranex-legal-row,
#vx-about-page .viranex-legal-row a,
#vx-contact-page .viranex-legal-row,
#vx-contact-page .viranex-legal-row a,
#vx-websites-page .viranex-legal-row,
#vx-websites-page .viranex-legal-row a,
#vx-generic-page .viranex-legal-row,
#vx-generic-page .viranex-legal-row a { font-size: 13px; }

/* Keyboard focus remains visible on every interactive control. */
#viranex-homepage-visual a:focus-visible,
#vx-marketing-page a:focus-visible,
#vx-marketing-page button:focus-visible,
#vx-websites-page a:focus-visible,
#vx-websites-page button:focus-visible,
#vx-process-page a:focus-visible,
#vx-about-page a:focus-visible,
#vx-contact-page a:focus-visible,
#vx-contact-page button:focus-visible,
#vx-demo-page a:focus-visible,
#vx-demo-page button:focus-visible {
  outline: 3px solid rgba(255, 117, 31, .38);
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Homepage: every phase is now a distinct, premium hover target. */
  #viranex-homepage-visual .vxh-process-step {
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
  }
  #viranex-homepage-visual .vxh-process-step:hover {
    border-color: rgba(255,117,31,.42);
    box-shadow: 0 17px 38px rgba(17,24,39,.09);
    transform: translateY(-4px);
  }
  #viranex-homepage-visual .vxh-process-step span { transition: color .22s ease; }
  #viranex-homepage-visual .vxh-process-step:hover span { color: #d95500; }

  /* Marketing hero: animate the content layers, never the full dark canvas. */
  #vx-marketing-page .vxm-engine-step,
  #vx-marketing-page .vxm-engine-asset {
    transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease, transform .22s ease;
  }
  #vx-marketing-page .vxm-engine-step:hover {
    background:#182131;
    border-color:rgba(255,117,31,.48);
    box-shadow:0 15px 32px rgba(0,0,0,.2);
    transform:translateY(-3px);
  }
  #vx-marketing-page .vxm-engine-asset:hover {
    background:rgba(255,117,31,.22);
    box-shadow:0 10px 22px rgba(0,0,0,.16);
    color:#ffd1b4;
    transform:translateY(-2px);
  }

  /* Website hero composition: a subtle parallax-like response. */
  #vx-websites-page .vxw-browser-window,
  #vx-websites-page .vxw-phone,
  #vx-websites-page .vxw-quality-card,
  #vx-websites-page .vxw-mini-visual {
    transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease;
  }
  #vx-websites-page .vxw-browser-scene:hover .vxw-browser-window { transform:rotateY(-2deg) rotateZ(-.4deg) translateY(-3px); }
  #vx-websites-page .vxw-browser-scene:hover .vxw-phone { box-shadow:0 30px 68px rgba(0,0,0,.38);transform:rotate(2deg) translateY(-4px); }
  #vx-websites-page .vxw-browser-scene:hover .vxw-quality-card { border-color:rgba(255,117,31,.34);box-shadow:0 20px 46px rgba(17,24,39,.17);transform:translateY(-3px); }
  #vx-websites-page .vxw-browser-scene:hover .vxw-mini-visual { box-shadow:0 29px 58px rgba(0,0,0,.32);transform:translateY(-2px); }

  /* Over Viranex: connected elements respond individually while the canvas stays still. */
  #vx-about-page .vxa-orbit,
  #vx-about-page .vxa-friction-item,
  #vx-about-page .vxa-value,
  #vx-about-page .vxa-model-item,
  #vx-about-page .vxa-promise,
  #vx-about-page .vxa-system-core {
    transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
  }
  #vx-about-page .vxa-orbit:hover {
    border-color:rgba(255,117,31,.52);
    box-shadow:0 14px 30px rgba(0,0,0,.22);
    transform:translateY(-3px);
  }
  #vx-about-page .vxa-system:hover .vxa-system-core { box-shadow:0 0 0 1px rgba(255,255,255,.16),0 0 34px rgba(255,117,31,.32),0 20px 48px rgba(0,0,0,.24); }
  #vx-about-page .vxa-friction-item:hover {
    border-color:rgba(255,117,31,.36);
    box-shadow:0 16px 36px rgba(17,24,39,.07);
    transform:translateY(-3px);
  }
  #vx-about-page .vxa-value:hover { border-color:#ff751f;transform:translateY(-2px); }
  #vx-about-page .vxa-model-item:hover {
    border-color:rgba(255,117,31,.5);
    box-shadow:0 17px 38px rgba(0,0,0,.2);
    transform:translateY(-3px);
  }
  #vx-about-page .vxa-promise:hover { border-color:#ff751f;transform:translateY(-2px); }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Shared CTA behaviour. */
  #viranex-homepage-visual .vxh-primary,
  #viranex-homepage-visual .vxh-secondary,
  #vx-marketing-page .vxm-primary,
  #vx-marketing-page .vxm-secondary,
  #vx-websites-page .vxw-primary,
  #vx-websites-page .vxw-secondary,
  #vx-process-page .vxp-primary,
  #vx-process-page .vxp-secondary,
  #vx-about-page .vxa-primary,
  #vx-about-page .vxa-secondary,
  #vx-contact-page .vxc-primary,
  #vx-demo-page .vxd-primary {
    transition: background-color .2s ease, border-color .2s ease,
      box-shadow .2s ease, color .2s ease, transform .2s ease;
    will-change: transform;
  }

  #viranex-homepage-visual .vxh-primary:hover,
  #vx-marketing-page .vxm-primary:hover,
  #vx-websites-page .vxw-primary:hover,
  #vx-process-page .vxp-primary:hover,
  #vx-about-page .vxa-primary:hover,
  #vx-contact-page .vxc-primary:hover,
  #vx-demo-page .vxd-primary:hover {
    box-shadow: 0 13px 30px rgba(255, 117, 31, .3);
    transform: translateY(-2px);
  }

  #viranex-homepage-visual .vxh-secondary:hover,
  #vx-marketing-page .vxm-secondary:hover,
  #vx-websites-page .vxw-secondary:hover,
  #vx-process-page .vxp-secondary:hover,
  #vx-about-page .vxa-secondary:hover {
    background: #f7f8fb;
    border-color: #cbd1db;
    box-shadow: 0 10px 24px rgba(17, 24, 39, .08);
    transform: translateY(-2px);
  }

  #viranex-homepage-visual .vxh-primary svg,
  #viranex-homepage-visual .vxh-secondary svg,
  #vx-marketing-page .vxm-primary svg,
  #vx-marketing-page .vxm-secondary svg,
  #vx-websites-page .vxw-primary svg,
  #vx-websites-page .vxw-secondary svg,
  #vx-process-page .vxp-primary svg,
  #vx-process-page .vxp-secondary svg,
  #vx-about-page .vxa-primary svg,
  #vx-about-page .vxa-secondary svg,
  #vx-contact-page .vxc-primary svg,
  #vx-demo-page .vxd-primary svg {
    transition: transform .2s ease;
  }

  #viranex-homepage-visual .vxh-primary:hover svg,
  #viranex-homepage-visual .vxh-secondary:hover svg,
  #vx-marketing-page .vxm-primary:hover svg,
  #vx-marketing-page .vxm-secondary:hover svg,
  #vx-websites-page .vxw-primary:hover svg,
  #vx-websites-page .vxw-secondary:hover svg,
  #vx-process-page .vxp-primary:hover svg,
  #vx-process-page .vxp-secondary:hover svg,
  #vx-about-page .vxa-primary:hover svg,
  #vx-about-page .vxa-secondary:hover svg,
  #vx-contact-page .vxc-primary:hover svg,
  #vx-demo-page .vxd-primary:hover svg {
    transform: translateX(3px);
  }

  /* Existing cycle and package motion kept consistent at 4px. */
  #viranex-homepage-visual .vxh-cycle-item,
  #viranex-homepage-visual .vxh-price-card,
  #viranex-homepage-visual .vxh-demo-item {
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
  }

  #viranex-homepage-visual .vxh-cycle-item:hover,
  #viranex-homepage-visual .vxh-price-card:hover,
  #viranex-homepage-visual .vxh-demo-item:hover {
    box-shadow: 0 18px 42px rgba(17, 24, 39, .09);
    transform: translateY(-4px);
  }

  #viranex-homepage-visual .vxh-price-card.featured:hover {
    transform: translateY(-14px);
  }

  /* Process page. Line-based steps and principles stay still. */
  #vx-process-page .vxp-cycle-item,
  #vx-process-page .vxp-resp,
  #vx-process-page .vxp-week {
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
  }

  #vx-process-page .vxp-cycle-item:hover,
  #vx-process-page .vxp-resp:hover {
    border-color: rgba(255, 117, 31, .34);
    box-shadow: 0 16px 36px rgba(17, 24, 39, .07);
    transform: translateY(-3px);
  }

  #vx-process-page .vxp-week:hover {
    border-color: rgba(255, 117, 31, .72);
    box-shadow: 0 15px 34px rgba(255, 117, 31, .11);
    transform: translateY(-3px);
  }

  /* Contact page. Form controls and line-based steps stay still. */
  #vx-contact-page .vxc-fit-item {
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
  }

  #vx-contact-page .vxc-fit-item:hover {
    border-color: rgba(255, 117, 31, .34);
    box-shadow: 0 16px 36px rgba(17, 24, 39, .07);
    transform: translateY(-3px);
  }

  /* Demonstration phase and campaign-output cards. */
  #vx-demo-page .vxd-step,
  #vx-demo-page .vxd-asset,
  #vx-demo-page .vxd-campaign-board,
  #vx-demo-page .vxd-kpi-grid article,
  #vx-demo-page .vxd-insight {
    transition: border-color .22s ease, box-shadow .22s ease, filter .22s ease, transform .22s ease;
  }

  #vx-demo-page .vxd-step:hover {
    border-color: rgba(255, 117, 31, .34);
    box-shadow: 0 16px 36px rgba(17, 24, 39, .07);
    transform: translateY(-3px);
  }

  #vx-demo-page .vxd-asset:hover {
    filter: drop-shadow(0 18px 24px rgba(17, 24, 39, .1));
    transform: translateY(-4px);
  }

  #vx-demo-page .vxd-campaign-board:hover {
    box-shadow: 0 32px 72px rgba(16, 24, 40, .25);
    transform: rotate(-1deg) translateY(-3px);
  }

  #vx-demo-page .vxd-kpi-grid article:hover,
  #vx-demo-page .vxd-insight:hover {
    border-color: rgba(255, 117, 31, .38);
    box-shadow: 0 14px 32px rgba(0, 0, 0, .15);
    transform: translateY(-3px);
  }

  #vx-demo-page .vxd-asset-image img {
    transition: transform .3s ease;
  }

  #vx-demo-page .vxd-asset:hover .vxd-asset-image img {
    transform: scale(1.02);
  }

  /* Website service page: restrained lift and emphasis. */
  #vx-websites-page .vxw-package,
  #vx-websites-page .vxw-process-grid article,
  #vx-websites-page .vxw-scope-grid > article,
  #vx-websites-page .vxw-care-options article {
    transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
  }

  #vx-websites-page .vxw-process-grid article:hover,
  #vx-websites-page .vxw-scope-grid > article:hover {
    border-color: rgba(255, 117, 31, .38);
    box-shadow: 0 17px 38px rgba(17, 24, 39, .08);
    transform: translateY(-3px);
  }

  #vx-websites-page .vxw-value > span {
    transition: background-color .22s ease, color .22s ease, transform .22s ease;
  }

  #vx-websites-page .vxw-value:hover > span {
    background: #ffe4d2;
    color: #d95500;
    transform: translateY(-2px);
  }

  #vx-websites-page .vxw-package:hover {
    border-color: rgba(255, 117, 31, .5);
    box-shadow: 0 22px 48px rgba(17, 24, 39, .1);
    transform: translateY(-4px);
  }

  #vx-websites-page .vxw-package.featured:hover { transform: translateY(-14px); }
  #vx-websites-page .vxw-care-options article:hover {
    border-color: rgba(255, 117, 31, .62);
    box-shadow: 0 14px 32px rgba(255, 117, 31, .09);
    transform: translateY(-3px);
  }

  /* Large closing CTA panels: lift the panel, not its button. */
  #viranex-homepage-visual .vxh-final-box,
  #vx-marketing-page .vxm-final-box,
  #vx-process-page .vxp-final-box,
  #vx-about-page .vxa-final-box,
  #vx-demo-page .vxd-final-box,
  #vx-websites-page .vxw-final-box,
  #viranex-homepage-visual .vxh-websites-box {
    transition: box-shadow .25s ease, transform .25s ease;
  }

  #viranex-homepage-visual .vxh-final-box:hover,
  #vx-marketing-page .vxm-final-box:hover,
  #vx-process-page .vxp-final-box:hover,
  #vx-about-page .vxa-final-box:hover,
  #vx-demo-page .vxd-final-box:hover,
  #vx-websites-page .vxw-final-box:hover,
  #viranex-homepage-visual .vxh-websites-box:hover {
    box-shadow: 0 22px 48px rgba(17, 24, 39, .12);
    transform: translateY(-4px);
  }

  #viranex-homepage-visual .vxh-final-box a:hover,
  #vx-marketing-page .vxm-final-box a:hover,
  #vx-process-page .vxp-final-box a:hover,
  #vx-about-page .vxa-final-box a:hover,
  #vx-demo-page .vxd-final-box a:hover,
  #vx-websites-page .vxw-final-box a:hover,
  #viranex-homepage-visual .vxh-websites-box a:hover {
    transform: none;
  }
}