/* Karos brandbook v2: 160 ms feedback, 240 ms page entry, 400 ms reveal. */
.button, .text-button, .news-read, .modal-close, .vote-button,
.segmented button, .amount-presets button, .desk-links a, #menu-toggle {
  transition: background-color 160ms ease, border-color 160ms ease,
    color 160ms ease, box-shadow 160ms ease;
}
#site-nav a { transition: color 160ms ease; }
#site-nav a::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 10px;
  right: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}
#site-nav a:is(:hover, :focus-visible, [aria-current="page"])::after {
  transform: scaleX(1);
}
.inner-page:not([hidden]) {
  animation: portal-page-in 240ms cubic-bezier(.22, 1, .36, 1);
}
.inner-page:not([hidden]) > :not(.page-heading):not(.section-toolbar) {
  animation: portal-reveal 400ms cubic-bezier(.22, 1, .36, 1);
}
.modal[open] {
  animation: portal-page-in 240ms cubic-bezier(.22, 1, .36, 1);
}
.modal[open]::backdrop {
  animation: portal-backdrop-in 240ms ease-out;
}
@keyframes portal-page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@keyframes portal-reveal {
  from { opacity: .35; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes portal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (max-width: 1080px) {
  #site-nav a::after { left: 5px; right: 5px; }
  #site-nav.open { animation: portal-page-in 160ms ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .inner-page:not([hidden]),
  .inner-page:not([hidden]) > :not(.page-heading):not(.section-toolbar),
  .modal[open], .modal[open]::backdrop, #site-nav.open {
    animation: none;
  }
  .button, .text-button, .news-read, .modal-close, .vote-button,
  .segmented button, .amount-presets button, .desk-links a, #menu-toggle,
  #site-nav a, #site-nav a::after { transition: none; }
}

/* One moving bronze frame; a brief amethyst reflection marks each selection. */
.segmented.is-enhanced { position: relative; isolation: isolate; }
.segmented-indicator { display: none; }
.segmented.is-enhanced .segmented-indicator {
  display: block;
  position: absolute;
  inset: 0 auto auto 0;
  pointer-events: none;
  z-index: 0;
  border: 1px solid #8e76538c;
  border-bottom: 2px solid var(--niki-gold);
  border-radius: 3px 3px 0 0;
  background-image: linear-gradient(110deg,transparent,#d1b68530,transparent),
    linear-gradient(135deg,#8e76532b,#a88bc719);
  background-size: 45% 100%,100% 100%;
  background-position: -80% 0,0 0;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 2px #11111655;
  transition: transform 300ms cubic-bezier(.2,.75,.2,1),
    width 300ms cubic-bezier(.2,.75,.2,1),height 160ms ease;
}
.segmented:not(.is-ready) .segmented-indicator { transition: none; }
.segmented-indicator::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: calc(50% - 3px);
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: #b6a0c9;
  border: 1px solid var(--niki-gold);
  box-shadow: 0 0 0 2px var(--niki-coal);
}
.segmented.is-enhanced button {
  position: relative;
  z-index: 1;
  transition: color 160ms ease,background-color 160ms ease,
    box-shadow 160ms ease,transform 120ms ease;
}
.segmented.is-enhanced button:is([aria-selected="true"],[aria-pressed="true"]) {
  border-bottom-color: transparent;
  background: transparent;
  color: var(--niki-gold);
}
.segmented.is-enhanced button:active { transform: translateY(1px); }
.segmented.is-enhanced button:focus-visible { z-index: 2; }
#ranking-rows td {
  transition: background-color 180ms ease,color 180ms ease,box-shadow 180ms ease;
}
#ranking-rows .rank-identity strong { transition: transform 180ms ease,color 180ms ease; }
#ranking-podium > .panel { transition: background-color 180ms ease,box-shadow 180ms ease; }

@media (hover: hover) {
  .segmented.is-enhanced button:hover:not([aria-selected="true"]):not([aria-pressed="true"]) {
    color: var(--niki-text);
    background: #a88bc713;
    box-shadow: inset 0 1px 0 #d1b68538;
  }
  #ranking-rows tr:not(.ranking-empty):hover td { background-color: #8e765316; }
  #ranking-rows tr:not(.ranking-empty):hover td:first-child {
    box-shadow: inset 2px 0 var(--niki-gold);
  }
  #ranking-rows tr:hover .rank-identity strong { transform: translateX(3px);color: #f4dfb6; }
  #ranking-rows tr:hover .rank-score { color: #f4dfb6; }
  #ranking-podium > .panel:hover { background-color: #8e765313;box-shadow: inset 0 -2px #d1b68599; }
}
@media (prefers-reduced-motion: reduce) {
  .segmented.is-enhanced .segmented-indicator,.segmented.is-enhanced button,
  #ranking-rows td,#ranking-rows .rank-identity strong,#ranking-podium > .panel {
    transition: none;
  }
  .segmented.is-enhanced button:active,#ranking-rows tr:hover .rank-identity strong { transform: none; }
}
