/* ANIMERIA — localhost-first monochrome interface refinement */

body {
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.055), transparent 38rem),
    var(--bg-deep);
  letter-spacing: -0.01em;
}

::selection {
  color: #050505;
  background: #f5f5f5;
}

.container {
  max-width: 1440px;
}

.navbar,
.navbar.scrolled {
  background: rgba(8, 8, 8, 0.9);
  border-bottom: 1px solid #242424;
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.brand-svg-logo,
.brand-logo-wrap img {
  filter: grayscale(1) contrast(1.1);
}

.brand-logo-wrap:hover .brand-svg-logo {
  filter: grayscale(1) contrast(1.1);
  transform: none;
}

.nav-link {
  border-radius: 6px;
  color: #969696;
  font-weight: 600;
}

.nav-link:hover {
  color: #f5f5f5;
  background: #151515;
}

.nav-link.active {
  color: #080808;
  background: #f3f3f3;
  box-shadow: none;
}

.search-trigger-btn,
.btn-icon,
.liquid-pill-btn,
.user-nav-btn,
.nav-login-btn,
.deck-dropdown-pill,
.episodes-search-box,
.episodes-filter-btn,
.setting-pill,
.step-btn {
  background: #131313;
  border: 1px solid #2c2c2c;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.search-trigger-btn:hover,
.btn-icon:hover,
.liquid-pill-btn:hover,
.user-nav-btn:hover,
.deck-dropdown-pill:hover,
.episodes-filter-btn:hover,
.setting-pill:hover,
.step-btn:hover {
  color: #ffffff;
  background: #202020;
  border-color: #505050;
  box-shadow: none;
  transform: none;
}

.btn,
.btn-primary,
.btn-secondary,
.auth-submit-btn {
  border-radius: 8px;
  box-shadow: none;
}

.btn-primary,
.auth-submit-btn {
  color: #090909;
  background: #f4f4f4;
  border: 1px solid #f4f4f4;
}

.btn-primary:hover,
.auth-submit-btn:hover {
  color: #000000;
  background: #ffffff;
  box-shadow: none;
  transform: translateY(-1px);
}

.hero-section {
  min-height: min(78vh, 820px);
  border-bottom: 1px solid #202020;
}

.hero-bg,
.hero-backdrop {
  filter: grayscale(0.35) contrast(1.08) brightness(0.72);
}

.hero-overlay {
  background:
    linear-gradient(90deg, #080808 0%, rgba(8, 8, 8, 0.92) 26%, rgba(8, 8, 8, 0.28) 70%, #080808 100%),
    linear-gradient(0deg, #080808 0%, transparent 45%);
}

.hero-content {
  max-width: 660px;
}

.hero-title {
  max-width: 14ch;
  font-size: clamp(2.55rem, 6vw, 5.4rem);
  line-height: 0.96;
  letter-spacing: -0.055em;
  text-shadow: none;
}

.hero-synopsis {
  color: #b0b0b0;
  line-height: 1.7;
  text-shadow: none;
}

.hero-dot {
  width: 18px;
  height: 2px;
  border-radius: 0;
  background: #4a4a4a;
}

.hero-dot.active {
  width: 34px;
  background: #f5f5f5;
  box-shadow: none;
}

.section {
  padding-top: clamp(3rem, 6vw, 5.5rem);
}

.section-header {
  margin-bottom: 1.35rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #222222;
}

.section-tag {
  color: #777777;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
}

.section-title {
  color: #f2f2f2;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  letter-spacing: -0.04em;
}

.genres-bar {
  padding: 0.35rem 0;
  gap: 0.45rem;
}

.genre-pill {
  color: #9b9b9b;
  background: transparent;
  border: 1px solid #292929;
  border-radius: 7px;
  box-shadow: none;
}

.genre-pill:hover,
.genre-pill.active {
  color: #080808;
  background: #eeeeee;
  border-color: #eeeeee;
  box-shadow: none;
  transform: none;
}

.shelf-rail {
  gap: 1rem;
  scroll-snap-type: x proximity;
}

.anime-card,
.watchlist-entry-card,
.watch-order-card,
.character-card,
.stat-metric-card,
.analytics-card,
.import-action-card {
  background: #0f0f0f;
  border: 1px solid #242424;
  border-radius: 10px;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.anime-card {
  padding: 0;
  overflow: hidden;
  scroll-snap-align: start;
}

.anime-card:hover,
.watchlist-entry-card:hover,
.watch-order-card:hover,
.stat-metric-card:hover,
.import-action-card:hover {
  background: #131313;
  border-color: #555555;
  box-shadow: none;
  transform: translateY(-3px);
}

.card-media,
.card-img,
.details-poster,
.details-poster-wrap,
.watch-order-media {
  border-radius: 8px;
}

.anime-card:hover .card-img {
  transform: scale(1.025);
  filter: saturate(0.88) contrast(1.04);
}

.card-details {
  padding: 0.85rem 0.8rem 1rem;
}

.card-title {
  color: #e9e9e9;
  font-weight: 650;
}

.card-meta {
  color: #777777;
}

.play-circle,
.card-quick-play {
  color: #070707;
  background: #f3f3f3;
  border-color: #f3f3f3;
  box-shadow: none;
}

.mono-tag,
.badge-tag,
.social-badge,
.profile-social-tag,
.stat-card-icon,
.watch-order-format-tag,
.watch-order-status,
.ep-filler-tag,
.spoiler-tag-pill {
  color: #d8d8d8 !important;
  background: #191919 !important;
  border-color: #3b3b3b !important;
  box-shadow: none !important;
}

.stat-card-icon,
.profile-social-tag,
.social-badge,
.import-action-card * {
  color: #dedede !important;
}

.mono-tag.solid,
.deck-menu-item.active .badge-tag,
.episode-item.active .ep-num-box {
  color: #080808 !important;
  background: #eeeeee !important;
  border-color: #eeeeee !important;
}

.card-progress-fill,
.breakdown-fill,
.scrubber-progress,
.scrubber-marker,
.setting-range-slider::-webkit-slider-thumb {
  background: #eeeeee !important;
  box-shadow: none !important;
}

.liquid-glass-card,
.details-modal,
.search-modal,
.drawer,
.user-nav-menu,
.auth-modal,
.deck-dropdown-menu,
.sub-settings-modal,
.comment-input-card,
.comment-card,
.episodes-sidebar {
  background: #0d0d0d;
  border: 1px solid #2a2a2a;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.search-input-box,
.form-input,
.comment-textarea,
.episodes-search-input,
.filter-select {
  color: #f2f2f2;
  background: #0a0a0a;
  border: 1px solid #303030;
  border-radius: 7px;
  box-shadow: none;
}

.search-input-box:focus,
.form-input:focus,
.comment-textarea:focus,
.episodes-search-input:focus,
.filter-select:focus {
  background: #0b0b0b;
  border-color: #858585;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
}

.drawer-item,
.search-item,
.user-menu-item,
.deck-menu-item,
.episode-item {
  border-radius: 7px;
}

.drawer-item:hover,
.search-item:hover,
.user-menu-item:hover,
.deck-menu-item:hover,
.episode-item:hover {
  color: #ffffff;
  background: #1a1a1a;
}

.deck-menu-item.active,
.episode-item.active {
  color: #ffffff;
  background: #202020;
  border-color: #606060;
  box-shadow: none;
}

.watch-main,
.watch-container {
  background: transparent;
}

.watch-grid {
  gap: 1rem;
}

.player-wrapper {
  border: 1px solid #292929;
  border-radius: 10px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55);
}

.player-top-bar,
.player-bottom-bar {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.86), transparent);
}

.player-bottom-bar {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.92), transparent);
}

.skip-intro-btn,
.ep-range-menu,
.episodes-filter-btn.active {
  color: #090909 !important;
  background: #f1f1f1 !important;
  border-color: #f1f1f1 !important;
  box-shadow: none !important;
}

.scrubber-marker.intro,
.scrubber-marker.outro {
  background: #a8a8a8 !important;
}

.comments-rule-warning-card,
.comment-text-container.spoiler-blurred-wrapper {
  color: #c8c8c8;
  background: #141414;
  border-color: #383838;
  box-shadow: none;
}

.warning-text-col,
.comment-like-btn.liked,
.user-menu-item.logout-btn,
.user-menu-item.logout-btn:hover {
  color: #d0d0d0;
}

.comment-like-btn.liked,
.user-menu-item.logout-btn:hover {
  background: #202020;
  border-color: #4a4a4a;
}

.profile-banner-img,
.details-banner-img {
  filter: grayscale(0.25) contrast(1.05);
}

.footer {
  margin-top: 6rem;
  background: #080808;
  border-top: 1px solid #222222;
}

.toast {
  color: #eeeeee;
  background: #121212;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

#topographyCanvas,
.topography-canvas {
  opacity: 0.1 !important;
  filter: grayscale(1);
}

@media (max-width: 768px) {
  .hero-section {
    min-height: 68vh;
  }

  .hero-overlay {
    background: linear-gradient(0deg, #080808 2%, rgba(8, 8, 8, 0.34) 72%, rgba(8, 8, 8, 0.72) 100%);
  }

  .hero-content {
    align-self: flex-end;
    padding-bottom: 4rem;
  }

  .section {
    padding-top: 3.25rem;
  }
}

/* Translucent surface hierarchy */
.navbar,
.navbar.scrolled {
  background: rgba(7, 7, 7, 0.64);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  animation: nav-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nav-link {
  position: relative;
  background: transparent;
}

.nav-link::after {
  position: absolute;
  right: 0.75rem;
  bottom: 0.28rem;
  left: 0.75rem;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 180ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link:hover::after,
.nav-link.active::after {
  opacity: 0.7;
  transform: scaleX(1);
}

.nav-link.active {
  color: #f4f4f4;
  background: rgba(255, 255, 255, 0.075);
}

.search-trigger-btn,
.btn-icon,
.liquid-pill-btn,
.user-nav-btn,
.nav-login-btn,
.deck-dropdown-pill,
.episodes-search-box,
.episodes-filter-btn,
.setting-pill,
.step-btn {
  background: rgba(21, 21, 21, 0.58);
  border-color: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.search-trigger-btn:hover,
.btn-icon:hover,
.liquid-pill-btn:hover,
.user-nav-btn:hover,
.deck-dropdown-pill:hover,
.episodes-filter-btn:hover,
.setting-pill:hover,
.step-btn:hover {
  background: rgba(42, 42, 42, 0.72);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.btn:active,
.btn-icon:active,
.genre-pill:active,
.deck-dropdown-pill:active,
.setting-pill:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 70ms;
}

.hero-overlay {
  background:
    linear-gradient(90deg, rgba(7, 7, 7, 0.96) 0%, rgba(7, 7, 7, 0.8) 28%, rgba(7, 7, 7, 0.14) 72%, rgba(7, 7, 7, 0.5) 100%),
    linear-gradient(0deg, #080808 0%, transparent 52%);
}

.hero-badges .mono-tag,
.hero-actions .btn-secondary {
  background: rgba(12, 12, 12, 0.44) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
}

.hero-slide.active .hero-badges,
.hero-slide.active .hero-title,
.hero-slide.active .hero-synopsis,
.hero-slide.active .hero-actions {
  animation: hero-copy-enter 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero-slide.active .hero-title { animation-delay: 70ms; }
.hero-slide.active .hero-synopsis { animation-delay: 130ms; }
.hero-slide.active .hero-actions { animation-delay: 190ms; }

.genre-pill {
  background: rgba(16, 16, 16, 0.36);
  border-color: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.genre-pill:hover,
.genre-pill.active {
  color: #f5f5f5;
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.32);
  transform: translateY(-1px);
}

.anime-card,
.watchlist-entry-card,
.watch-order-card,
.character-card,
.stat-metric-card,
.analytics-card,
.import-action-card {
  background: rgba(14, 14, 14, 0.62);
  border-color: rgba(255, 255, 255, 0.105);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.12);
}

.anime-card {
  position: relative;
  animation: surface-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition:
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 300ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.anime-card:nth-child(2) { animation-delay: 35ms; }
.anime-card:nth-child(3) { animation-delay: 70ms; }
.anime-card:nth-child(4) { animation-delay: 105ms; }
.anime-card:nth-child(5) { animation-delay: 140ms; }
.anime-card:nth-child(6) { animation-delay: 175ms; }
.anime-card:nth-child(n + 7) { animation-delay: 210ms; }

.anime-card::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: inherit;
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.anime-card:hover,
.watchlist-entry-card:hover,
.watch-order-card:hover,
.stat-metric-card:hover,
.import-action-card:hover {
  background: rgba(25, 25, 25, 0.72);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  transform: translateY(-5px);
}

.anime-card:hover::after {
  opacity: 1;
}

.anime-card:hover .card-img {
  transform: scale(1.045);
  filter: saturate(0.92) contrast(1.04) brightness(1.02);
}

.liquid-glass-card,
.details-modal,
.search-modal,
.drawer,
.user-nav-menu,
.auth-modal,
.deck-dropdown-menu,
.sub-settings-modal,
.comment-input-card,
.comment-card,
.episodes-sidebar {
  background: rgba(12, 12, 12, 0.76);
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(26px) saturate(120%);
  -webkit-backdrop-filter: blur(26px) saturate(120%);
}

.details-modal,
.search-modal,
.auth-modal,
.sub-settings-modal {
  animation: dialog-enter 0.38s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.modal-overlay {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(10px) saturate(75%);
  -webkit-backdrop-filter: blur(10px) saturate(75%);
}

.drawer,
.episodes-sidebar {
  background: rgba(9, 9, 9, 0.8);
}

.deck-compact-wrapper,
.playback-quick-settings-bar,
.watch-order-section,
.episodes-toolbar,
.profile-content-card {
  background: rgba(14, 14, 14, 0.5);
  border-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.player-wrapper {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
  transition: border-color 240ms ease, box-shadow 360ms ease;
}

.player-wrapper:hover,
.player-wrapper:focus-within {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.54);
}

.control-btn {
  transition: color 160ms ease, background-color 160ms ease, transform 180ms ease;
}

.control-btn:hover {
  transform: translateY(-1px);
}

.scrubber-thumb {
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;
}

.scrubber-container:hover .scrubber-thumb {
  transform: scale(1.18);
}

.toast {
  background: rgba(18, 18, 18, 0.8);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  animation: toast-enter 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.footer {
  background: rgba(8, 8, 8, 0.58);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.82);
  outline-offset: 3px;
}

@keyframes nav-enter {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-copy-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes surface-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dialog-enter {
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@supports (animation-timeline: view()) {
  .section-header,
  .watch-order-section,
  .episode-comments-section {
    animation: section-enter linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }

  @keyframes section-enter {
    from { opacity: 0.35; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (max-width: 768px) {
  .navbar,
  .navbar.scrolled {
    background: rgba(7, 7, 7, 0.78);
  }

  .hero-overlay {
    background: linear-gradient(0deg, #080808 4%, rgba(8, 8, 8, 0.32) 68%, rgba(8, 8, 8, 0.66) 100%);
  }

  .anime-card:hover,
  .watchlist-entry-card:hover,
  .watch-order-card:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}