/* Shared interaction motion; board squares keep their original dimensions. */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
.scene-image { transform: translate3d(var(--scene-x,0px),var(--scene-y,0px),0) scale(var(--scene-scale,1.045)); }
.scene-image.is-tilt-active { transition: transform .32s ease-out; }
.motion-toggle { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: nowrap; }
.motion-toggle[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.motion-toggle:disabled { opacity: .55; cursor: default; }
@media(max-width:650px) {
  .topbar:has(.motion-toggle:not([hidden])) { flex-wrap: wrap; }
  .topbar-right:has(.motion-toggle:not([hidden])) { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
  .topbar-right:has(.motion-toggle:not([hidden])) .hello-status { display: none; }
}
.page-wipe {
  display: block;
  visibility: hidden;
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: transparent;
  opacity: 1;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}
.page-wipe.switching { visibility: visible; animation: siteScreenBlur 220ms ease-in-out both; }
.page, .page.active .page-heading, .page.active .contact-card { animation: none; }

.contact-card { position: relative; overflow: hidden; isolation: isolate; }
.contact-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(180px circle at var(--card-x,50%) var(--card-y,0%), #ecf3d412, transparent);
  opacity: 0;
  transition: opacity .5s;
}
.contact-card:hover::after, .contact-card:focus-within::after { opacity: 1; }
.contact-card > * { position: relative; z-index: 1; }

:is(button, a.button, .nav-item, .intro-card, .directory-card, .directory-back, .submenu a, .answer-option):not(:disabled):not(.tic-cell):not(.mine-cell):not(.sudoku-cell):not(.gomoku-board button) {
  transition: scale .28s var(--motion-ease), translate .28s var(--motion-ease),
    transform .28s var(--motion-ease), background .2s, border-color .2s,
    color .2s, box-shadow .2s, filter .2s;
  -webkit-tap-highlight-color: transparent;
}
:is(button, a.button, .nav-item, .directory-back, .submenu a, .answer-option):not(:disabled):not(.tic-cell):not(.mine-cell):not(.sudoku-cell):not(.gomoku-board button):is(:active, .is-pressed) {
  scale: .96;
  translate: 0 2px;
  filter: brightness(.88);
  box-shadow: inset 0 2px 9px #051b3026;
  transition-duration: 85ms;
}
:is(.intro-card, .directory-card):is(:active, .is-pressed) {
  scale: .98;
  translate: 0 2px;
  box-shadow: inset 0 2px 9px #051b3026;
  transition-duration: 100ms;
}
/* A brightness filter on a glass control also interrupts its backdrop sampling. */
:is(.route-surface, .route-trigger, .button.secondary):is(:active, .is-pressed) { filter: none !important; }
:is(.tic-cell, .mine-cell, .sudoku-cell, .gomoku-board button):not(:disabled):active {
  filter: brightness(.8);
}
:is(button, .button):disabled { scale: 1; translate: none; }

/* Keep glass ancestors opaque and unfiltered so they sample the fixed scene. */
.page .route-fade, .page.active .route-surface, .page .route-branch { animation: none; }
.page-container.is-leaving { animation: siteViewLeave 100ms ease-in both; }
.page-container.is-entering { animation: siteViewArrive 240ms var(--motion-ease) both; }
.page-container.is-leaving .route-fade { animation: siteFadeOut 100ms ease-in both; }
.page-container.is-entering .route-fade { animation: siteFadeIn 240ms ease-out both; }
.page-container.is-leaving .route-surface { animation: siteSurfaceOut 100ms ease-in both; }
.page-container.is-entering .route-surface { animation: siteSurfaceIn 240ms ease-out both; }
.page-container:is(.is-leaving, .is-entering) .page :is(.route-fade, .route-surface) { animation-delay: 0s; }
.page .calc-panel, .hub-page .game-panel, .hub-page .tool-panel { animation: panelArrive 240ms var(--motion-ease) both; }
@keyframes siteViewLeave {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-8px); }
}
@keyframes siteViewArrive {
  from { transform: translateY(10px); }
  to { transform: translateY(0) scale(1); }
}
@keyframes panelArrive {
  from { transform: translateY(8px); }
  to { transform: translateY(0); }
}
@keyframes siteScreenBlur {
  0%, 100% { backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  42% { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
}
@keyframes siteFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes siteFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes siteSurfaceIn {
  from { background-color: transparent; border-color: transparent; color: transparent; box-shadow: none; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to { background-color: var(--route-background); border-color: var(--route-border); color: var(--route-color); box-shadow: var(--route-shadow); backdrop-filter: var(--route-backdrop); -webkit-backdrop-filter: var(--route-backdrop); }
}
@keyframes siteSurfaceOut {
  from { background-color: var(--route-background); border-color: var(--route-border); color: var(--route-color); box-shadow: var(--route-shadow); backdrop-filter: var(--route-backdrop); -webkit-backdrop-filter: var(--route-backdrop); }
  to { background-color: transparent; border-color: transparent; color: transparent; box-shadow: none; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
  .scene-image { transform: scale(var(--scene-scale,1.045)); }
  .page-wipe { display: none; }
  .contact-card::after { display: none; }
  :is(button, a.button, .nav-item, .intro-card, .directory-card, .directory-back, .submenu a, .answer-option):is(:active, .is-pressed) {
    scale: 1; translate: none; transform: none; transition: none;
  }
  .page-container.is-leaving, .page-container.is-entering,
  .page-container.is-leaving .route-fade, .page-container.is-entering .route-fade,
  .page-container.is-leaving .route-surface, .page-container.is-entering .route-surface,
  .page .calc-panel, .hub-page .game-panel, .hub-page .tool-panel { animation: none; }
}