:root {
  --motion-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-quick: 180ms;
  --motion-medium: 420ms;
  --focus-ring: #285f31;
}

html[data-theme="dark"] { --focus-ring: #a9e3a2; }

html {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  min-width: 320px;
  overflow-x: clip;
  transition: background-color 520ms var(--motion-smooth), color 420ms var(--motion-smooth);
}

::selection { background: rgba(85, 169, 91, 0.3); }

:where(a, button, input, select, textarea, summary) {
  -webkit-tap-highlight-color: transparent;
}

:where(button, summary, input[type="file"]) { cursor: pointer; }
:where(button:disabled) { cursor: not-allowed; }

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* The page itself supplies the two loader layers, keeping the markup on every page clean. */
html.page-loading,
html.page-continuing,
html.page-leaving { overflow: hidden; }

html.page-loading::before,
html.page-continuing::before,
html.page-ready::before,
html.page-leaving::before,
html.page-loading::after,
html.page-continuing::after,
html.page-ready::after,
html.page-leaving::after {
  position: fixed;
  pointer-events: none;
  content: "";
}

html.page-loading::before,
html.page-continuing::before,
html.page-ready::before,
html.page-leaving::before {
  z-index: 99998;
  inset: 0;
  background:
    radial-gradient(circle at 50% 47%, rgba(255, 255, 255, 0.24) 0 7%, transparent 30%),
    linear-gradient(135deg, #b9ebb3, #9ddc98);
  transform-origin: 50% 50%;
}

html[data-theme="dark"].page-loading::before,
html[data-theme="dark"].page-continuing::before,
html[data-theme="dark"].page-ready::before,
html[data-theme="dark"].page-leaving::before {
  background: linear-gradient(135deg, #121713, #0d110e);
}

html.page-loading::after,
html.page-continuing::after,
html.page-ready::after,
html.page-leaving::after {
  z-index: 99999;
  top: 50%;
  left: 50%;
  width: clamp(118px, 14vw, 170px);
  aspect-ratio: 333.34604 / 298.2939;
  background: url("/Loading.svg") center / contain no-repeat;
  transform-origin: 50% 55%;
}

html[data-theme="dark"].page-loading::after,
html[data-theme="dark"].page-continuing::after,
html[data-theme="dark"].page-ready::after,
html[data-theme="dark"].page-leaving::after {
  background: #263f2b;
  -webkit-mask: url("/Loading.svg") center / contain no-repeat;
  mask: url("/Loading.svg") center / contain no-repeat;
}

html[data-theme="dark"] .hero-logo img { visibility: hidden; }

html[data-theme="dark"] .hero-logo::after {
  position: absolute;
  inset: 0;
  background: #263f2b;
  -webkit-mask: url("/Logooo.svg") center / contain no-repeat;
  mask: url("/Logooo.svg") center / contain no-repeat;
  content: "";
}

html.page-loading::before { animation: cft-loader-cover 340ms var(--motion-smooth) both; }

html.page-loading::after {
  animation:
    cft-loader-arrive 650ms var(--motion-spring) both,
    cft-loader-breathe 1350ms 650ms ease-in-out infinite;
}

html.page-continuing::before { opacity: 1; }
html.page-continuing::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }

html.page-ready::before { animation: cft-loader-release 680ms 80ms var(--motion-spring) both; }
html.page-ready::after { animation: cft-loader-mark-release 460ms var(--motion-spring) both; }

html.page-settled::before,
html.page-settled::after { display: none; }

html.page-leaving::before { animation: cft-nav-cover 280ms var(--motion-smooth) both; }
html.page-leaving::after { animation: cft-nav-mark 280ms var(--motion-spring) both; }

html.page-leaving body {
  opacity: 0.68;
  transform: scale(0.992);
  transition: opacity 220ms var(--motion-smooth), transform 260ms var(--motion-smooth);
}

html.page-ready body { animation: cft-page-arrive 760ms 90ms var(--motion-spring) backwards; }

/* Shared controls keep the same physical response across old and new pages. */
:where(
  .utility-link,
  .profile-link,
  .top-link,
  .back-link,
  .home-link,
  .legal-nav-links a,
  .continue-button,
  .hero-cta,
  .edit-button,
  .browse-button,
  .new-button,
  .create-button,
  .cancel-button,
  .save-button,
  .reset-button,
  .row-action
) {
  transition:
    transform var(--motion-quick) var(--motion-spring),
    box-shadow var(--motion-quick) var(--motion-smooth),
    background-color var(--motion-quick) var(--motion-smooth),
    border-color var(--motion-quick) var(--motion-smooth),
    color var(--motion-quick) var(--motion-smooth),
    opacity var(--motion-quick) var(--motion-smooth) !important;
}

:where(input, select, textarea, .file-label) {
  transition:
    border-color var(--motion-quick) var(--motion-smooth),
    background-color 320ms var(--motion-smooth),
    color 320ms var(--motion-smooth),
    box-shadow var(--motion-quick) var(--motion-smooth),
    transform var(--motion-quick) var(--motion-spring);
}

:where(input, select, textarea):focus { transform: translateY(-1px); }

:where(.utility-nav, .top-actions, .legal-nav-links, .dialog-actions, .actions) {
  align-items: center;
}

:where(.tournament-grid, .impact-grid, .summary-grid, .stats, .content-grid) {
  align-items: stretch;
}

:where(.tournament-card, .impact-card, .summary-card, .stat, .panel) {
  height: 100%;
  isolation: isolate;
}

.tournament-card {
  box-shadow: 0 16px 36px rgba(44, 107, 52, 0.12), 0 3px 0 rgba(44, 107, 52, 0.08) !important;
}

html[data-theme="dark"] .tournament-card {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3), 0 3px 0 rgba(0, 0, 0, 0.2) !important;
}

.card-thumbnail,
.event-art { isolation: isolate; }

.capacity-fill { transition: width 720ms 180ms var(--motion-spring); }

.switch-track,
.switch-track::after { transition-duration: 320ms !important; transition-timing-function: var(--motion-spring) !important; }

.loading-state > div,
.tournament-load-error > div {
  animation: cft-loading-breathe 1300ms ease-in-out infinite;
}

:where(.options-menu:not([hidden])) { animation: cft-popover-in 360ms var(--motion-spring) both; }

:where(dialog[open]) { animation: cft-dialog-in 430ms var(--motion-spring) both; }
:where(dialog[open])::backdrop { animation: cft-backdrop-in 300ms ease-out both; }

:where(details[open] > :not(summary)) { animation: cft-details-in 320ms var(--motion-spring) both; }

:where(.tournament-card, .impact-card, .summary-card, .stat, .panel, .editor-card, .event-main, .roster, .legal-index, .legal-content) {
  transform-origin: 50% 100%;
  transition:
    transform 260ms var(--motion-spring),
    box-shadow 260ms var(--motion-smooth),
    border-color 260ms var(--motion-smooth),
    background-color 420ms var(--motion-smooth);
}

.page-ready :where(.hero-logo img, .event-logo, .empty-mark) {
  animation: cft-mark-arrive 780ms 180ms var(--motion-spring) backwards;
}

html[data-theme="dark"].page-ready .hero-logo::after {
  animation: cft-mark-arrive 780ms 180ms var(--motion-spring) backwards;
}

.page-ready .brand-logo { animation: cft-centered-mark-arrive 780ms 180ms var(--motion-spring) backwards; }

.page-ready :where(.brand-copy, .login-inner, .hero-copy, .welcome, .profile-hero, .editor-form, .legal-hero, .tournament-view) {
  animation: cft-content-arrive 760ms 210ms var(--motion-spring) backwards;
}

.page-ready :where(.utility-nav, .topbar, .legal-nav) {
  animation: cft-bar-arrive 600ms 160ms var(--motion-spring) backwards;
}

.page-ready :where(.section-heading, .panel-head, .event-kicker) {
  animation: cft-content-arrive 640ms 300ms var(--motion-spring) backwards;
}

.page-ready :where(.tournament-card, .impact-card, .summary-card, .stat, .panel, .legal-index, .legal-content) {
  animation: cft-card-arrive 650ms var(--motion-spring) backwards;
}

.page-ready :where(.tournament-card, .impact-card, .summary-card, .stat):nth-child(1) { animation-delay: 330ms; }
.page-ready :where(.tournament-card, .impact-card, .summary-card, .stat):nth-child(2) { animation-delay: 400ms; }
.page-ready :where(.tournament-card, .impact-card, .summary-card, .stat):nth-child(3) { animation-delay: 470ms; }
.page-ready :where(.tournament-card, .impact-card, .summary-card, .stat):nth-child(4) { animation-delay: 540ms; }
.page-ready :where(.tournament-card, .impact-card, .summary-card, .stat):nth-child(5) { animation-delay: 610ms; }
.page-ready :where(.tournament-card, .impact-card, .summary-card, .stat):nth-child(6) { animation-delay: 680ms; }

.page-ready .editor-card,
.page-ready .event-main { animation: cft-card-arrive 720ms 330ms var(--motion-spring) backwards; }
.page-ready .roster { animation: cft-card-arrive 720ms 410ms var(--motion-spring) backwards; }
.page-ready .legal-index { animation-delay: 320ms; }
.page-ready .legal-content { animation-delay: 390ms; }

@media (hover: hover) and (pointer: fine) {
  :where(
    .utility-link,
    .profile-link,
    .top-link,
    .back-link,
    .home-link,
    .legal-nav-links a,
    .hero-cta,
    .edit-button,
    .browse-button,
    .new-button,
    .save-button,
    .reset-button,
    .row-action
  ):not(:disabled):hover {
    transform: translateY(-2px);
  }

  :where(.tournament-card, .impact-card, .summary-card, .stat, .panel):hover {
    transform: translateY(-5px);
  }

  .tournament-template-logo,
  .event-logo { transition: transform 520ms var(--motion-spring); }

  .tournament-card:hover .tournament-template-logo,
  .event-main:hover .event-logo { transform: scale(1.055) rotate(-1deg); }
}

@keyframes cft-loader-cover {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes cft-loader-arrive {
  from { opacity: 0; transform: translate(-50%, -42%) scale(0.7) rotate(-4deg); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes cft-loader-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -53%) scale(1.035); }
}

@keyframes cft-loader-release {
  0% { opacity: 1; clip-path: circle(150% at 50% 50%); }
  100% { opacity: 1; clip-path: circle(0 at 50% 50%); }
}

@keyframes cft-loader-mark-release {
  from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -58%) scale(1.22); }
}

