/* SORA Project V123 — focused UI, optimistic feedback and low-end performance. */

:root {
  --v123-ease: cubic-bezier(.16, 1, .3, 1);
  --v123-line: rgba(113, 177, 223, .16);
  --v123-panel: rgba(8, 18, 30, .88);
  --v123-panel-strong: rgba(9, 20, 34, .96);
}

html { scroll-behavior: smooth; overflow-x: clip; }
body { overflow-x: clip; }

/* Old generations applied several page-entry animations at once. The native
   View Transition layer remains the single cross-page animation owner. */
body,
body.page-ready,
body.page-ready main,
body.page-ready .site-header,
body.page-ready .site-footer,
.release-page {
  animation: none !important;
}

body.v108-fallback-transitions.v108-motion-ready main,
body.v108-fallback-transitions.v108-page-leaving main {
  min-height: var(--v108-stable-height, auto);
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) !important;
}

::view-transition-old(root),
::view-transition-new(root) {
  backface-visibility: hidden;
  transform-origin: 50% 30%;
}

/* Participant shortcuts — real avatar stacks when data exists, restrained
   monochrome fallbacks otherwise. */
.release-page .release-participant-actions {
  gap: 10px !important;
}

.release-page .release-participant-button {
  grid-template-columns: 72px minmax(0, 1fr) auto !important;
  min-height: 64px !important;
  padding: 9px 13px !important;
  border: 1px solid var(--v123-line) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(18, 34, 51, .94), rgba(8, 17, 29, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  transform: translate3d(0, 0, 0);
  transition: transform .36s var(--v123-ease), opacity .2s ease !important;
}

.release-page .release-participant-button::before { display: none !important; }
.release-page .release-participant-button:hover,
.release-page .release-participant-button:focus-visible {
  border-color: rgba(72, 185, 247, .34) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 14px 30px rgba(0, 0, 0, .16) !important;
  transform: translate3d(0, -2px, 0) scale(1.015) !important;
}

.release-participant-visual {
  display: flex !important;
  align-items: center;
  width: 72px !important;
  min-width: 72px !important;
  padding-inline-start: 2px;
}

.release-participant-visual > span {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px !important;
  height: 36px !important;
  margin-inline-start: -10px !important;
  overflow: hidden;
  color: #bfe9ff;
  border: 2px solid #091522 !important;
  border-radius: 50% !important;
  background: #13263a !important;
  box-shadow: none !important;
  font-size: 12px;
  transform: translate3d(0, 0, 0);
  transition: transform .34s var(--v123-ease), opacity .2s ease !important;
}

.release-participant-visual > span:first-child { z-index: 3; margin-inline-start: 0 !important; }
.release-participant-visual > span:nth-child(2) { z-index: 2; }
.release-participant-visual > span:nth-child(3) { z-index: 1; }
.release-participant-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.release-participant-button:hover .release-participant-visual > span:first-child { transform: translate3d(-2px, -1px, 0) !important; }
.release-participant-button:hover .release-participant-visual > span:nth-child(2) { transform: translate3d(0, -2px, 0) !important; }
.release-participant-button:hover .release-participant-visual > span:nth-child(3) { transform: translate3d(2px, -1px, 0) !important; }
.release-page .release-participant-button-copy strong { font-size: 13px !important; letter-spacing: -.01em; }
.release-page .release-participant-button-copy small { margin-top: 3px !important; font-size: 10px !important; }

.release-participants-dialog .release-participants-modal-card {
  background: linear-gradient(165deg, rgba(15, 29, 44, .985), rgba(5, 12, 22, .99)) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42) !important;
}

.release-participants-modal-symbol,
.release-team-modal-icon {
  color: #bcecff !important;
  border: 1px solid rgba(90, 188, 239, .18) !important;
  background: rgba(45, 145, 205, .09) !important;
  box-shadow: none !important;
}

.release-team-modal-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.release-team-modal-item {
  grid-template-columns: 42px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: 12px !important;
  min-height: 104px !important;
  padding: 16px !important;
  border: 1px solid rgba(112, 171, 213, .13) !important;
  border-radius: 17px !important;
  background: rgba(4, 12, 22, .5) !important;
}

