/* =====================================================================
   CYBERX v71 — home page stability fixes
   Loads after all global and legacy page styles.
===================================================================== */

/* ---------- ABOUT: flip only by press/click, never by hover ---------- */
.about-grid--premium .flip-card{
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.about-grid--premium .flip-card:hover .flip-card__inner,
.about-grid--premium .flip-card:focus .flip-card__inner{
  transform:none !important;
}

.about-grid--premium .flip-card.is-flipped .flip-card__inner{
  transform:rotateY(180deg) !important;
}

.about-grid--premium .flip-card:hover::before{
  opacity:0 !important;
  transform:none !important;
}

.about-grid--premium .flip-card.is-flipped::before{
  opacity:.72 !important;
  transform:translateY(-3px) !important;
}

.about-grid--premium .flip-card__face{
  justify-content:flex-end !important;
}

.about-grid--premium .flip-card__front:hover,
.about-grid--premium .flip-card__front{
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.28) !important;
}

.about-grid--premium .flip-card__back{
  border-color:rgba(255,0,51,.52) !important;
  box-shadow:0 22px 62px rgba(255,0,51,.13), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.about-grid--premium .flip-card__hint--back{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  display:inline-flex !important;
}

/* ---------- HOME PROMOTIONS: equal card heights and readable text ---------- */
.promo-slider .loop-slider__viewport{
  padding:8px 0 22px !important;
  mask-image:none !important;
}

.promo-slider .loop-slider__track{
  align-items:stretch !important;
}

.promo-slider .promo-card--home{
  min-height:248px !important;
  height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  padding:26px !important;
  overflow:hidden !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:24px !important;
  color:#fff !important;
  background:
    radial-gradient(280px 150px at 100% 0, rgba(255,0,51,.17), transparent 70%),
    linear-gradient(180deg, rgba(27,19,25,.98), rgba(19,20,27,.98)) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.28) !important;
}