@keyframes cft-nav-cover {
  from { opacity: 0; clip-path: circle(0 at 50% 50%); }
  to { opacity: 1; clip-path: circle(150% at 50% 50%); }
}

@keyframes cft-nav-mark {
  from { opacity: 0; transform: translate(-50%, -42%) scale(0.78); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes cft-page-arrive {
  from { opacity: 0; transform: translateY(10px) scale(0.998); }
  to { opacity: 1; transform: none; }
}

@keyframes cft-mark-arrive {
  from { opacity: 0; transform: translateY(22px) scale(0.88) rotate(-2deg); }
  to { opacity: 1; transform: none; }
}

@keyframes cft-centered-mark-arrive {
  from { opacity: 0; transform: translateX(-50%) translateY(22px) scale(0.88) rotate(-2deg); }
  to { opacity: 1; transform: translateX(-50%); }
}

@keyframes cft-content-arrive {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes cft-bar-arrive {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}

@keyframes cft-card-arrive {
  from { opacity: 0; transform: translateY(28px) scale(0.975); }
  to { opacity: 1; transform: none; }
}

@keyframes cft-popover-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes cft-dialog-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes cft-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes cft-details-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes cft-loading-breathe {
  0%, 100% { opacity: 0.58; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@media (max-width: 560px) {
  :where(.utility-nav, .top-actions, .legal-nav-links) { gap: 6px; }

  :where(.utility-link, .profile-link, .top-link, .back-link, .home-link, .legal-nav-links a) {
    min-height: 36px;
  }

  :where(.tournament-card, .impact-card, .summary-card, .stat, .panel) {
    scroll-margin-top: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}