/* A consistent violet/amber glow, with depth only while a surface is in use. */
.tm-surface {
  --tm-rx: 0deg; --tm-ry: 0deg;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s ease, border-color .24s ease, filter .24s ease;
}
.tm-surface-button { position:relative; }
.tm-surface:focus-visible {
  outline: 3px solid #b765df;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px #b765df20, 0 10px 30px #a547d426;
}
@media (hover:hover) and (pointer:fine) {
  .tm-surface:not(:disabled):not([aria-disabled="true"]):hover {
    border-color: #bb70d8;
    box-shadow: 0 16px 38px #1b0e2226, 0 0 24px #b258e026, 0 0 42px #ffad6612, inset 0 1px 0 #ffffff30;
  }
  .tm-surface-button:not(:disabled):not([aria-disabled="true"]):hover { filter: brightness(1.08); }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html body main .tm-surface.tm-surface-active,
  html body:has(#tmLayeredHome) main .tm-surface.tm-surface-active {
    transform: perspective(950px) translateY(-4px) rotateX(var(--tm-rx)) rotateY(var(--tm-ry)) !important;
    transform-style: preserve-3d !important;
    backface-visibility: hidden;
    filter: none !important;
  }
  .tm-surface-button:not(:disabled):not([aria-disabled="true"]):active {
    transform: perspective(950px) translateY(-1px) scale(.985) !important;
  }
}
@media (pointer:coarse) and (prefers-reduced-motion:no-preference) {
  .tm-surface-button:not(:disabled):not([aria-disabled="true"]):active {
    transform: perspective(700px) translateY(-1px) scale(.975) !important;
    filter: brightness(1.08);
    box-shadow: 0 9px 24px #1b0e2224, 0 0 22px #b258e024;
  }
}
@media (prefers-reduced-motion:reduce) {
  .tm-surface { transition: none !important; }
  html body .tm-surface.tm-surface-active { transform: none !important; }
}

/* Arabic reverses only the central desktop navigation link order. */
@media (min-width:701px) {
  html[lang^="ar"] body :is(header,.tm-site-header,.tm-global-nav) :is(.tm-header-nav,.tm-nav-links,.nav-links) {
    flex-direction: row-reverse !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
  }
  html[lang^="ar"] body :is(header,.tm-site-header,.tm-global-nav) :is(.tm-header-nav,.tm-nav-links,.nav-links) > a {
    direction: rtl !important;
    unicode-bidi: isolate !important;
  }
}