/* Soft depth and restrained feedback; no movement is required to use the site. */
:root {
  --motion-fast: 150ms;
  --motion-soft: 220ms;
  --motion-ease: cubic-bezier(.2, .7, .25, 1);
  --shadow-surface: 0 8px 24px #00000018, inset 0 1px 0 #ffffff06;
  --shadow-raised: 0 16px 32px #00000028, 0 0 0 1px #55dfb40a;
}

.feature-card, .panel, .price-card, .product-card, .gear-tease,
.road-band, .cta-box, .fleet-board, .screenshot-frame, .role-box {
  box-shadow: var(--shadow-surface);
  transition: border-color var(--motion-soft) ease, box-shadow var(--motion-soft) ease,
              transform var(--motion-soft) var(--motion-ease);
}
.feature-card:first-child { box-shadow: 0 8px 24px #00000016, inset 0 1px 0 #ffffff65; }
.float-card { box-shadow: 0 16px 35px #0004, inset 0 1px 0 #ffffff08; }
.article-cover {
  box-shadow: 0 6px 18px #00000018;
  transition: transform var(--motion-soft) var(--motion-ease), box-shadow var(--motion-soft) ease;
}
.topic-row, .topic-preview {
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease,
              box-shadow var(--motion-soft) ease, transform var(--motion-soft) var(--motion-ease);
}

.btn {
  box-shadow: 0 3px 9px #00000018, inset 0 1px 0 #ffffff07;
  transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) ease,
              border-color var(--motion-fast) ease, box-shadow var(--motion-soft) ease;
}
.btn.primary { box-shadow: 0 4px 14px #55dfb416, inset 0 1px 0 #ffffff45; }
/* Cancel the original unconditional hover lift on touch devices and in reduced motion. */
.btn:hover { transform: none; }
.btn:disabled, .btn[aria-disabled="true"], .btn:disabled:hover, .btn[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}
.chip, .segmented button, .favorite-btn, .mobile-menu, .dialog-close,
.admin-tabs button, .sidebar button {
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease,
              border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease,
              transform var(--motion-fast) var(--motion-ease);
}
.text-link, .read-link, .nav-links > a {
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}
.text-link > svg, .read-link > svg {
  transition: transform var(--motion-fast) var(--motion-ease);
}

:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 4px;
}
.btn:focus-visible, .chip:focus-visible, .favorite-btn:focus-visible,
.mobile-menu:focus-visible, .dialog-close:focus-visible {
  box-shadow: 0 0 0 5px #55dfb416, 0 5px 18px #00000020;
}
:is(.feature-card, .panel, .price-card, .product-card, .gear-tease, .screenshot-frame):focus-within {
  border-color: #55dfb466;
  box-shadow: 0 0 0 1px #55dfb416, var(--shadow-surface);
}
.article-card:focus-within .article-cover { box-shadow: 0 0 0 2px #55dfb480, 0 8px 22px #00000020; }
.product-card > a:focus-visible { outline-offset: -4px; display: block; }
.topic-row:focus-visible { outline-offset: -4px; background-color: #1b3039; }
.reader :is(a, button):focus-visible { outline-color: #24785b; }
.dialog-close {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

dialog {
  box-shadow: 0 28px 85px #0008, 0 0 0 1px #55dfb414, inset 0 1px 0 #ffffff0b;
  border-color: #55dfb438;
}
dialog[open] { animation: tg-dialog-in 190ms var(--motion-ease) both; }
dialog[open]::backdrop { animation: tg-backdrop-in 190ms ease both; }
dialog[open].is-closing { animation: tg-dialog-out 140ms ease both; pointer-events: none; }
dialog[open].is-closing::backdrop { animation: tg-backdrop-out 140ms ease both; }
@keyframes tg-dialog-in {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tg-dialog-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(8px) scale(.99); }
}
@keyframes tg-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tg-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes tg-menu-in { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tg-menu-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-5px); } }

@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):not([aria-disabled="true"]):hover {
    border-color: #55dfb477;
    box-shadow: 0 8px 20px #0000002b, 0 0 0 1px #55dfb410;
  }
  .btn.primary:not(:disabled):hover { box-shadow: 0 9px 24px #55dfb424, inset 0 1px 0 #ffffff50; }
  :is(.feature-card, .price-card, .product-card, .gear-tease, .screenshot-frame):hover {
    border-color: #55dfb440;
    box-shadow: var(--shadow-raised);
  }
  .feature-card:first-child:hover { border-color: #3a9d7980; box-shadow: 0 15px 28px #00000022; }
  .article-card:hover .article-cover { box-shadow: 0 12px 25px #00000028; }
  .topic-row:hover { border-color: #55dfb43d; box-shadow: inset 3px 0 0 #55dfb48c; }
  .topic-preview:hover h4 { color: var(--mint); }
  .text-link:hover, .read-link:hover, .nav-links > a:hover { color: #91f1cf; }
  .light :is(.text-link, .read-link):hover { color: #16553f; }
  .chip:not(.active):hover, .sidebar button:not(.active):hover,
  .admin-tabs button:not(.active):hover, .segmented button:not(.active):hover {
    border-color: #55dfb455;
    background-color: #55dfb40e;
    color: #d6f2e7;
  }
  .favorite-btn:hover, .mobile-menu:hover, .dialog-close:hover { background-color: #55dfb41a; color: var(--mint); }
}

@media (prefers-reduced-motion: no-preference) {
  :is(.btn, .chip, .favorite-btn, .mobile-menu, .dialog-close, .admin-tabs button,
      .segmented button, .sidebar button):not(:disabled):not([aria-disabled="true"]):active {
    transform: translateY(1px) scale(.985);
    transition-duration: 80ms;
  }
  @media (hover: hover) and (pointer: fine) {
    .btn:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-2px); }
    .btn:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px) scale(.985); }
    :is(.feature-card, .price-card, .product-card, .gear-tease, .screenshot-frame):hover { transform: translateY(-3px); }
    .article-card:hover .article-cover { transform: translateY(-3px); }
    .topic-preview:hover { transform: translateX(2px); }
    .text-link:hover > svg, .read-link:hover > svg { transform: translateX(3px); }
  }
}

@media (max-width: 850px) {
  .nav-links { box-shadow: 0 18px 30px #00000030, inset 0 1px 0 #ffffff04; }
  .nav-links.open { animation: tg-menu-in 170ms var(--motion-ease) both; }
  .nav-links.is-closing { display: flex; animation: tg-menu-out 130ms ease both; pointer-events: none; }
  .nav-links > a { border-radius: 7px; }
  .nav-links > a:focus-visible { outline-offset: -3px; background-color: #55dfb410; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, dialog::backdrop {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}