/* =========================================================
   📦 BANNER CLUB — BASELINE (CONTROL VERSION)
   ========================================================= */

.banner-club{
  content-visibility:auto;
  contain-intrinsic-size:720px;
}


.banner-club{
  position:relative;

  min-height:75vh;
  max-height:80vh;

  overflow:hidden;
  isolation:isolate;
}


.banner-club > .container{
  position:relative;

  height:100%;
  min-height:75vh;
  max-height:80vh;

  display:flex;
  align-items:center;     /* ⬅️ вертикальный центр */
  justify-content:center; /* ⬅️ горизонтальный центр */
}





/* =========================================================
  /* =========================================================
   🖼 MEDIA / BACKGROUND — FIXED
   ========================================================= */

.banner-club__media{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}

/* мягкий затемняющий оверлей вместо белой простыни */
.banner-club__media::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.45)
  );
}

/* слайд */
.banner-club__slide{
  position:absolute;
  inset:0;
  z-index:1;

  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;

  opacity:0;
  transition:opacity 0.8s ease;

  will-change:opacity;
}

/* активный */
.banner-club__slide.is-active{
  opacity:1;
}

/* img — только preload, визуально не участвует */
.banner-club__img{
  width:0;
  height:0;
  opacity:0;
  pointer-events:none;
}

/* =========================================================
   🧱 CONTENT (ПРОСТО, БЕЗ МАГИИ)
   ========================================================= */

.banner-club__content{
  position:relative;
  z-index:2;

  max-width:720px;
  margin:0 auto;
  padding:0 24px;

  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
}



/* =========================================================
   🧠 TEXT — BASELINE
   ========================================================= */

.banner-club__title{
  font-size:3rem;
  margin-bottom:12px;
  color:#fff;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    0 6px 18px rgba(0,0,0,0.45);
}


.banner-club__slogans{
  margin-bottom:60px;
  text-align:center;
  
  min-height:4.2em;
}


.banner-club__slogan{
  color:#fff;
  text-align:center;
  
  font-size:1.4rem;

  text-shadow:
    0 1px 4px rgba(0,0,0,0.55),
    0 4px 14px rgba(0,0,0,0.65);

  opacity:0;
  pointer-events:none;

  transition:opacity 0.6s ease;
  


}


.banner-club__slogan.is-active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}












/* =========================================================
   ⬅️➡️ CONTROLS — SIDES OF CONTENT (FIXED)
   ========================================================= */



/* контролы = ширина контента */
.banner-club__controls{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:3;

  width:100%;
  max-width:920px;

  display:flex;
  justify-content:space-between;
  align-items:center;
}



/* кнопки */
/* кнопки — ТОЛЬКО СКОБКИ */
.banner-club__nav{
  background:none;
  border:0;
  box-shadow:none;

  width:auto;
  height:auto;
  padding:0;

  font-size:84px;        /* ⬅ размер скобок */
  line-height:1;

  color:#fff;            /* белые скобки */

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.45),
    0 6px 18px rgba(0,0,0,0.55);

  transition:
    transform var(--transition-base),
    opacity var(--transition-base);
}
.banner-club__nav:hover{
  transform:scale(1.15);
  opacity:0.85;
}
.banner-club__nav:active{
  transform:scale(1.05);
  opacity:0.7;
}


/* =========================================================
   BANNER CLUB — COUNTER (HERO LOOK)
   ========================================================= */

.banner-club__counter{
  margin-top:var(--space-16);

  font-size:.85rem;
  letter-spacing:.08em;
  text-transform:uppercase;

  color:rgba(255,255,255,.75);
}

.banner-club__current{
  font-weight:600;
}

.banner-club__sep{
  margin:0 2px;
  opacity:.6;
}

.banner-club__total{
  opacity:.6;
}




/* =========================================================
   🧠 SLOGANS — VISIBILITY CONTROL
   ========================================================= */

.banner-club__slogan{
  display:none;          /* все скрыты */
}

.banner-club__slogan.is-active{
  display:block;         /* виден только активный */
}