/* ================================================================
   HC Torpedo — Global animations, shimmers & transitions
   ================================================================ */

/* ── Keyframes ── */
@keyframes tp-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes tp-slide-right {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes tp-shimmer {
  0%   { background-position: -700px 0; }
  100% { background-position: 700px 0; }
}

/* ── Page transition overlay ── */
#tp-transition-overlay {
  position: fixed;
  inset: 0;
  background: #00205b;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .32s cubic-bezier(.4,0,.2,1);
}
#tp-transition-overlay.tp-out { opacity: 1; }

/* ── Page entrance ── */
.tp-page-ready .page-head__title {
  animation: tp-slide-right .55s cubic-bezier(.22,1,.36,1) both;
}
.tp-page-ready .page-head__breadcrumbs {
  animation: tp-fade-in .5s .2s both;
}
.tp-page-ready .list-news__navbar {
  animation: tp-fade-up .45s .1s cubic-bezier(.22,1,.36,1) both;
}

/* Bug 18 — pre-hide sections so there's no visible-→-invisible jump when animation starts */
body:not(.tp-page-ready) .banner__wrapper,
body:not(.tp-page-ready) .slider,
body:not(.tp-page-ready) .info,
body:not(.tp-page-ready) .news-section,
body:not(.tp-page-ready) .news__grid-section,
body:not(.tp-page-ready) .events__section,
body:not(.tp-page-ready) .leaders__section,
body:not(.tp-page-ready) .media-section,
body:not(.tp-page-ready) .schedule-section,
body:not(.tp-page-ready) .standings-section,
body:not(.tp-page-ready) .playoffs {
  opacity: 0;
  transform: translateY(28px);
}

/* ── Homepage sections fade-up on load ── */
.tp-page-ready .banner__wrapper,
.tp-page-ready .slider,
.tp-page-ready .info,
.tp-page-ready .news-section,
.tp-page-ready .news__grid-section,
.tp-page-ready .events__section,
.tp-page-ready .leaders__section,
.tp-page-ready .media-section,
.tp-page-ready .schedule-section,
.tp-page-ready .standings-section,
.tp-page-ready .playoffs {
  animation: tp-fade-up .5s cubic-bezier(.22,1,.36,1) both;
}
.tp-page-ready .slider            { animation-delay:  .05s; }
.tp-page-ready .info              { animation-delay:  .10s; }
.tp-page-ready .news__grid-section{ animation-delay:  .15s; }
.tp-page-ready .events__section   { animation-delay:  .20s; }
.tp-page-ready .leaders__section  { animation-delay:  .25s; }
.tp-page-ready .media-section     { animation-delay:  .30s; }
.tp-page-ready .schedule-section,
.tp-page-ready .standings-section { animation-delay:  .30s; }
.tp-page-ready .playoffs          { animation-delay:  .35s; }

/* ── Card stagger ── */
.tp-page-ready .list-news__item,
.tp-page-ready .news-grid__item,
.tp-page-ready .player-card,
.tp-page-ready .person-card,
.tp-page-ready .photo-card,
.tp-page-ready .composition__item {
  animation: tp-fade-up .5s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--tp-idx, 0) * 60ms + 180ms);
}

/* ── Card hover lift ── */
.list-news__item-wrapper {
  /* Keep display:flex from main.css (align-items:flex-end puts text at bottom) */
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
  will-change: transform;
}
.player-card__wrapper,
.person-card__wrapper,
.match-item__wrapper {
  display: block;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
  will-change: transform;
}
.list-news__item-wrapper:hover,
.player-card__wrapper:hover,
.person-card__wrapper:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 18px 48px rgba(0,32,91,.22), 0 4px 12px rgba(200,16,46,.12);
}

/* ── Player card hover ── */
.composition__item-container {
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease;
  will-change: transform;
}
.composition__item-container:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(0,32,91,.28), 0 4px 12px rgba(200,16,46,.15);
}

/* ── Image shimmer skeleton ── */
.list-news__item-img-container,
.news__item-img-container {
  display: block;
  overflow: hidden;
}

.list-news__item-img-container::after,
.news__item-img-container::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    #0c1931 0%, #1a2d52 30%, #2a4a8a 48%, #1a2d52 65%, #0c1931 100%);
  background-size: 700px 100%;
  animation: tp-shimmer 1.6s ease-in-out infinite;
  opacity: 1;
  transition: opacity .35s ease;
  z-index: 2;
  pointer-events: none;
}
.list-news__item-img-container.tp-loaded::after,
.news__item-img-container.tp-loaded::after {
  opacity: 0;
}

