/* ===== Anime | kai studio — компоненты и анимации ===== */
:root { --ease: cubic-bezier(0.2, 0.8, 0.2, 1); }
.no-ls #loading-screen { display: none; }
.page-main { min-height: calc(100vh - 64px); }

/* ---------- keyframes ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes drop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes drift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(6%,4%,0) scale(1.15); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.45); } 100% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } }
@keyframes underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- общие анимации ---------- */
.site-header { animation: drop 0.6s var(--ease) both; }
.page-main { animation: fade 0.5s ease both; transition: opacity 0.25s ease, transform 0.25s ease; }
body.leaving .page-main { opacity: 0; transform: translateY(-10px); }
.main-background::after { content: ''; position: absolute; inset: -20%; background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.07), transparent 40%), radial-gradient(circle at 75% 70%, rgba(255,255,255,0.05), transparent 35%); animation: drift 20s ease-in-out infinite; }
#progress { position: fixed; top: 0; left: 0; height: 2px; width: 100%; background: #fff; transform: scaleX(0); transform-origin: left; z-index: 2000; pointer-events: none; }

/* появление при прокрутке */
.js .reveal { opacity: 0; transform: translateY(28px) scale(0.97); transition: opacity 0.6s ease, transform 0.7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- страницы ---------- */
.page { max-width: 1400px; margin: 0 auto; padding: 40px 32px 110px; position: relative; z-index: 2; }
.page > section { margin-bottom: 56px; }
.page-title { position: relative; display: inline-block; font-size: 28px; font-weight: 300; color: #fff; letter-spacing: -0.5px; margin: 0 0 24px; padding-bottom: 8px; animation: rise 0.7s var(--ease) both; }
.page-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.35); transform-origin: left; animation: underline 0.9s 0.3s var(--ease) both; }
h1.page-title { font-size: 40px; letter-spacing: -1px; }
.empty { color: #888; text-align: center; padding: 60px 0; line-height: 1.6; }
.back-link { display: inline-block; margin-bottom: 24px; font-size: 14px; color: #b0b0b0; transition: color 0.2s ease, transform 0.2s ease; }
.back-link::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.back-link:hover { color: #fff; transform: translateX(-4px); }

/* кнопка */
.contact-button { position: relative; overflow: hidden; display: inline-block; margin-top: 24px; padding: 14px 32px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 24px; color: #fff; font-size: 14px; font-weight: 500; transition: all 0.25s var(--ease); }
.contact-button::after { content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.25), transparent); transform: skewX(-20deg); }
.contact-button:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); transform: translateY(-2px); color: #fff; }
.contact-button:hover::after { left: 130%; transition: left 0.7s ease; }
.contact-button:active { transform: scale(0.97); }

/* ---------- карточки ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px; }
.card { display: block; color: #e0e0e0; transition: transform 0.35s var(--ease); }
.card:hover { transform: translateY(-6px); }
.card-poster { position: relative; aspect-ratio: 2 / 3; border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease;
  background: linear-gradient(110deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 70%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
.card-poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.5s ease, transform 0.7s var(--ease); }
.card:hover .card-poster { border-color: rgba(255,255,255,0.35); box-shadow: 0 14px 34px rgba(0,0,0,0.55); }
.card:hover .card-poster img { transform: scale(1.08); }
.card-poster::before { content: ''; position: absolute; top: 50%; left: 50%; z-index: 2; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; opacity: 0; transform: scale(0.5); transition: opacity 0.3s ease, transform 0.4s var(--ease);
  background: rgba(255,255,255,0.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%230a0a0a'/%3E%3C/svg%3E") 54% center / 46% no-repeat; }
.card:hover .card-poster::before { opacity: 1; transform: scale(1); }
.card-poster::after { content: ''; position: absolute; top: 0; left: -90%; z-index: 1; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.18), transparent); transform: skewX(-18deg); pointer-events: none; }
.card:hover .card-poster::after { left: 140%; transition: left 0.8s ease; }
.badge { position: absolute; top: 8px; left: 8px; z-index: 3; padding: 3px 9px; font-size: 11px; font-weight: 500; color: #fff; background: rgba(10,10,10,0.75); border: 1px solid rgba(255,255,255,0.15); border-radius: 10px; backdrop-filter: blur(4px); }
.badge-r { left: auto; right: 8px; }
.badge-inline { position: static; margin-left: 12px; vertical-align: middle; animation: pop 0.5s 0.4s var(--ease) both; }
.card-title { margin-top: 10px; font-size: 14px; font-weight: 500; color: #fff; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.2s ease; }
.card:hover .card-title { color: #fff; text-shadow: 0 0 14px rgba(255,255,255,0.5); }
.card-sub { margin-top: 4px; font-size: 12px; color: #888; }
.js .card-poster img, .js .ep-thumb img, .js .release-poster img { opacity: 0; }
.js img.loaded { opacity: 1; }

/* ---------- фильтры и пагинация ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 32px; animation: rise 0.7s 0.1s var(--ease) both; }
.filters input, .filters select { height: 38px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 19px; padding: 0 16px; color: #fff; font-size: 14px; font-family: inherit; outline: none; transition: all 0.2s ease; }
.filters input:focus, .filters select:focus { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); transform: translateY(-1px); }
.filters select option { background: #1a1a1a; color: #fff; }
.filters button { height: 38px; padding: 0 24px; background: #fff; color: #0a0a0a; border: none; border-radius: 19px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s ease; }
.filters button:hover { background: #e0e0e0; transform: translateY(-2px); }
.filters button:active { transform: scale(0.96); }
.pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.pagination a, .pagination span { min-width: 38px; height: 38px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12); border-radius: 19px; transition: all 0.2s ease; }
.pagination a:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.pagination .current { background: #fff; color: #0a0a0a; border-color: #fff; font-weight: 600; }

/* ---------- расписание ---------- */
.day-title { font-size: 22px; font-weight: 400; color: #fff; margin: 0 0 20px; }

/* ---------- релиз ---------- */
.release { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; }
.release-poster { perspective: 900px; animation: rise 0.8s var(--ease) both; }
.release-poster img { width: 100%; display: block; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.6); transition: transform 0.25s ease, opacity 0.5s ease; will-change: transform; }
.release-info > * { animation: rise 0.7s var(--ease) both; }
.release-info > :nth-child(2) { animation-delay: 0.08s; }
.release-info > :nth-child(3) { animation-delay: 0.16s; }
.release-info > :nth-child(4) { animation-delay: 0.24s; }
.release-info > :nth-child(5) { animation-delay: 0.32s; }
.release-info > :nth-child(6) { animation-delay: 0.4s; }
.release-info > :nth-child(7) { animation-delay: 0.48s; }
h1.release-title { font-size: 44px; font-weight: 300; color: #fff; letter-spacing: -1px; line-height: 1.1; margin: 0 0 8px; }
.release-en { color: #888; font-size: 16px; margin: 0 0 20px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tag { padding: 5px 14px; font-size: 13px; color: #d0d0d0; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; transition: all 0.2s ease; animation: pop 0.45s var(--ease) backwards; }
.tag:nth-child(2) { animation-delay: 0.05s; } .tag:nth-child(3) { animation-delay: 0.1s; } .tag:nth-child(4) { animation-delay: 0.15s; } .tag:nth-child(5) { animation-delay: 0.2s; } .tag:nth-child(n+6) { animation-delay: 0.25s; }
.tag-link:hover { background: rgba(255,255,255,0.14); color: #fff; transform: translateY(-2px); }
.release-desc { max-width: 70ch; margin: 24px 0; font-size: 15px; line-height: 1.8; color: #b0b0b0; white-space: pre-line; }
.notice { max-width: 70ch; margin: 0 0 20px; padding: 12px 16px; font-size: 13px; line-height: 1.6; color: #e0a0a0; background: rgba(231,76,60,0.1); border-left: 2px solid #e74c3c; border-radius: 4px; }
.eps-title { margin-top: 56px; }

/* ---------- серии ---------- */
.ep-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ep-item { display: flex; gap: 14px; padding: 10px; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 4px; transition: all 0.3s var(--ease), opacity 0.6s ease; }
.ep-item:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); transform: translateX(6px); }
.ep-item.current { border-color: #fff; background: rgba(255,255,255,0.08); animation: ring 2s ease-out infinite; }
.ep-item.watched .ep-num::after { content: 'Просмотрено'; margin-left: 10px; font-size: 11px; font-weight: 400; color: #4ade80; }
.ep-thumb { flex: 0 0 112px; aspect-ratio: 16 / 9; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; }
.ep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.5s ease, transform 0.5s var(--ease); }
.ep-item:hover .ep-thumb img { transform: scale(1.1); }
.ep-meta { min-width: 0; }
.ep-num { font-size: 14px; font-weight: 500; color: #fff; }
.ep-name, .ep-dur { margin-top: 3px; font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- плеер ---------- */
.watch { max-width: 1200px; }
h1.watch-title { font-size: 36px; font-weight: 300; color: #fff; letter-spacing: -1px; margin: 0 0 6px; animation: rise 0.7s var(--ease) both; }
.player-wrap { position: relative; margin-top: 20px; background: #000; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.6); animation: rise 0.9s 0.1s var(--ease) both; }
.player-wrap video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.player-bar { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 16px; margin-top: 20px; animation: rise 0.9s 0.2s var(--ease) both; }
.ep-nav { display: flex; gap: 12px; }
.ep-nav .contact-button { margin-top: 0; padding: 10px 24px; }

/* ---------- ошибка / поиск ---------- */
.back-button { top: 80px; }
.error-wrapper { min-height: calc(100vh - 64px); }
.error-text h1 { animation: pop 0.7s var(--ease) both; }
.result-item { animation: rise 0.6s var(--ease) backwards; }
.result-item:nth-child(2) { animation-delay: 0.05s; } .result-item:nth-child(3) { animation-delay: 0.1s; } .result-item:nth-child(4) { animation-delay: 0.15s; } .result-item:nth-child(n+5) { animation-delay: 0.2s; }

/* ---------- доступность ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- адаптив ---------- */
@media (max-width: 900px) { .release { grid-template-columns: 200px 1fr; gap: 28px; } }
@media (max-width: 768px) {
  .page { padding: 28px 16px 100px; }
  h1.page-title { font-size: 32px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
  .release { grid-template-columns: 1fr; }
  .release-poster { max-width: 220px; }
  h1.release-title { font-size: 32px; }
  h1.watch-title { font-size: 28px; }
  .ep-list { grid-template-columns: 1fr; }
  .back-button { top: 72px; }
}

/* ---------- аккаунт ---------- */
.nav-account::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.nav-account span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-card { max-width: 440px; margin: 24px auto 0; padding: 36px 32px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; backdrop-filter: blur(10px); animation: rise 0.7s var(--ease) both; }
.auth-card .page-title { display: block; }
.auth-note { margin-bottom: 24px; font-size: 14px; line-height: 1.7; color: #b0b0b0; }
.auth-note strong { color: #fff; font-weight: 600; }
.auth-field { display: block; margin-bottom: 16px; }
.auth-field span { display: block; margin-bottom: 6px; font-size: 12px; color: #888; }
.auth-field input { width: 100%; height: 44px; padding: 0 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 22px; color: #fff; font-size: 14px; font-family: inherit; outline: none; transition: all 0.2s ease; }
.auth-field input:focus { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.3); transform: translateY(-1px); }
.auth-hint { margin: -4px 0 16px; font-size: 12px; line-height: 1.6; color: #777; }
.auth-error { margin: 0 0 16px; padding: 10px 14px; font-size: 13px; line-height: 1.5; color: #e0a0a0; background: rgba(231,76,60,0.1); border-left: 2px solid #e74c3c; border-radius: 4px; animation: pop 0.3s var(--ease) both; }
.auth-error[hidden] { display: none; }
.auth-submit { width: 100%; height: 46px; background: #fff; color: #0a0a0a; border: 0; border-radius: 23px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: all 0.2s ease; }
.auth-submit:hover { background: #e0e0e0; transform: translateY(-2px); }
.auth-submit:active { transform: scale(0.97); }
.auth-submit:disabled { opacity: 0.5; cursor: wait; transform: none; }
.auth-alt { margin-top: 22px; text-align: center; font-size: 13px; color: #888; }
.auth-alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.account-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.account-actions .contact-button { margin-top: 0; }
button.contact-button { font-family: inherit; cursor: pointer; }
button.contact-button:disabled { opacity: 0.5; cursor: wait; }
@media (max-width: 768px) { .auth-card { padding: 28px 20px; } }