/**
 * ARANOX Premium UX Framework
 * Release: AW2_149
 * Dependências: AW2_145 + AW2_146 + AW2_147 + AW2_148
 */

:root{
  --arx-ux-header-offset:88px;
  --arx-ux-hit-area:44px;
  --arx-ux-toast-width:min(420px,calc(100vw - 24px));
  --arx-ux-drawer-width:min(440px,92vw);
}

/* Skip link */
.arx-skip-link{
  position:fixed;
  left:16px;
  top:12px;
  z-index:10000;
  padding:12px 18px;
  border-radius:var(--arx-radius-pill);
  color:var(--arx-black);
  background:var(--arx-cyan-500);
  box-shadow:var(--arx-shadow-md);
  font-weight:900;
  text-decoration:none;
  transform:translateY(-140%);
  transition:transform var(--arx-duration-base) var(--arx-ease);
}

.arx-skip-link:focus{
  transform:none;
}

/* Global interaction quality */
:where(a,button,input,select,textarea,summary,[role="button"]){
  touch-action:manipulation;
}

:where(button,[role="button"],summary){
  min-height:var(--arx-ux-hit-area);
}

:where(a,button,[role="button"]){
  text-underline-offset:.2em;
}

body.arx-ux-lock{
  overflow:hidden;
}

/* Context navigation */
.arx-ux-context-nav{
  position:sticky;
  top:var(--arx-ux-header-offset);
  z-index:80;
  border-block:1px solid var(--arx-line-light);
  background:rgba(248,250,249,.88);
  backdrop-filter:blur(18px);
}

.arx-ux-context-nav__inner{
  width:min(var(--arx-shell),calc(100% - (var(--arx-gutter) * 2)));
  margin-inline:auto;
  display:flex;
  gap:8px;
  overflow:auto;
  scrollbar-width:none;
  padding:10px 0;
}

.arx-ux-context-nav__inner::-webkit-scrollbar{
  display:none;
}

.arx-ux-context-nav a{
  flex:0 0 auto;
  display:inline-flex;
  min-height:40px;
  align-items:center;
  padding:0 15px;
  border:1px solid transparent;
  border-radius:var(--arx-radius-pill);
  color:var(--arx-muted);
  font-size:var(--arx-font-size-sm);
  font-weight:900;
  text-decoration:none;
}

.arx-ux-context-nav a:hover,
.arx-ux-context-nav a.is-active{
  color:var(--arx-ink);
  border-color:var(--arx-line-light);
  background:var(--arx-white);
}

/* Back to top */
.arx-ux-backtop{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:120;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:var(--arx-white);
  background:rgba(5,7,10,.82);
  box-shadow:var(--arx-shadow-md);
  backdrop-filter:blur(14px);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(12px);
  transition:
    opacity var(--arx-duration-base) var(--arx-ease),
    transform var(--arx-duration-base) var(--arx-ease);
}

.arx-ux-backtop.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

/* Toasts */
.arx-ux-toast-region{
  position:fixed;
  right:16px;
  bottom:82px;
  z-index:2000;
  width:var(--arx-ux-toast-width);
  display:grid;
  gap:10px;
}

.arx-ux-toast{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px;
  align-items:start;
  padding:16px;
  border:1px solid var(--arx-line-dark);
  border-radius:var(--arx-radius-lg);
  color:var(--arx-white);
  background:rgba(5,12,18,.94);
  box-shadow:var(--arx-shadow-lg);
  backdrop-filter:blur(16px);
}

.arx-ux-toast__icon{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:50%;
  background:rgba(66,217,223,.14);
  color:var(--arx-cyan-500);
  font-weight:900;
}

.arx-ux-toast__close{
  min-width:32px;
  min-height:32px;
  border:0;
  color:inherit;
  background:transparent;
  cursor:pointer;
}

/* Modal */
.arx-ux-modal{
  position:fixed;
  inset:0;
  z-index:1800;
  display:none;
  place-items:center;
  padding:20px;
  background:rgba(3,7,10,.70);
  backdrop-filter:blur(10px);
}

.arx-ux-modal.is-open{
  display:grid;
}

.arx-ux-modal__dialog{
  width:min(760px,100%);
  max-height:min(84vh,900px);
  overflow:auto;
  padding:clamp(24px,4vw,42px);
  border:1px solid var(--arx-line-dark);
  border-radius:var(--arx-radius-xl);
  color:var(--arx-white);
  background:linear-gradient(145deg,#071019,#102b3b);
  box-shadow:var(--arx-shadow-lg);
}

.arx-ux-modal__head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
}

.arx-ux-modal__close{
  flex:0 0 auto;
  width:44px;
  height:44px;
  border:1px solid var(--arx-line-dark);
  border-radius:50%;
  color:var(--arx-white);
  background:rgba(255,255,255,.04);
  cursor:pointer;
}

/* Drawer */
.arx-ux-drawer{
  position:fixed;
  inset:0;
  z-index:1700;
  display:none;
  background:rgba(3,7,10,.58);
  backdrop-filter:blur(8px);
}

.arx-ux-drawer.is-open{
  display:block;
}