.promo-slider .promo-card--home .top-line{
  left:20px !important;
  right:20px !important;
  background:linear-gradient(90deg, transparent, #ff0033, transparent) !important;
}

.promo-slider .promo-card--home .disc{
  min-height:42px;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:0 15px;
  margin:0 0 14px !important;
  border-radius:999px;
  color:#fff !important;
  background:#ff0033 !important;
  font-family:var(--font-display,"Unbounded",sans-serif) !important;
  font-size:clamp(1.35rem, 2.35vw, 2rem) !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:-.06em !important;
  text-shadow:none !important;
  box-shadow:none !important;
}

.promo-slider .promo-card--home .ic{
  width:44px;
  height:44px;
  display:grid !important;
  place-items:center;
  margin:0 0 14px !important;
  border:1px solid rgba(255,0,51,.32);
  border-radius:14px;
  color:#ff0033 !important;
  background:rgba(255,0,51,.10) !important;
}

.promo-slider .promo-card--home h3{
  margin:0 0 9px !important;
  color:#fff !important;
  font-family:var(--font-display,"Unbounded",sans-serif) !important;
  font-size:clamp(1.1rem, 1.5vw, 1.42rem) !important;
  line-height:1.12 !important;
}

.promo-slider .promo-card--home p{
  margin:0 !important;
  color:rgba(255,255,255,.67) !important;
  font-size:.84rem !important;
  line-height:1.55 !important;
}

.promo-slider .promo-card--home .period{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:auto !important;
  padding-top:16px;
  color:rgba(255,255,255,.62) !important;
  font-size:.77rem !important;
}

.promo-slider .promo-card--home .period i{
  color:#ff0033 !important;
}

@media (max-width:980px){
  .promo-slider .promo-card--home{min-height:236px !important;}
}

@media (max-width:620px){
  .promo-slider .promo-card--home{min-height:226px !important;padding:22px !important;}
}




/* ---------- HERO v73: чистая CTA и неоновый CYBERX ---------- */

/* Никакой широкой красной полосы: оставляем компактный текст «Забронировать». */
.hero-colizeum__cta{
  min-width:0 !important;
  width:auto !important;
  min-height:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#ff0033 !important;
  font-family:var(--font-display,"Unbounded",sans-serif) !important;
  font-size:clamp(.70rem, 1vw, .84rem) !important;
  font-weight:800 !important;
  line-height:1.25 !important;
  letter-spacing:.01em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  text-shadow:0 0 12px rgba(255,0,51,.36);
}

.hero-colizeum__cta::before,
.hero-colizeum__cta::after{
  content:none !important;
  display:none !important;
}

.hero-colizeum__cta:hover{
  color:#fff !important;
  transform:translateX(4px) !important;
  text-shadow:0 0 16px rgba(255,0,51,.62);
}

/* Аккуратный неон: X светится сильнее, у всей надписи очень редкое микро-мерцание. */
.hero-colizeum__word{
  text-shadow:
    0 0 2px rgba(255,255,255,.34),
    0 0 18px rgba(255,255,255,.10),
    0 22px 88px rgba(255,0,51,.20),
    0 50px 120px rgba(0,0,0,.78) !important;
  filter:drop-shadow(0 0 18px rgba(255,0,51,.10)) !important;
  animation:cyberxNeonPulse 6.8s ease-in-out infinite !important;
}

.hero-colizeum__x{
  color:#ff0033 !important;
  text-shadow:
    0 0 3px rgba(255,0,51,.95),
    0 0 12px rgba(255,0,51,.82),
    0 0 28px rgba(255,0,51,.54),
    0 0 56px rgba(255,0,51,.30) !important;
  animation:cyberxXflicker 5.2s steps(1,end) infinite !important;
}

@keyframes cyberxNeonPulse{
  0%, 91%, 100%{
    opacity:1;
    filter:drop-shadow(0 0 18px rgba(255,0,51,.10));
  }
  92%{
    opacity:.94;
    filter:drop-shadow(0 0 10px rgba(255,0,51,.05));
  }
  93%{
    opacity:1;
    filter:drop-shadow(0 0 26px rgba(255,0,51,.18));
  }
}

@keyframes cyberxXflicker{
  0%, 86%, 100%{
    opacity:1;
  }
  87%{
    opacity:.72;
  }
  88%{
    opacity:1;
  }
  94%{
    opacity:.86;
  }
  95%{
    opacity:1;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-colizeum__word,
  .hero-colizeum__x{
    animation:none !important;
  }
}


/* ---------- HERO v81: site typography ---------- */
/* Меняется только тип шрифта; размеры, позиции и анимации hero сохранены. */
.hero-colizeum__word,
.hero-colizeum__subline,
.hero-colizeum__panel h2,
.hero-colizeum__cta{
  font-family:var(--font-display, "Unbounded", "Manrope", sans-serif) !important;
}


/* ---------- HERO v82: readable panel copy ---------- */
/* Сохраняем шрифт сайта, но даём ему нормальные переносы и место для CTA. */
.hero-colizeum__panel{
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
  padding:24px 26px 24px !important;
}

.hero-colizeum__panel h2{
  max-width:none !important;
  margin:0 0 13px !important;
  font-family:var(--font-display, "Unbounded", "Manrope", sans-serif) !important;
  font-size:clamp(1.02rem, 1.28vw, 1.42rem) !important;
  font-weight:800 !important;
  line-height:1.08 !important;
  letter-spacing:-.055em !important;
  text-transform:uppercase !important;
  text-wrap:pretty !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
}

.hero-colizeum__panel p{
  max-width:none !important;
  margin:0 0 15px !important;
  color:rgba(255,255,255,.76) !important;
  font-size:.78rem !important;
  line-height:1.52 !important;
}

.hero-colizeum__cta{
  display:inline-flex !important;
  align-items:center !important;
  min-height:22px !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.2 !important;
}

@media (max-width:860px){
  .hero-colizeum__panel{
    padding:22px 24px 24px !important;
  }

  .hero-colizeum__panel h2{
    font-size:clamp(1.02rem, 3.7vw, 1.28rem) !important;
    line-height:1.1 !important;
  }
}

@media (max-width:560px){
  .hero-colizeum__panel{
    padding:21px 20px 23px !important;
  }

  .hero-colizeum__panel h2{
    font-size:1rem !important;
    line-height:1.12 !important;
    letter-spacing:-.045em !important;
  }

  .hero-colizeum__panel p{
    margin-bottom:13px !important;
    font-size:.76rem !important;
  }
}


/* ---------- HERO v83: performance pass, same visual composition ---------- */
/*
  The visual design is preserved. Optimizations:
  - no animated GPU filter on the large CYBERX word;
  - static panel glow instead of a moving blurred light strip;
  - no backdrop blur on the floating panel;
  - paint containment around the hero;
  - only the small X keeps a lightweight opacity flicker.
*/
.hero-colizeum{
  contain:layout paint style;
  isolation:isolate;
}

.hero-colizeum__word{
  /* The previous animated drop-shadow forced repainting of a huge text layer. */
  filter:none !important;
  animation:cyberxNeonPulseLite 8.8s steps(1,end) infinite !important;
  will-change:opacity;
}

.hero-colizeum__panel{
  /* Keeps the dark glass look through the existing gradient, without blur cost. */
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.hero-colizeum__panel::before{
  /* Same red highlight, now static instead of animating a blurred area every frame. */
  animation:none !important;
  transform:translateX(22px) rotate(8deg) !important;
  will-change:auto !important;
}

.hero-colizeum__scroll{
  /* Transform-only animation is inexpensive; make it slower to reduce work further. */
  animation-duration:2.9s !important;
}

.hero-colizeum__x{
  /* Existing flicker only changes opacity and remains visually subtle. */
  will-change:opacity;
}

@keyframes cyberxNeonPulseLite{
  0%, 91%, 100%{ opacity:1; }
  92%{ opacity:.95; }
  93%{ opacity:1; }
}

@media (max-width:900px){
  /* Mobile GPUs benefit most: keep the exact layout, cut nonessential animation work. */
  .hero-colizeum__word,
  .hero-colizeum__x,
  .hero-colizeum__scroll{
    animation:none !important;
  }
}