/*!
 * Page-specific styles for the Home page (slug: home).
 * These rules only apply when the body class includes `page-home`.
 */


section#intro {
	height: 100vh;
	/* background: #000 url('../img/bg-intro-min.png') top center no-repeat;
	background: #000 url('../img/bg-intro-5x-fit.png') top center /1480px auto no-repeat; */
	background: #000 url('../img/bg-intro-small.png') top center /auto 77vh no-repeat;
	position: relative;
	overflow: hidden;
}
section#intro > .inner {
	position: relative;
}
section#intro:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 23vh;
	background: url('../img/bg-stage-btn-less.png') center bottom /auto 100% no-repeat;
}

.main-image-wrapper {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
}
.main-image-wrapper img{
	display: block;
	margin-top: -5vh;
	max-width: 55%;
}

.curtains-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 85%;
	background: rgba(0,0,0,.1);
}
.curtains-wrapper.is-open {
	background: rgba(0, 0, 0, 0.1);
}
.curtains-wrapper .curtain{
	position: absolute;
	top: 0;
	height: 100%;
	transition: all 1.5s ease;
}
.curtains-wrapper .curtain-left{
	right: 50%;
}
.curtains-wrapper .curtain-right{
	left: 50%;
}
.curtains-wrapper.is-open  .curtain {
	transform: scale(.75, 1);
}
.curtains-wrapper.is-open  .curtain-left{
	right: 75%;
}
.curtains-wrapper.is-open  .curtain-right{
	left: 75%;
}

.main-btn-wrapper {
	position: absolute;
	width: 100%;
    bottom: 14vh;
	z-index: 3;
	/* bottom: 12.5vh;
    left: -5px; */
	
    text-align: center;
	
}
.main-btn-wrapper .btn-wrapper{
	display: inline-block;
	position: relative;
	perspective: 600px;
	/* transform-style: preserve-3d;	 */
}
.main-btn-wrapper .btn-wrapper:before{
	content: "";
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 9px;
	background: rgba(0,0,0,.75);
	filter: blur(5px);
	transform: rotateX(65deg) translateY(60px);
	transition: all .25s ease;
	animation: cta-shadow-blinking 1s ease-in-out infinite alternate;
}
.main-btn-wrapper .btn-wrapper .btn-glow-wrapper{
	position: absolute;
	display: block;
	left: 8px;
	top: 8px;
	width: calc(100% - 16px);
	height: calc(100% - 16px);
	border-radius: 7px 7px 4px 4px;
	overflow: hidden;
}
.main-btn-wrapper .btn-wrapper .btn-glow-wrapper:before{
	content: "";
	position: absolute;
	display: block;
	left: 0px;
	top: 0px;
	width: 25%;
	height: 100%;
	background: linear-gradient(0deg, transparent, rgba(255,255,255,.1));
	transform: translate(-150%) skew(-25deg);	
	animation: btn-glow 10s ease-in-out infinite;
}
.main-btn-wrapper .btn-wrapper .btn-glow-wrapper:hover:before{
	animation: none;
}
.main-btn-wrapper .btn-wrapper:hover:before{
	background: rgba(0,0,0,1);
	filter: blur(10px);
	transform: rotateX(70deg) translateY(80px);
}
.main-btn-wrapper img.cta-btn{
	position: relative;
	max-width: 55vw;
}
.main-btn-wrapper img.cta-btn-hover{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	max-width: 55vw;
	transition: all .25s ease;
	animation: cta-blinking 1s ease-in-out infinite alternate;
}
.main-btn-wrapper .btn-wrapper:hover img.cta-btn-hover{
	opacity: 1;
}

@media screen and (max-width: 768px) {
	.main-btn-wrapper .btn-wrapper:before{
		left: 5%;
		top: 0;
		width: 90%;
		height: 75%;
	}
}

@keyframes btn-glow {
  5% {
	background: linear-gradient(0deg, rgba(255,255,255,.1), rgba(255,255,255,.25));
    transform: translate(-150%) skew(-25deg);
  }
  15% {
	background: linear-gradient(0deg, rgba(255,255,255,.25), rgba(255,255,255,.5));
    transform: translate(2000%) skew(-25deg);
  }
  100% {
	background: linear-gradient(0deg, rgba(255,255,255,.25), rgba(255,255,255,.5));
    transform: translate(2000%) skew(-25deg);
  }
}
@keyframes cta-blinking {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cta-shadow-blinking {
  0% {
    background: rgba(0,0,0,.75);
	filter: blur(5px);
	transform: rotateX(65deg) translateY(60px);
  }
  100% {
    background: rgba(0,0,0,1);
	filter: blur(10px);
	transform: rotateX(70deg) translateY(80px);
  }
}





/* туман под “потолком” */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  height: 40vh;
  pointer-events: none;

  background:
    radial-gradient(ellipse at 50% 0%, rgba(200, 220, 255, 0.08), transparent 60%),
    radial-gradient(ellipse at 50% 10%, rgba(255, 215, 160, 0.06), transparent 65%);
  mix-blend-mode: screen;
  opacity: 0.85;
  filter: blur(1px);
}

/* КОЛОНКА ДЛЯ КАЖДОГО ПРОЖЕКТОРА */
.spot-wrapper {
  position: relative;
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
}

/* КОРПУС ПРОЖЕКТОРА */
.spot {
  position: relative;
  width: 10vw;
    max-width: 250px;
    height: 20vw;
  transform-origin: 50% 0;
  animation: spot-breath 2.5s ease-in-out infinite alternate;
}

/* ЛАМПА + ОРЕОЛ ВОКРУГ НЕЁ */
.spot-lamp {
  position: absolute;
  top: -1vh;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
	height: 6px;
  border-radius: 50%;

  background:
    radial-gradient(circle, #ffffff 0%, #fff7e2 50%, rgba(255, 240, 200, 0.0) 100%);
  box-shadow:
    0 0 10px rgba(255, 240, 210, 0.9),
    0 0 25px rgba(255, 240, 210, 0.7),
    0 0 45px rgba(255, 220, 160, 0.6);
}

/* ОБОЛОЧКА КОНУСА СВЕТА (НА НЕЁ ВЕШАЕМ inline filter: blur) */
.spot-light {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);

  width: 180%;   /* конус шире самой колонки */
  height: 100%;
  opacity: 0.5;  /* базовое значение, будет умножаться opacity wrapper’а */

  mix-blend-mode: screen;
  pointer-events: none;

  /* значение фильтра по умолчанию, если не задать inline */
  filter: blur(3px);
}

/* САМ КОНУС — ЧЕРЕЗ ПСЕВДОЭЛЕМЕНТ */
.spot-light::after {
  content: "";
  position: absolute;
  inset: 0;

  /* холодный мягкий конус */
  background:
    radial-gradient(ellipse at top,
      rgba(220, 230, 255, 0.55) 0%,
      rgba(190, 205, 240, 0.38) 14%,
      rgba(110, 130, 185, 0.16) 40%,
      rgba(40, 60, 110, 0.06) 65%,
      transparent 85%
    );

  /* вырезаем треугольник (конус) */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* лёгкое "дыхание" света (по желанию можно убрать) */
@keyframes spot-breath {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.1, 1.25);
  }
  100% {
    transform: scale(1.5, 1.75);
  }
}


/* Upcoming events */