.release-team-modal-icon { width: 42px !important; height: 42px !important; border-radius: 13px !important; }
.release-team-modal-item small { color: #7e91a6 !important; font-size: 10px !important; letter-spacing: .08em !important; }
.release-team-modal-item strong { margin-top: 6px !important; font-size: 13px !important; line-height: 1.42 !important; }

/* Recommendation rail: equal gutters and symmetric arrow columns. */
.release-page .recommendations-section {
  width: min(1120px, calc(100vw - 32px)) !important;
  margin-inline: auto !important;
}

.release-page .recommendations-heading { padding: 0 48px 14px !important; }
.release-page .recommendations-carousel,
.release-page .recommendations-carousel.has-controls {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin-inline: auto !important;
}

.release-page .recommendations-row {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 6px 0 14px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.release-page .recommendations-carousel.has-overflow .recommendations-row { justify-content: flex-start !important; }
.release-page .recommendations-row::-webkit-scrollbar { display: none; }
.release-page .recommend-card {
  flex: 0 0 132px !important;
  width: 132px !important;
  min-width: 132px !important;
  max-width: 132px !important;
  margin: 0 !important;
  scroll-snap-align: start;
  transform: translate3d(0, 0, 0);
  transition: transform .38s var(--v123-ease), opacity .2s ease !important;
}

.release-page .recommend-card:hover { transform: translate3d(0, -4px, 0) scale(1.025) !important; }
.release-page .recommend-poster {
  position: relative;
  display: block;
  width: 132px !important;
  height: 190px !important;
  overflow: hidden;
  border-radius: 16px !important;
  background: #08111d !important;
  transform: translate3d(0, 0, 0) !important;
}

.release-page .recommend-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.release-page .recommend-poster em { position: absolute; top: 8px; right: 8px; }
.release-page .recommendations-carousel .recommend-arrow { position: static !important; margin: 0 !important; transform: translate3d(0, 0, 0) !important; }
.release-page .recommendations-carousel .recommend-arrow:hover { transform: translate3d(0, -1px, 0) scale(1.04) !important; }

/* Comment composer — tools share one footer row and the native checkbox is
   visually replaced by an accessible chip. */
.comment-form textarea { margin-bottom: 0 !important; resize: vertical; }
.comment-composer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 11px;
}

.comment-composer-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.comment-emoji-trigger,
.comment-spoiler-chip > span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  color: #92a7bb;
  border: 1px solid rgba(112, 165, 204, .15);
  border-radius: 11px;
  background: rgba(16, 31, 47, .65);
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  transition: transform .28s var(--v123-ease), opacity .2s ease !important;
}

