/* Native-feeling motion for the Mini App. Keep color/layout changes immediate;
   only transform and opacity are animated on the compositor. */
:root {
  --motion-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-exit: cubic-bezier(0.7, 0, 0.84, 0);
}

/* Legacy component styles contain color, border and size transitions. Limit
   all transitions to compositor-friendly properties without retaining layers. */
*, *::before, *::after {
  transition-property: transform, opacity !important;
  transition-timing-function: var(--motion-enter) !important;
  animation-timing-function: var(--motion-enter) !important;
}
:is(.comment-skeleton__avatar, .comment-skeleton__content i,
    .catalog-skeleton i, .chapter-skeleton i, .reader-loading-skeleton i)::after {
  animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1) !important;
}

/* UI chrome is not reading material. Text fields, descriptions and comments
   explicitly remain selectable and copyable. */
:is(button, a[href], nav, summary, [role="button"], [role="tab"], .title-card,
    .featured-card, .project-row, .release-row, .catalog-card,
    .chapter-row, .notification-item, .profile-recent, .admin-metric-card) {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
:is(.title-description, .profile-about, .comment-body, .comment-body *,
    .discussion-feed blockquote, .discussion-feed pre, .discussion-feed code,
    .admin-card textarea, .comment-form textarea, input:not([type="checkbox"]):not([type="radio"]),
    textarea, [contenteditable="true"]) {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
:is(button, a[href], input, select, textarea, summary, [role="button"], [role="tab"]) {
  -webkit-tap-highlight-color: transparent;
}

/* A tiny press response replaces the platform's tap flash. Avoid animating
   background/border so the feedback stays cheap on older phones. */
:is(button:not(:disabled), a[href], summary, [role="button"], [role="tab"],
    .title-card, .featured-card, .project-row, .release-row, .catalog-card,
    .chapter-row, .notification-item) {
  transition: transform 180ms var(--motion-enter), opacity 180ms var(--motion-enter) !important;
}
@media (hover: hover) {
  :is(button:not(:disabled), a[href], summary, [role="button"], [role="tab"],
      .title-card, .featured-card, .project-row, .release-row, .catalog-card,
      .chapter-row, .notification-item):hover { opacity: .9; }
}
:is(button:not(:disabled), a[href], summary, [role="button"], [role="tab"],
    .featured-card, .project-row, .release-row, .catalog-card,
    .chapter-row, .notification-item):active {
  transform: scale(.97) !important;
  opacity: .82;
  transition-timing-function: var(--motion-exit) !important;
}
:is(button, a[href], summary, [role="button"], [role="tab"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* The screen enter is triggered by app.js only when the route actually changes. */
:is(.home-screen, .catalog-screen, .title-screen, .library-screen,
    .profile-screen, .notifications-screen, .admin-screen) { animation: none !important; }

/* Existing overlays and content panels use the same snappy easing. */
:is(.title-panel:not([hidden]), .profile-panel:not([hidden]),
    .koma-profile-content, .koma-profile-panel, .koma-profile-grid,
    .comment-more__menu, .comment-inline-edit, .comment-inline-reply,
    .comment-replies, .discussion-feed > .group, .comment-reaction-picker,
    .title-more-menu, .notification-popover, .reader-dialog[open]) {
  animation-timing-function: var(--motion-enter) !important;
}
:is(.koma-profile-banner, .koma-profile-title, .catalog-search,
    .discussion-feed textarea, .comment-author__avatar,
    .chapter-filter, .notification-item) {
  transition-property: transform, opacity !important;
  transition-timing-function: var(--motion-enter) !important;
}
.comment-notification-target { animation: none !important; outline: 2px solid var(--accent); outline-offset: 2px; }
.mobile-nav :is(a, button)::before,
.mobile-nav svg { transition-property: transform, opacity !important; transition-timing-function: var(--motion-spring) !important; }

/* The selected pill overshoots once, then settles behind the icon. */
.mobile-nav a[aria-current="page"]::before {
  animation: nav-pill-settle 420ms var(--motion-spring) both;
  animation-timing-function: var(--motion-spring) !important;
}
.mobile-nav a[aria-current="page"] .mobile-nav-icon {
  animation: nav-icon-settle 360ms var(--motion-enter) both;
}
@keyframes nav-pill-settle {
  0% { opacity: .2; transform: scale(.58); }
  58% { opacity: 1; transform: scale(1.13); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes nav-icon-settle {
  0% { opacity: .7; transform: translateY(3px) scale(.88); }
  60% { opacity: 1; transform: translateY(-2px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Two overlapping glyphs crossfade: outline before liking, solid heart after. */
.comment-heart-icon { position: relative; display: inline-grid; place-items: center; width: 17px; height: 17px; }
.comment-heart-icon svg { grid-area: 1 / 1; transition: opacity 190ms var(--motion-enter) !important; }
.comment-heart-outline { fill: none; opacity: 1; }
.comment-heart-fill { fill: #e98396; stroke: #e98396; opacity: 0; }
.comment-reaction-heart.is-active .comment-heart-outline { opacity: 0; }
.comment-reaction-heart.is-active .comment-heart-fill { opacity: 1; }
.comment-reaction-heart:active svg,
.comment-reaction-pill:active svg { transform: none !important; }
.comment-reaction-choice svg { transform-origin: center; }
.comment-reaction-choice:hover svg { transform: scale(1.08) rotate(-4deg); }
.comment-reaction-picker-surface { transform-origin: bottom left; }
.reader-top-bar { transition: transform 190ms var(--motion-enter), opacity 190ms var(--motion-enter) !important; will-change: transform, opacity; }
.reader-page img { transition: opacity 180ms var(--motion-enter) !important; }
#progress-fill { width: 100% !important; transform-origin: left center; transition: transform 120ms var(--motion-enter) !important; }

/* Shared select from the main site, backed by a native select for form values. */
.app-select { display:inline-block; position:relative; width:100%; min-width:0; vertical-align:middle; }
.app-select--compact { width:auto; min-width:150px; }
.discussion-head .app-select { margin-left:auto; }
.app-select-native {
  position:absolute !important; width:1px !important; height:1px !important;
  min-width:0 !important; min-height:0 !important; padding:0 !important;
  margin:0 !important; border:0 !important; opacity:0 !important;
  clip-path:inset(50%); pointer-events:none !important;
}
.app-select-trigger {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; min-height:42px; padding:10px 12px;
  border:1px solid var(--line); border-radius:11px;
  background:var(--surface-2); color:var(--text);
  font:inherit; font-size:13px; text-align:left; cursor:pointer;
}
.app-select--compact .app-select-trigger { min-width:150px; }
.app-select-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app-select-chevron { width:16px; height:16px; flex:none; color:var(--muted); transition:transform 230ms var(--motion-spring) !important; }
.app-select.is-open .app-select-chevron { transform:rotate(180deg); }
.app-select.is-open .app-select-trigger { border-color:var(--accent); }
.app-select-trigger:disabled { opacity:.56; cursor:not-allowed; }
.app-select-menu {
  position:fixed; z-index:1200; box-sizing:border-box; overflow-y:auto;
  padding:6px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface-2); color:var(--text);
  box-shadow:0 18px 70px #0008;
  transform-origin:top center;
  animation:app-select-enter 180ms var(--motion-enter) both !important;
  overscroll-behavior:contain;
}
.app-select-menu[data-side="top"] { transform-origin:bottom center; animation-name:app-select-enter-top !important; }
.app-select-menu[hidden] { display:none !important; }
.app-select-option {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; min-height:39px; padding:9px 11px; border:0; border-radius:9px;
  background:transparent; color:var(--text); font:inherit; font-size:13px;
  text-align:left; cursor:pointer;
}
.app-select-option[aria-selected="true"] { color:var(--accent); }
.app-select-option:disabled { opacity:.4; cursor:not-allowed; }
.app-select-option:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.app-select-check { flex:none; font-weight:700; opacity:0; }
.app-select-option[aria-selected="true"] .app-select-check { opacity:1; }
@media (hover:hover) {
  .app-select-trigger:hover { opacity:.9; }
  .app-select-option:not(:disabled):hover { background:var(--surface-3); opacity:1; }
}
@keyframes app-select-enter { from { opacity:0; transform:translateY(-6px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes app-select-enter-top { from { opacity:0; transform:translateY(6px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }

/* Underlines and panels move in on each tab change without layout animation. */
.title-tab::after, .koma-profile-tabs button::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--accent); opacity:0; transform:scaleX(.45);
  transform-origin:center;
  transition:transform 230ms var(--motion-enter), opacity 180ms var(--motion-enter) !important;
}
.title-tab[aria-selected="true"]::after,
.koma-profile-tabs button[aria-current="page"]::after { opacity:1; transform:scaleX(1); }
.koma-profile-tabs button { position:relative; border-bottom-color:transparent !important; }
:is(.title-panel, .profile-panel, .koma-profile-panel, .admin-panel-content):not([hidden]) {
  animation:app-tab-enter 220ms var(--motion-enter) both !important;
}
@keyframes app-tab-enter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
.filters-toggle svg:last-child { transition:transform 230ms var(--motion-spring) !important; }

/* Touch browsers can keep :hover after a tap; preserve only the selected state. */
@media (hover:none) {
  .chapter-filter:not([aria-pressed="true"]):hover { background:var(--color-surface-2); transform:none; }
  .genre-chip:not([aria-pressed="true"]):hover { background:var(--surface-2); }
  .app-select-option:hover { background:transparent; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  :is(button, a[href], summary, [role="button"], [role="tab"]):active { transform: none !important; }
  .reader-top-bar { will-change: auto; }
}