.arx-ux-drawer__panel{
  position:absolute;
  right:0;
  top:0;
  width:var(--arx-ux-drawer-width);
  height:100%;
  padding:24px;
  overflow:auto;
  border-left:1px solid var(--arx-line-dark);
  color:var(--arx-white);
  background:linear-gradient(180deg,#071019,#102b3b);
  box-shadow:var(--arx-shadow-lg);
}

/* Tooltip */
[data-arx-tooltip]{
  position:relative;
}

[data-arx-tooltip]::after{
  content:attr(data-arx-tooltip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  z-index:500;
  max-width:260px;
  padding:8px 10px;
  border-radius:var(--arx-radius-sm);
  color:var(--arx-white);
  background:var(--arx-black);
  box-shadow:var(--arx-shadow-sm);
  font-size:var(--arx-font-size-xs);
  line-height:1.35;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,6px);
  transition:
    opacity var(--arx-duration-fast) ease,
    transform var(--arx-duration-fast) ease;
}

[data-arx-tooltip]:hover::after,
[data-arx-tooltip]:focus-visible::after{
  opacity:1;
  transform:translate(-50%,0);
}

/* Form quality */
.arx-ux-field{
  display:grid;
  gap:8px;
}

.arx-ux-field label{
  font-size:var(--arx-font-size-sm);
  font-weight:900;
}

.arx-ux-field :where(input,select,textarea){
  width:100%;
  min-height:52px;
  padding:12px 14px;
  border:1px solid var(--arx-line-light);
  border-radius:var(--arx-radius-md);
  color:var(--arx-ink);
  background:var(--arx-white);
  transition:
    border-color var(--arx-duration-fast) ease,
    box-shadow var(--arx-duration-fast) ease;
}

.arx-ux-field textarea{
  min-height:140px;
  resize:vertical;
}

.arx-ux-field :where(input,select,textarea):focus{
  border-color:var(--arx-blue-600);
  box-shadow:0 0 0 4px rgba(22,134,178,.12);
  outline:0;
}

.arx-ux-field[aria-invalid="true"] :where(input,select,textarea),
.arx-ux-field :where(input,select,textarea)[aria-invalid="true"]{
  border-color:var(--arx-red-500);
}

.arx-ux-help,
.arx-ux-error{
  font-size:var(--arx-font-size-xs);
}

.arx-ux-help{color:var(--arx-muted)}
.arx-ux-error{color:var(--arx-red-500);font-weight:800}

/* Skeleton */
.arx-ux-skeleton{
  position:relative;
  overflow:hidden;
  border-radius:var(--arx-radius-sm);
  background:var(--arx-paper-200);
}

.arx-ux-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);
  transform:translateX(-100%);
  animation:arxUxSkeleton 1.6s linear infinite;
}

/* Loading button */
.arx-ux-loading{
  position:relative;
  pointer-events:none;
  opacity:.72;
}

.arx-ux-loading::after{
  content:"";
  width:16px;
  height:16px;
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  animation:arxUxSpin .8s linear infinite;
}

/* Reading progress local */
.arx-ux-reading{
  position:relative;
}

.arx-ux-reading__bar{
  position:sticky;
  top:0;
  z-index:75;
  height:3px;
  background:linear-gradient(90deg,var(--arx-cyan-500),var(--arx-violet-500));
  transform-origin:left center;
  transform:scaleX(var(--arx-reading-progress,0));
}

/* Scroll snap — opt-in */
.arx-ux-snap{
  scroll-snap-type:y proximity;
}

.arx-ux-snap>section{
  scroll-snap-align:start;
  scroll-margin-top:var(--arx-ux-header-offset);
}

/* Active section accent */
[data-arx-section].is-active-section{
  --arx-section-active:1;
}

[data-arx-section]{
  transition:opacity var(--arx-duration-base) ease;
}

/* Link affordance */
.arx-ux-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  text-decoration:none;
}

.arx-ux-link::after{
  content:"→";
  transition:transform var(--arx-duration-fast) ease;
}

.arx-ux-link:hover::after{
  transform:translateX(4px);
}

/* Reduced visual density utility */
.arx-ux-readable{
  max-width:74ch;
}

.arx-ux-readable :where(p,li){
  line-height:1.8;
}

/* Keyboard mode */
html.arx-keyboard-user :where(a,button,input,select,textarea,summary,[tabindex]):focus{
  outline:3px solid rgba(66,217,223,.55);
  outline-offset:4px;
}

/* Motion */
@keyframes arxUxSkeleton{
  to{transform:translateX(100%)}
}

@keyframes arxUxSpin{
  to{transform:rotate(360deg)}
}

@media(max-width:760px){
  :root{
    --arx-ux-header-offset:72px;
  }

  .arx-ux-toast-region{
    left:12px;
    right:12px;
    width:auto;
  }

  .arx-ux-context-nav{
    top:var(--arx-ux-header-offset);
  }
}

@media(prefers-reduced-motion:reduce){
  .arx-ux-skeleton::after,
  .arx-ux-loading::after{
    animation:none!important;
  }

  .arx-ux-backtop,
  .arx-ux-link::after{
    transition:none!important;
  }
}