/* Shared interaction and loading layer for every EXCAMOBILE prototype. */
html { scroll-behavior: smooth; }
body { -webkit-tap-highlight-color: transparent; }
body.ux-loading { overflow: hidden; }
::selection { color: #fff; background: var(--brand-blue); }

.brand-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 28px;
  overflow: hidden;
  color: var(--ink-950);
  background:
    radial-gradient(circle at 18% 18%, rgb(7 95 216 / 9%), transparent 26%),
    radial-gradient(circle at 82% 82%, rgb(252 97 0 / 10%), transparent 25%),
    #f8fafc;
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease;
}
.brand-loader::before,
.brand-loader::after {
  position: absolute;
  width: clamp(250px, 34vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgb(7 95 216 / 10%);
  border-radius: 50%;
  content: "";
  animation: loader-orbit 8s linear infinite;
}
.brand-loader::before { top: -22%; left: -10%; }
.brand-loader::after { right: -12%; bottom: -28%; border-color: rgb(252 97 0 / 12%); animation-direction: reverse; animation-duration: 10s; }
.brand-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 360ms ease, visibility 0s linear 360ms; }
.brand-loader.is-route-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 180ms ease, visibility 0s; }
.brand-loader.is-route-active .brand-loader-mark { animation-duration: 1.25s; }
.brand-loader-card { position: relative; z-index: 1; width: min(410px, 100%); display: grid; justify-items: center; text-align: center; }
.brand-loader-mark {
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  background: #fff;
  border: 1px solid #e2e8f1;
  border-radius: 22px;
  box-shadow: 0 24px 55px rgb(4 31 72 / 14%);
  animation: loader-float 1.8s ease-in-out infinite;
}
.brand-loader-mark img { width: 48px; height: 48px; object-fit: contain; }
.brand-loader-logo { width: min(230px, 68vw); height: auto; }
.brand-loader-copy { margin: 15px 0 0; color: var(--ink-600); font-size: .76rem; line-height: 1.6; }
.brand-loader-progress { width: min(290px, 76vw); height: 4px; margin-top: 24px; overflow: hidden; background: #e4e9f1; border-radius: 999px; }
.brand-loader-progress span { display: block; width: 42%; height: 100%; background: linear-gradient(90deg, var(--brand-blue), #3490ff, var(--brand-orange)); border-radius: inherit; animation: loader-progress 1.05s cubic-bezier(.6, 0, .35, 1) infinite; }
.brand-loader-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 13px; color: var(--ink-600); font-size: .64rem; font-weight: 700; letter-spacing: .035em; }
.brand-loader-status i { width: 7px; height: 7px; background: var(--success); border-radius: 50%; box-shadow: 0 0 0 5px rgb(25 171 113 / 10%); animation: status-pulse 1.4s ease infinite; }

.route-loader {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 450;
  display: flex;
  align-items: center;
  gap: 11px;
  max-width: calc(100% - 48px);
  padding: 12px 15px;
  color: #fff;
  background: rgb(6 26 59 / 94%);
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: 13px;
  box-shadow: 0 18px 45px rgb(1 18 43 / 24%);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 180ms ease, transform 180ms ease;
  backdrop-filter: blur(12px);
}
.route-loader::before { width: 17px; height: 17px; flex: 0 0 auto; border: 2px solid rgb(255 255 255 / 28%); border-top-color: #fff; border-radius: 50%; content: ""; animation: ux-spin 720ms linear infinite; }
.route-loader strong { overflow-wrap: anywhere; font-size: .7rem; line-height: 1.35; }
.route-progress { position: fixed; top: 0; right: 0; left: 0; z-index: 700; height: 3px; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.route-progress::after { display: block; width: 38%; height: 100%; background: linear-gradient(90deg, var(--brand-blue), #45a0ff, var(--brand-orange)); box-shadow: 0 0 16px rgb(7 95 216 / 55%); content: ""; transform: translateX(-110%); }
body.ux-route-loading .route-loader { opacity: 1; transform: none; }
body.ux-route-loading .route-progress { opacity: 1; }
body.ux-route-loading .route-progress::after { animation: route-progress 780ms ease-in-out infinite; }
#prototype-view { transition: opacity 160ms ease, transform 160ms ease, filter 160ms ease; }
body.ux-route-loading #prototype-view { opacity: .5; filter: saturate(.72); transform: translateY(3px); pointer-events: none; }

.ux-reveal { opacity: 0; transform: translateY(14px); transition: opacity 420ms ease, transform 520ms cubic-bezier(.2, .75, .25, 1); transition-delay: calc(var(--ux-order, 0) * 35ms); }
.ux-reveal.ux-reveal-in { opacity: 1; transform: none; }

.control { transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
.control:focus-within { background: #fff; border-color: #75a8eb; box-shadow: 0 0 0 4px rgb(7 95 216 / 9%); }
.control input::placeholder,
.control textarea::placeholder { color: #8b98ab; }
.btn,
.icon-btn,
[data-screen],
[data-modal] { touch-action: manipulation; }
.btn:focus-visible,
.icon-btn:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 3px solid rgb(7 95 216 / 28%); outline-offset: 3px; }
.btn .ui-icon { transition: transform 180ms ease; }
.btn.is-loading { cursor: wait; opacity: .86; pointer-events: none; }
.btn.is-loading::before { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; animation: ux-spin 680ms linear infinite; }
.btn.is-loading .ui-icon { display: none; }
.data-row,
.unit-row,
.queue-item { transition: background-color 160ms ease, transform 160ms ease; }
.public-links a,
.investor-sidebar nav a,
.staff-sidebar nav a,
.investor-mobile-nav button { transition: color 170ms ease, background-color 170ms ease, transform 170ms ease; }
.public-links a { position: relative; }
.public-links a::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; background: var(--brand-blue); border-radius: 999px; content: ""; transform: scaleX(0); transform-origin: right; transition: transform 190ms ease; }
.public-links a:hover::after,
.public-links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.progress > span { position: relative; overflow: hidden; }
.progress > span::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgb(255 255 255 / 40%), transparent); content: ""; transform: translateX(-100%); animation: progress-shine 2.4s ease-in-out infinite; }

@media (hover: hover) and (pointer: fine) {
  .card,
  .product-card,
  .category-card,
  .role-card,
  .task-card,
  .quick-action,
  .option-card,
  .approval-card { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
  .card:not(.card-blue):not(.card-orange):hover,
  .product-card:hover,
  .category-card:hover,
  .role-card:hover,
  .task-card:hover,
  .quick-action:hover,
  .option-card:hover,
  .approval-card:hover { border-color: #c4d5ec; box-shadow: 0 16px 38px rgb(4 31 72 / 9%); transform: translateY(-3px); }
  .product-card:hover img,
  .detail-main-image:hover img,
  .thumb-grid img:hover { transform: scale(1.025); }
  .product-card img,
  .detail-main-image img,
  .thumb-grid img { transition: transform 420ms cubic-bezier(.2, .75, .25, 1); }
  .data-row:hover,
  .unit-row:hover,
  .queue-item:hover { background: rgb(7 95 216 / 3.5%); }
  .investor-sidebar nav a:hover,
  .staff-sidebar nav a:hover { transform: translateX(3px); }
  .btn:hover .ui-icon { transform: translateX(3px); }
  .icon-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgb(4 31 72 / 9%); }
}

@keyframes loader-progress { 0% { transform: translateX(-115%); } 65%, 100% { transform: translateX(250%); } }
@keyframes loader-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes loader-orbit { to { transform: rotate(360deg); } }
@keyframes status-pulse { 50% { opacity: .55; transform: scale(.82); } }
@keyframes ux-spin { to { transform: rotate(360deg); } }
@keyframes route-progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
@keyframes progress-shine { 0%, 45% { transform: translateX(-100%); } 75%, 100% { transform: translateX(100%); } }

@media (max-width: 620px) {
  .brand-loader { padding: 22px; }
  .brand-loader-mark { width: 68px; height: 68px; border-radius: 20px; }
  .brand-loader-mark img { width: 43px; height: 43px; }
  .route-loader { right: 14px; bottom: 86px; max-width: calc(100% - 28px); }
  .public-header ~ .route-loader { bottom: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .ux-reveal { opacity: 1; transform: none; }
}