.comment-emoji-trigger:hover,
.comment-spoiler-chip:hover > span { color: #eef9ff; transform: translate3d(0, -1px, 0) !important; }
.comment-spoiler-chip { position: relative; display: inline-flex; margin: 0 !important; }
.comment-spoiler-chip input {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  white-space: nowrap;
}

.comment-spoiler-chip:has(input:checked) > span,
.comment-spoiler-chip.is-active > span {
  color: #fff0b8;
  border-color: rgba(250, 190, 72, .38);
  background: rgba(133, 88, 16, .28);
}

.comment-spoiler-chip input:focus-visible + span { outline: 2px solid rgba(57, 174, 242, .72); outline-offset: 2px; }
.comment-form .btn[type="submit"] { min-width: 124px; justify-content: center; }
.comment-list { display: grid !important; gap: 12px !important; }
.comment {
  content-visibility: auto;
  contain-intrinsic-size: 116px;
  transform: translate3d(0, 0, 0);
}
.comment.is-optimistic { opacity: .68; }
.comment.is-optimistic .comment-date::after { content: " · отправляется"; color: #4fbdf6; }
.comment.is-send-error { border-color: rgba(255, 92, 115, .45) !important; }

/* Rating is a single compact product card, with immediate visual feedback. */
.release-page .rate-card {
  width: 100% !important;
  max-width: 270px !important;
  padding: 16px !important;
  border: 1px solid rgba(115, 171, 211, .15) !important;
  border-radius: 20px !important;
  background: linear-gradient(160deg, rgba(16, 31, 47, .94), rgba(7, 15, 26, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

.rate-card-heading { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; }
.rate-card-heading > span { display: grid; place-items: center; width: 38px; height: 38px; color: #ffd45f; border-radius: 12px; background: rgba(255, 196, 61, .09); }
.rate-card-heading h3 { margin: 0 !important; font-size: 15px !important; }
.rate-card-heading p { margin: 3px 0 0; color: #71869a; font-size: 9.5px; line-height: 1.3; }
.score-picker-stars { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 6px !important; margin-top: 14px; }
.score-picker-stars label { min-width: 0; }
.score-picker-stars label span {
  display: grid !important;
  place-items: center;
  width: 100% !important;
  height: 42px !important;
  color: #536579 !important;
  border: 1px solid rgba(118, 163, 198, .14) !important;
  border-radius: 12px !important;
  background: rgba(5, 13, 23, .66) !important;
  transform: translate3d(0, 0, 0);
  transition: transform .3s var(--v123-ease), opacity .2s ease !important;
}
.score-picker-stars label:hover span,
.score-picker-stars label.is-preview span { transform: translate3d(0, -2px, 0) scale(1.04); }
.score-picker-stars label.is-filled span,
.score-picker-stars label.is-preview span { color: #ffd65d !important; border-color: rgba(255, 199, 61, .4) !important; background: rgba(126, 86, 12, .24) !important; }
.rating-instant-status { min-height: 17px; margin: 10px 0 0 !important; color: #7f95aa !important; font-size: 10px !important; text-align: center; }
.rate-form.is-saving { opacity: .76; }

/* Profile modal geometry. */
.profile-edit-actions .btn-secondary { display: inline-flex !important; align-items: center; justify-content: center !important; text-align: center !important; }
.profile-edit-card .avatar-frame-picker {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important;
  gap: 10px !important;
}
.profile-edit-card .avatar-frame-choice { min-height: 126px !important; aspect-ratio: 1 / 1; }
.profile-edit-card .avatar-frame-choice .avatar-frame-preview {
  width: min(80px, 78%) !important;
  height: auto !important;
  min-width: 0 !important;
  aspect-ratio: 1 / 1;
}
.profile-edit-card .avatar-frame-choice { content-visibility: auto; contain-intrinsic-size: 126px; }

/* Dense off-screen content is skipped until it nears the viewport. */
.release-card,
.project-release-card,
.release-character-modal-card,
.admin-schedule-card {
  content-visibility: auto;
  contain-intrinsic-size: 220px;
}

img[loading="lazy"] { content-visibility: auto; }

/* Optimistic admin feedback. */
.admin-schedule-card.is-saving { opacity: .72; }
.admin-schedule-card.is-saved { transform: translate3d(0, -1px, 0); }
.admin-schedule-card.is-save-error { outline: 1px solid rgba(255, 91, 112, .55); }
.admin-optimistic-toast {
  position: fixed;
  z-index: 10000;
  right: 18px;
  bottom: 18px;
  max-width: min(340px, calc(100vw - 36px));
  padding: 11px 14px;
  color: #eaf8ff;
  border: 1px solid rgba(84, 190, 239, .28);
  border-radius: 13px;
  background: rgba(8, 24, 38, .96);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .32);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: transform .32s var(--v123-ease), opacity .24s ease;
}
.admin-optimistic-toast.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
.admin-optimistic-toast.is-error { color: #ffd9df; border-color: rgba(255, 92, 115, .42); }

@media (min-width: 901px) {
  .admin-sidebar { position: sticky !important; top: 0 !important; height: 100dvh !important; overflow-y: auto !important; }
}

@media (hover: hover) and (pointer: fine) {
  .release-page .release-participant-button,
  .release-page .recommend-card,
  .score-picker-stars label span { will-change: transform; }
}

@media (max-width: 900px) {
  .release-team-modal-grid { grid-template-columns: 1fr !important; }
  .release-team-modal-item { min-height: 0 !important; }
  .release-page .recommend-card { flex-basis: 122px !important; width: 122px !important; min-width: 122px !important; max-width: 122px !important; }
  .release-page .recommend-poster { width: 122px !important; height: 176px !important; }
}

@media (max-width: 640px) {
  .release-page .release-participant-button { grid-template-columns: 62px minmax(0, 1fr) auto !important; min-height: 62px !important; }
  .release-participant-visual { width: 62px !important; min-width: 62px !important; }
  .release-participant-visual > span { width: 31px !important; height: 31px !important; }
  .release-page .recommendations-section { width: calc(100vw - 20px) !important; }
  .release-page .recommendations-heading { padding-inline: 2px !important; }
  .release-page .recommendations-carousel,
  .release-page .recommendations-carousel.has-controls { display: block !important; }
  .release-page .recommendations-carousel .recommend-arrow { display: none !important; }
  .release-page .recommendations-row { justify-content: flex-start !important; padding-inline: 1px !important; }
  .release-page .recommend-card { flex-basis: 112px !important; width: 112px !important; min-width: 112px !important; max-width: 112px !important; }
  .release-page .recommend-poster { width: 112px !important; height: 162px !important; }
  .comment-composer-footer { align-items: stretch; flex-direction: column; }
  .comment-composer-tools { justify-content: flex-start; }
  .comment-form .btn[type="submit"] { width: 100%; }
  .release-page .rate-card { max-width: none !important; }
  .profile-edit-card .avatar-frame-picker { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; }
  .profile-edit-card .avatar-frame-choice { min-height: 118px !important; }

  .release-participants-dialog .release-participants-modal-card,
  .profile-edit-dialog,
  .remote-modal-card,
  .site-search-popover-card,
  .site-header,
  .admin-topbar,
  .release-editor-tabs,
  .release-editor-savebar,
  .home-showcase-feather,
  .release-cinematic-feather {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 16px 42px rgba(0, 0, 0, .28) !important;
  }
  .site-header,
  .admin-topbar { background-color: rgba(5, 13, 23, .97) !important; }
  .home-showcase-feather,
  .release-cinematic-feather { background: linear-gradient(90deg, transparent, rgba(4, 11, 21, .34), transparent) !important; }
  .comment-style-aurora::before { filter: none !important; opacity: .18 !important; }
}

@media (max-width: 380px) {
  .profile-edit-card .avatar-frame-picker { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

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