/* ── Image reveal & zoom ── */
.list-news__item-img,
.news__item-img {
  transition: transform .38s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.list-news__item-img.tp-loading,
.news__item-img.tp-loading { opacity: 0; }
.list-news__item-img.tp-loaded,
.news__item-img.tp-loaded  { opacity: 1 !important; }
.list-news__item-wrapper:hover .list-news__item-img,
.news__item:hover .news__item-img { transform: scale(1.06); }

/* ── Category badge glow ── */
.list-news__item-type,
.news__item-type {
  transition: box-shadow .18s ease, transform .18s ease;
}
.list-news__item-wrapper:hover .list-news__item-type,
.news__item:hover .news__item-type {
  box-shadow: 0 0 12px rgba(200,16,46,.55);
  transform: scale(1.05);
}

/* ── Title underline sweep ── */
.list-news__item-title,
.news__item-title {
  background-image: linear-gradient(#c8102e, #c8102e);
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .28s cubic-bezier(.22,1,.36,1);
}
.list-news__item-wrapper:hover .list-news__item-title,
.news__item:hover .news__item-title {
  background-size: 100% 2px;
}

/* ── Date color on hover ── */
.list-news__item-date,
.news__item-date { transition: color .18s ease; }
.list-news__item-wrapper:hover .list-news__item-date,
.news__item:hover .news__item-date { color: #c8102e; }

/* ── "Читать подробнее" / "Подробнее" btn ── */
.list-news__item-btn,
.news__item-btn {
  transition: opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1);
}
.list-news__item:not(:hover) .list-news__item-btn,
.news__item:not(:hover) .news__item-btn {
  opacity: 0; transform: translateY(6px); pointer-events: none;
}
.list-news__item:hover .list-news__item-btn,
.news__item:hover .news__item-btn {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

/* ── Header always stable — no animation ── */
.header, #header, #n_menu_bl {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ── Hide KHL nav bar entirely — prevents 1.5s layout shift when proxy loads ── */
#n_menu_bl,
.s_khl_menu_n_menu_bl .s_khl_menu_crumbs,
.khl_nav_path,
.s_khl_nav_path {
  display: none !important;
}

/* ── View toggle buttons (tickets / calendar page) ── */
.nav-panel__view {
  cursor: pointer;
  transition: opacity .18s ease, transform .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-panel__view:hover {
  opacity: 0.75;
  transform: scale(1.12);
}
.nav-panel__view:active {
  transform: scale(0.95);
}

/* ── Nav link hover ── */
.header__nav-link, .nav__link {
  position: relative;
  transition: color .18s ease;
}
.header__nav-link::after, .nav__link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: #c8102e;
  transition: width .22s cubic-bezier(.22,1,.36,1);
}
.header__nav-link:hover::after, .nav__link:hover::after { width: 100%; }

/* ── Buttons ── */
.btn {
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,32,91,.25);
}
.btn:active { transform: translateY(0); }

/* ── Events widget — prevent image overflow ── */
.events__slide { overflow: hidden; }
.events__content { overflow: hidden; }

/* Today slide — red border */
.events__slide._today .events__content {
  outline: 2px solid #c8102e;
  outline-offset: -2px;
  border-radius: inherit;
}

/* Future slides beyond FUTURE_VISIBLE — no visual treatment, side fades handle the effect */
.events__slide._future-blur {
  pointer-events: none;
}

/* Side gradient fades on events container */
.events__container { position: relative; }
.events__fade-right,
.events__fade-left {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.events__fade-right {
  right: 0;
  width: 180px;
  background: linear-gradient(to right, transparent, #041027 85%);
}
.events__fade-left {
  left: 0;
  width: 100px;
  background: linear-gradient(to left, transparent, #041027 85%);
}

/* ── Match list items (table rows, not carousel cards) ── */
.matches-list__item:hover,
.season-table__row:hover {
  background: rgba(0,32,91,.04);
  box-shadow: inset 3px 0 0 #c8102e;
  transition: background .2s ease, box-shadow .2s ease;
}

/* ================================================================
   TEAMROSTER — shimmer skeletons & dynamic grid layout
   ================================================================ */

/* Shimmer for staff list loading skeletons */
.staff__item._shimmer {
  pointer-events: none;
}
.staff__item._shimmer .staff__img-container {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: linear-gradient(90deg, #e8eaed 25%, #f5f5f5 50%, #e8eaed 75%);
  background-size: 200% 100%;
  animation: tp-shimmer 1.4s infinite linear;
  border-radius: 4px;
}
.staff__item._shimmer .staff__shimmer-line {
  height: 12px;
  background: linear-gradient(90deg, #e8eaed 25%, #f5f5f5 50%, #e8eaed 75%);
  background-size: 200% 100%;
  animation: tp-shimmer 1.4s infinite linear;
  border-radius: 4px;
  margin-top: 8px;
}
.staff__item._shimmer .staff__shimmer-line._name  { width: 80%; }
.staff__item._shimmer .staff__shimmer-line._role  { width: 55%; }

/* Fade-in for dynamically loaded player cards */
@keyframes tp-roster-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.composition__item._fadein {
  animation: tp-roster-fadein 0.4s ease both;
}

/* ── tp-roster-grid — CSS grid replacing Swiper carousel ── */
.tp-roster-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  /* Reset Swiper/composition__list layout */
  overflow: visible !important;
  margin: 0 !important;
  transform: none !important;
  flex-wrap: unset !important;
}
@media (min-width: 768px) {
  .tp-roster-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 1200px) {
  .tp-roster-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* Override all main.css composition__item rules inside our grid */
.tp-roster-grid .composition__item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  flex: none !important;
  display: block !important;
  float: none !important;
  box-sizing: border-box !important;
}

/* Fix image proportions: 3:4 portrait using padding-top trick */
.tp-roster-grid .composition__img-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 0 !important;
  padding-top: 133.33% !important;
  overflow: hidden !important;
}
.tp-roster-grid .composition__img-container {
  position: absolute !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
}
.tp-roster-grid .composition__img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center !important;
  max-width: none !important;
}

/* ── Playoff cup image — bigger & visible ── */
.playoffs__img-container {
  width: 220px !important;
  margin-top: 20px !important;
}
.playoffs__img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.7)) brightness(1.15) !important;
}

/* ── Match score numbers above SVG background ── */
.calendar__check-number {
  position: relative;
  z-index: 2;
}

/* ── Upcoming match: center time text in the check wrapper ── */
.calendar__check-wrapper._upcoming {
  justify-content: center;
  align-items: center;
}
.calendar__match-time {
  font: 500 32px/1 'Rodchenko', sans-serif;
  text-transform: uppercase;
  color: #0c1931;
  text-align: center;
}
@media (min-width: 768px) {
  .calendar__match-time { font-size: 46px; }
}
@media (min-width: 1200px) {
  .calendar__match-time { font-size: 60px; }
}

/* ── Calendar grid — shimmer skeleton ── */
.upcoming__day._shimmer {
  background: linear-gradient(90deg, #e2e6ed 25%, #edf0f5 50%, #e2e6ed 75%) !important;
  background-size: 200% 100% !important;
  animation: tp-shimmer 1.4s infinite linear !important;
  pointer-events: none !important;
  border-radius: 2px;
}

/* ── Calendar grid — cell hover ── */
.upcoming__day:not(._disabled):not(._shimmer) {
  transition: background .18s ease;
}
.upcoming__day:not(._disabled):not(._shimmer):hover {
  background: #d4d9e4 !important;
}

/* ── Calendar match chip hover ── */
/* Bug 16: allow chip to scale without being clipped by parent overflow */
.upcoming__day {
  overflow: visible;
}
.upcoming__small-match {
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  position: relative;
  z-index: 1;
}
.upcoming__small-match:hover {
  transform: scale(1.04);
  box-shadow: 0 2px 10px rgba(200,16,46,.35);
  filter: brightness(1.1);
  z-index: 2;
}

/* ── View switch transition ── */
.upcoming__calendar-container,
#list-events {
  transition: opacity .2s ease, transform .2s ease;
}
._tp-view-exit {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  pointer-events: none !important;
}
._tp-view-enter {
  opacity: 0;
  transform: translateY(-6px);
}

/* ── Убрать линии-соединители между стадиями ── */
.playoffs__section._east-1-2 .playoffs__list-wrapper:before,
.playoffs__section._west-1-2 .playoffs__list-wrapper:before,
.playoffs__section._east-f-k .playoffs__subtotal-wrapper:before,
.playoffs__section._west-f-k .playoffs__subtotal-wrapper:before,
.playoffs__section._final .playoffs__subtotal-wrapper:before,
.playoffs__section._final .playoffs__subtotal-wrapper:after,
.playoffs__club:first-child:before,
.playoffs__club:first-child:after {
  display: none !important;
}