/*
 * AKAKAO cinematic hero
 */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero-cinematic {
  position: relative;

  min-height: 100svh;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 74% 48%,
      rgba(109, 5, 23, .10),
      transparent 28rem
    ),
    #030203;
}


.hero-cinematic::before {
  content: "";

  position: absolute;
  z-index: 1;

  inset: 0;

  background:
    linear-gradient(
      90deg,
      #030203 0%,
      #030203 25%,
      rgba(3,2,3,.94) 38%,
      rgba(3,2,3,.12) 63%,
      #030203 100%
    );

  pointer-events: none;
}


.hero-cinematic::after {
  content: "";

  position: absolute;
  z-index: 3;

  left: 0;
  right: 0;
  bottom: 0;

  height: 23vh;

  background:
    linear-gradient(
      to bottom,
      transparent,
      #030203 92%
    );

  pointer-events: none;
}


.hero-cinematic-grid {
  position: relative;

  z-index: 2;

  width:
    min(
      calc(100% - 70px),
      1460px
    );

  min-height: 100svh;

  margin-inline: auto;

  display: grid;

  grid-template-columns:
    minmax(440px, .9fr)
    minmax(500px, 1.1fr);

  align-items: center;
}


/* ---------------------------------------------------------
   LEFT COPY
   --------------------------------------------------------- */

.hero-cinematic-copy {
  position: relative;
  z-index: 10;

  max-width: 620px;

  padding:
    6vh 0
    8vh;

  transform:
    translateY(-3vh);
}


.hero-copy-gate {
  position: absolute;
  z-index: -1;

  width: 145px;
  height: 470px;

  left: -95px;
  top: 50%;

  transform:
    translateY(-50%);

  background:
    url("/assets/ui/gothic-gate.svg")
    center / contain
    no-repeat;

  opacity: .14;

  pointer-events: none;
}


.hero-copy-gate::after {
  content: "";

  position: absolute;

  width: 260px;
  height: 45px;

  left: 66px;
  top: 50%;

  background:
    url("/assets/ui/gothic-divider.svg")
    center / contain
    no-repeat;

  opacity: .34;
}


.hero-cinematic .hero-kicker {
  margin-bottom: 17px;

  color: var(--gold);

  font-family: var(--sans);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: .23em;
  text-transform: uppercase;
}


.hero-cinematic h1 {
  margin:
    0 0 7px;

  color: #f4ebe0;

  font-family: var(--serif);

  font-size:
    clamp(67px, 7.1vw, 118px);

  line-height: .82;

  font-weight: 600;

  letter-spacing: -.055em;

  text-transform: uppercase;

  text-shadow:
    0 20px 70px
    rgba(0,0,0,.8);
}


.hero-cinematic h1 span {
  display: block;

  margin-top: 19px;

  color: var(--gold-soft);

  font-size: .30em;
  font-weight: 500;

  letter-spacing: .13em;
}


.hero-program {
  position: relative;

  display: inline-block;

  margin-top: 31px;
  padding-bottom: 20px;

  color: #b6152c;

  font-family: var(--serif);

  font-size:
    clamp(25px, 2vw, 36px);

  line-height: 1;

  font-weight: 600;

  letter-spacing: .025em;

  text-transform: uppercase;
}


.hero-program::after {
  content: "";

  position: absolute;

  width: 245px;
  height: 30px;

  left: 0;
  top: 100%;

  background:
    url("/assets/ui/gothic-divider.svg")
    left center / contain
    no-repeat;

  opacity: .55;
}


.hero-event-meta {
  margin-top: 32px;

  color: rgba(242,232,220,.82);

  font-family: var(--sans);

  font-size: 13px;
  font-weight: 600;

  line-height: 1.9;

  letter-spacing: .045em;
}


.hero-event-meta strong {
  color: #f2e8dc;

  font-weight: 600;
}


.hero-event-meta .dot {
  display: inline-block;

  width: 4px;
  height: 4px;

  margin:
    0 10px 3px;

  border-radius: 50%;

  background: var(--blood-bright);
}


.hero-event-place {
  display: block;

  margin-top: 4px;

  color: rgba(242,232,220,.58);

  font-weight: 400;
}


.hero-cinematic-cta {
  margin-top: 30px;
}


/* ---------------------------------------------------------
   TEXT TIMELINE
   --------------------------------------------------------- */

.hero-stage-anim {
  opacity: 0;

  filter: blur(7px);

  transform:
    translateY(17px);

  transition:
    opacity 1.45s ease,
    filter 1.45s ease,
    transform 1.45s
    cubic-bezier(.19,.8,.25,1);
}


.hero-cinematic.is-started
.hero-stage-title {
  opacity: 1;

  filter: blur(0);

  transform: none;

  transition-delay: .85s;
}


.hero-cinematic.is-started
.hero-stage-program {
  opacity: 1;

  filter: blur(0);

  transform: none;

  transition-delay: 1.35s;
}


.hero-cinematic.is-started
.hero-stage-meta {
  opacity: 1;

  filter: blur(0);

  transform: none;

  transition-delay: 2.05s;
}


.hero-cinematic.is-started
.hero-stage-button {
  opacity: 1;

  filter: blur(0);

  transform: none;

  transition-delay: 3.25s;
}


/*
 * Если браузер вдруг запретил autoplay,
 * никакого пустого первого экрана.
 */

.hero-cinematic.is-fallback
.hero-stage-anim {
  opacity: 1;

  filter: none;

  transform: none;

  transition-delay: 0s !important;
}



/* ---------------------------------------------------------
   VIDEO
   --------------------------------------------------------- */

.hero-video-stage {
  position: absolute;

  z-index: 0;

  width: 58vw;
  height: 100svh;

  right: -1vw;
  top: 0;

  display: flex;

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

  overflow: hidden;

  background: #030203;
}


.hero-video {
  position: relative;

  width: auto;
  height: 94svh;

  max-width: none;

  object-fit: contain;

  filter:
    brightness(.79)
    contrast(1.06)
    saturate(.92);

  transform:
    translateX(2vw)
    scale(1.02);

  background: #030203;
}


/*
 * Мрак растворяет прямоугольник видео.
 */

.hero-video-vignette {
  position: absolute;
  z-index: 2;

  inset: -2px;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,
      #030203 0%,
      rgba(3,2,3,.97) 5%,
      rgba(3,2,3,.67) 14%,
      transparent 31%,
      transparent 69%,
      rgba(3,2,3,.60) 86%,
      #030203 98%
    ),

    linear-gradient(
      180deg,
      #030203 0%,
      rgba(3,2,3,.64) 10%,
      transparent 25%,
      transparent 73%,
      rgba(3,2,3,.62) 89%,
      #030203 100%
    ),

    radial-gradient(
      ellipse at 51% 50%,
      transparent 35%,
      rgba(3,2,3,.08) 51%,
      rgba(3,2,3,.7) 81%,
      #030203 100%
    );
}


.hero-video-glow {
  position: absolute;

  z-index: -1;

  width: 620px;
  height: 780px;

  left: 48%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  background:
    radial-gradient(
      ellipse,
      rgba(129,8,30,.18),
      transparent 68%
    );

  filter: blur(30px);
}



/* ---------------------------------------------------------
   Sticky mobile CTA:
   на первом экране скрыта.
   Появляется только после hero.
   --------------------------------------------------------- */

@media (max-width: 767px) {

  .mobile-ticket {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
      translateY(18px);

    transition:
      opacity .2s ease,
      transform .2s ease,
      visibility .2s;
  }


  body.hero-past
  .mobile-ticket {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: none;
  }

}



/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1050px)
and (min-width: 768px) {

  .hero-cinematic-grid {
    grid-template-columns:
      minmax(390px, .9fr)
      minmax(400px, 1.1fr);
  }


  .hero-cinematic h1 {
    font-size:
      clamp(58px, 7vw, 82px);
  }


  .hero-video-stage {
    width: 59vw;
  }


  .hero-video {
    height: 88svh;
  }

}



/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {

  .hero-cinematic {
    min-height: 100svh;

    display: flex;

    align-items: stretch;
  }


  .hero-cinematic::before {
    z-index: 2;

    background:

      linear-gradient(
        180deg,
        #030203 0%,
        rgba(3,2,3,.64) 10%,
        transparent 28%,
        transparent 65%,
        rgba(3,2,3,.80) 85%,
        #030203 100%
      ),

      linear-gradient(
        90deg,
        #030203 0%,
        transparent 20%,
        transparent 80%,
        #030203 100%
      );
  }


  .hero-cinematic::after {
    height: 24vh;
  }


  .hero-cinematic-grid {
    width: 100%;

    min-height: 100svh;

    display: block;

    margin: 0;
  }


  .hero-video-stage {
    position: absolute;

    width: 100%;
    height: 100svh;

    inset: 0;

    display: flex;

    align-items: center;
    justify-content: center;
  }


  .hero-video {
    height: 78svh;
    width: auto;

    max-width: none;

    transform:
      translateY(-1vh);

    filter:
      brightness(.82)
      contrast(1.06)
      saturate(.92);
  }


  .hero-video-vignette {
    background:

      linear-gradient(
        90deg,
        #030203 0%,
        rgba(3,2,3,.72) 7%,
        transparent 24%,
        transparent 76%,
        rgba(3,2,3,.72) 93%,
        #030203 100%
      ),

      linear-gradient(
        180deg,
        #030203 0%,
        rgba(3,2,3,.35) 12%,
        transparent 30%,
        transparent 65%,
        rgba(3,2,3,.76) 87%,
        #030203 100%
      );
  }


  .hero-video-glow {
    width: 420px;
    height: 620px;

    left: 50%;
  }


  .hero-cinematic-copy {
    position: absolute;
    z-index: 10;

    inset:
      0
      18px;

    max-width: none;

    padding: 0;

    transform: none;

    pointer-events: none;
  }


  .hero-copy-gate {
    width: 65px;
    height: 220px;

    left: -23px;
    top: 27%;

    opacity: .10;
  }


  .hero-copy-gate::after {
    display: none;
  }


  .hero-cinematic
  .hero-kicker {
    position: absolute;

    top:
      max(
        28px,
        env(safe-area-inset-top)
      );

    left: 50%;

    width: 100%;

    transform:
      translateX(-50%);

    margin: 0;

    text-align: center;

    font-size: 9px;
  }


  .hero-cinematic h1 {
    position: absolute;

    top:
      calc(
        max(
          28px,
          env(safe-area-inset-top)
        )
        + 30px
      );

    left: 0;
    right: 0;

    margin: 0;

    text-align: center;

    font-size:
      clamp(46px, 15.5vw, 66px);

    line-height: .85;
  }


  .hero-cinematic h1 span {
    margin-top: 12px;

    font-size: .28em;
  }


  .hero-program {
    position: absolute;

    left: 50%;
    bottom: 24vh;

    transform:
      translateX(-50%)
      translateY(17px);

    width: 100%;

    margin: 0;

    padding-bottom: 15px;

    text-align: center;

    font-size:
      clamp(21px, 6vw, 28px);
  }


  .hero-cinematic.is-started
  .hero-stage-program {
    transform:
      translateX(-50%)
      translateY(0);
  }


  .hero-program::after {
    left: 50%;

    width: 190px;

    transform:
      translateX(-50%);
  }


  .hero-event-meta {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 15vh;

    margin: 0;

    text-align: center;

    font-size: 11px;

    line-height: 1.7;
  }


  .hero-event-place {
    display: none;
  }


  .hero-cinematic-cta {
    position: absolute;

    left: 0;
    right: 0;
    bottom:
      calc(
        4vh +
        env(safe-area-inset-bottom)
      );

    margin: 0;

    text-align: center;

    pointer-events: auto;
  }


  .hero-cinematic-cta
  .button {
    width:
      min(
        330px,
        calc(100% - 20px)
      );

    min-height: 58px;
  }

}



/* ---------------------------------------------------------
   Reduced motion:
   контент сразу доступен.
   --------------------------------------------------------- */

@media (
  prefers-reduced-motion:
  reduce
) {

  .hero-stage-anim {
    opacity: 1;

    filter: none;

    transform: none;

    transition: none;
  }

}


/* =========================================================
   MOBILE HERO V2
   Video first. Copy only after scroll.
   ========================================================= */

.hero-mobile-info {
  display: none;
}


@media (max-width: 767px) {

  /*
   * На первом экране никакого HTML-текста.
   * Только ролик.
   */

  .hero-cinematic-copy {
    display: none !important;
  }


  .hero-cinematic,
  .hero-cinematic-grid {
    min-height: 100svh;
  }


  .hero-video-stage {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100svh;

    overflow: hidden;
  }


  /*
   * Делаем вертикальный ролик больше ширины экрана.
   * Он слегка обрезается по бокам и растворяется
   * в темноте, вместо эффекта "видео в рамке".
   */

  .hero-video {
    width: auto;
    height: 92svh;

    max-width: none;

    transform: none;

    object-fit: contain;

    filter:
      brightness(.80)
      contrast(1.08)
      saturate(.94);
  }


  .hero-video-vignette {
    background:

      linear-gradient(
        90deg,
        #030203 0%,
        rgba(3,2,3,.92) 8%,
        rgba(3,2,3,.32) 18%,
        transparent 32%,
        transparent 68%,
        rgba(3,2,3,.32) 82%,
        rgba(3,2,3,.92) 92%,
        #030203 100%
      ),

      linear-gradient(
        180deg,
        #030203 0%,
        rgba(3,2,3,.54) 8%,
        transparent 20%,
        transparent 73%,
        rgba(3,2,3,.62) 88%,
        #030203 100%
      ),

      radial-gradient(
        ellipse at 50% 48%,
        transparent 40%,
        rgba(3,2,3,.10) 60%,
        rgba(3,2,3,.72) 90%,
        #030203 100%
      );
  }


  /*
   * Текстовая часть уже ПОСЛЕ видео.
   */

  .hero-mobile-info {
    position: relative;

    display: block;

    overflow: hidden;

    padding:
      68px 0
      78px;

    border-top:
      1px solid
      rgba(196,154,98,.10);

    border-bottom:
      1px solid
      rgba(196,154,98,.10);

    background:
      radial-gradient(
        circle at 50% 20%,
        rgba(125,8,28,.13),
        transparent 26rem
      ),
      #060405;
  }


  .hero-mobile-info-inner {
    position: relative;
    z-index: 2;

    text-align: center;
  }


  .hero-mobile-info .eyebrow {
    margin-bottom: 18px;

    font-size: 9px;

    letter-spacing: .19em;
  }


  .hero-mobile-info h2 {
    margin: 0;

    color: var(--cream);

    font-size:
      clamp(48px, 15vw, 67px);

    line-height: .86;

    text-transform: uppercase;
  }


  .hero-mobile-info h2 span {
    display: block;

    margin-top: 14px;

    color: var(--gold-soft);

    font-size: .29em;
    font-weight: 500;

    letter-spacing: .13em;
  }


  .hero-mobile-divider {
    width: 190px;
    height: 36px;

    margin:
      25px auto
      14px;

    background:
      url("/assets/ui/gothic-divider.svg")
      center / contain
      no-repeat;

    opacity: .62;
  }


  .hero-mobile-program {
    color: var(--blood-bright);

    font-family: var(--serif);

    font-size: 24px;
    font-weight: 600;

    letter-spacing: .035em;

    text-transform: uppercase;
  }


  .hero-mobile-meta {
    display: flex;

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

    gap: 12px;

    margin-top: 26px;

    color: #eee3d7;

    font-size: 12px;

    letter-spacing: .055em;

    text-transform: uppercase;
  }


  .hero-mobile-meta i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
      var(--blood-bright);
  }


  .hero-mobile-info p {
    margin:
      14px auto
      27px;

    color:
      rgba(241,232,220,.60);

    font-size: 13px;

    line-height: 1.7;
  }


  .hero-mobile-info .button {
    width:
      min(
        330px,
        100%
      );

    min-height: 59px;
  }


  /*
   * Тихие кованые элементы.
   */

  .hero-mobile-info-gate {
    position: absolute;

    width: 70px;
    height: 250px;

    top: 50%;

    transform:
      translateY(-50%);

    background:
      url("/assets/ui/gothic-gate.svg")
      center / contain
      no-repeat;

    opacity: .11;

    pointer-events: none;
  }


  .hero-mobile-info-gate-left {
    left: -27px;
  }


  .hero-mobile-info-gate-right {
    right: -27px;

    transform:
      translateY(-50%)
      scaleX(-1);
  }

}


/* Android animated WebP uses same composition as hero video */

.hero-android-motion {
  display: block;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}



/* =========================================================
   UNIVERSAL ONE-SHOT MOTION
   ========================================================= */

.hero-motion {
  display: block;

  object-fit: contain;

  pointer-events: none;

  user-select: none;

  -webkit-user-drag: none;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;
}


/*
 * Один и тот же элемент сначала содержит
 * статичный первый кадр, затем animation.
 * Никакого crossfade между двумя DOM-узлами.
 */

.hero-cinematic:not(.is-motion-ready)
.hero-motion {
  opacity: 1;
}

.hero-cinematic.is-motion-ready
.hero-motion {
  opacity: 1;
}



/* =========================================================
   FINAL MOBILE CINEMATIC HERO
   ========================================================= */

.hero-mobile-scene {
  display: none;
}


/*
 * Tilda navigation on /halloween.
 * Эти классы относятся к стандартным
 * мобильным/десктопным menu blocks Tilda.
 */




@media (max-width: 767px) {

  /*
   * Старый дополнительный mobile CTA
   * больше не используем.
   */

  .mobile-ticket,
  .hero-mobile-info {
    display: none !important;
  }


  /*
   * Первый экран теперь реально
   * занимает viewport.
   */

  .hero-cinematic,
  .hero-cinematic-grid,
  .hero-video-stage {
    min-height: 100svh;
    height: 100svh;
  }


  .hero-cinematic-copy {
    display: none !important;
  }


  .hero-mobile-scene {
    display: block;

    position: absolute;
    z-index: 30;

    inset: 0;

    pointer-events: none;
  }


  /* -----------------------------------------------
     INFO
     ----------------------------------------------- */

  .hero-mobile-scene-copy {
    position: absolute;

    z-index: 5;

    top: 5.8svh;
    left: 18px;
    right: 18px;

    text-align: center;

    opacity: 0;

    transform:
      translateY(-15px)
      scale(.985);

    filter:
      blur(8px);

    transition:
      opacity .95s ease,
      transform 1.05s
      cubic-bezier(.16,.82,.23,1),
      filter .95s ease;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-scene-copy {
    opacity: 1;

    transform: none;

    filter: none;
  }


  .hero-mobile-scene-kicker {
    color:
      rgba(211,174,120,.82);

    font-family:
      var(--sans);

    font-size: 8px;
    font-weight: 700;

    line-height: 1.3;

    letter-spacing: .19em;

    text-transform: uppercase;

    opacity: 0;

    transform:
      translateY(-8px);

    transition:
      opacity .65s ease .08s,
      transform .75s ease .08s;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-scene-kicker {
    opacity: 1;

    transform: none;
  }


  .hero-mobile-scene-title {
    margin-top: 9px;

    color: #f4ebe0;

    font-family:
      var(--serif);

    font-size:
      clamp(43px, 13.5vw, 59px);

    font-weight: 600;

    line-height: .83;

    letter-spacing: -.045em;

    text-transform: uppercase;

    text-shadow:
      0 4px 25px rgba(0,0,0,.95);

    opacity: 0;

    transform:
      scale(.96);

    transition:
      opacity .75s ease .20s,
      transform .85s ease .20s;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-scene-title {
    opacity: 1;

    transform: none;
  }


  .hero-mobile-scene-title span {
    display: block;

    margin-top: 11px;

    color: #cfa971;

    font-size: .27em;
    font-weight: 500;

    letter-spacing: .14em;
  }


  .hero-mobile-scene-divider {
    width: 145px;
    height: 24px;

    margin:
      14px auto
      4px;

    background:
      url("/assets/ui/gothic-divider.svg")
      center / contain
      no-repeat;

    opacity: 0;

    transform:
      scaleX(.25);

    transition:
      opacity .6s ease .38s,
      transform .9s
      cubic-bezier(.16,.82,.23,1)
      .38s;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-scene-divider {
    opacity: .68;

    transform:
      scaleX(1);
  }


  .hero-mobile-scene-program {
    color: #c21830;

    font-family:
      var(--serif);

    font-size:
      clamp(18px, 5vw, 23px);

    font-weight: 600;

    letter-spacing: .035em;

    text-transform: uppercase;

    opacity: 0;

    transform:
      translateY(7px);

    transition:
      opacity .65s ease .48s,
      transform .7s ease .48s;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-scene-program {
    opacity: 1;

    transform: none;
  }


  .hero-mobile-scene-meta {
    display: flex;

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

    gap: 11px;

    margin-top: 13px;

    color:
      rgba(245,237,228,.94);

    font-family:
      var(--sans);

    font-size: 10px;

    letter-spacing: .07em;

    text-transform: uppercase;

    opacity: 0;

    transition:
      opacity .7s ease .61s;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-scene-meta {
    opacity: 1;
  }


  .hero-mobile-scene-meta i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: #c21830;

    box-shadow:
      0 0 12px
      rgba(194,24,48,.75);
  }


  .hero-mobile-scene-place {
    margin-top: 7px;

    color:
      rgba(238,228,216,.56);

    font-family:
      var(--sans);

    font-size: 10px;

    line-height: 1.45;

    opacity: 0;

    transition:
      opacity .7s ease .72s;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-scene-place {
    opacity: 1;
  }


  /* -----------------------------------------------
     MECHANICAL CTA
     ----------------------------------------------- */

  .hero-mech-cta {
    position: fixed;

    z-index: 99990;

    left: 50%;

    bottom:
      calc(
        14px +
        env(safe-area-inset-bottom)
      );

    width:
      min(
        356px,
        calc(100vw - 28px)
      );

    height: 62px;

    transform:
      translateX(-50%);

    display: flex;

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

    overflow: hidden;

    color: #f5ede3;

    text-decoration: none;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    filter:
      drop-shadow(
        0 15px 28px
        rgba(0,0,0,.65)
      );

    transition:
      opacity .22s ease,
      visibility .22s ease;
  }


  .hero-cinematic.is-cta-ready
  .hero-mech-cta {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
  }


  /*
   * Две металлические створки.
   * Каждая растёт от центра наружу.
   */

  .hero-mech-half {
    position: absolute;

    z-index: 1;

    top: 0;
    bottom: 0;

    width: 50.5%;

    background:
      linear-gradient(
        180deg,
        #be1730 0%,
        #960a22 52%,
        #680616 100%
      );

    box-shadow:
      inset 0 1px 0
      rgba(255,215,170,.32),

      inset 0 -1px 0
      rgba(42,0,6,.85);

    transform:
      scaleX(.015);

    transition:
      transform .78s
      cubic-bezier(.15,.85,.21,1);
  }


  .hero-mech-half-left {
    left: 0;

    transform-origin:
      right center;

    clip-path:
      polygon(
        10% 0,
        100% 0,
        100% 100%,
        10% 100%,
        0 50%
      );
  }


  .hero-mech-half-right {
    right: 0;

    transform-origin:
      left center;

    clip-path:
      polygon(
        0 0,
        90% 0,
        100% 50%,
        90% 100%,
        0 100%
      );
  }


  .hero-cinematic.is-cta-ready
  .hero-mech-half {
    transform:
      scaleX(1);
  }


  /*
   * Центральный "замок".
   */

  .hero-mech-core {
    position: absolute;

    z-index: 4;

    left: 50%;
    top: 50%;

    width: 14px;
    height: 14px;

    border:
      1px solid
      rgba(214,176,119,.88);

    background:
      #8b091d;

    transform:
      translate(-50%,-50%)
      rotate(45deg)
      scale(.15);

    opacity: 0;

    box-shadow:
      0 0 0 3px
      rgba(95,5,20,.75),

      0 0 18px
      rgba(190,25,48,.55);

    transition:
      transform .38s
      cubic-bezier(.18,.88,.27,1)
      .10s,

      opacity .25s ease .10s;
  }


  .hero-cinematic.is-cta-ready
  .hero-mech-core {
    transform:
      translate(-50%,-50%)
      rotate(45deg)
      scale(1);

    opacity: 1;
  }


  /*
   * Тонкие бронзовые направляющие.
   */

  .hero-mech-cta::before,
  .hero-mech-cta::after {
    content: "";

    position: absolute;

    z-index: 3;

    left: 50%;

    width: 0;
    height: 1px;

    background:
      linear-gradient(
        90deg,
        rgba(211,169,109,0),
        rgba(211,169,109,.85)
      );

    transition:
      width .72s
      cubic-bezier(.15,.85,.21,1)
      .08s;
  }


  .hero-mech-cta::before {
    top: 8px;

    transform:
      translateX(-100%);
  }


  .hero-mech-cta::after {
    bottom: 8px;

    transform:
      translateX(0)
      scaleX(-1);
  }


  .hero-cinematic.is-cta-ready
  .hero-mech-cta::before,
  .hero-cinematic.is-cta-ready
  .hero-mech-cta::after {
    width: 45%;
  }


  .hero-mech-label {
    position: relative;

    z-index: 5;

    font-family:
      var(--sans);

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .11em;

    text-transform: uppercase;

    opacity: 0;

    transform:
      scale(.92);

    text-shadow:
      0 2px 7px
      rgba(0,0,0,.8);

    transition:
      opacity .38s ease .56s,
      transform .48s ease .56s;
  }


  .hero-cinematic.is-cta-ready
  .hero-mech-label {
    opacity: 1;

    transform: none;
  }

}


/*
 * Accessibility:
 * без декоративных перемещений,
 * но вся информация остаётся.
 */

@media (
  prefers-reduced-motion:
  reduce
) {

  .hero-mobile-scene-copy,
  .hero-mobile-scene-kicker,
  .hero-mobile-scene-title,
  .hero-mobile-scene-divider,
  .hero-mobile-scene-program,
  .hero-mobile-scene-meta,
  .hero-mobile-scene-place,
  .hero-mech-half,
  .hero-mech-core,
  .hero-mech-label {
    transition-duration:
      .01ms !important;
  }

}


/* =========================================================
   MOBILE HERO TYPOGRAPHY V2
   top title / bottom event information
   ========================================================= */

@media (max-width: 767px) {

  /*
   * Старый единый центральный copy
   * больше не используется.
   */

  .hero-mobile-scene-copy {
    display: none !important;
  }


  /* -------------------------------------------------------
     TOP
     ------------------------------------------------------- */

  .hero-mobile-topcopy {
    position: absolute;

    z-index: 6;

    top: 4.6svh;
    left: 16px;
    right: 16px;

    text-align: center;

    pointer-events: none;

    opacity: 0;

    transform:
      translateY(-13px);

    filter:
      blur(7px);

    transition:
      opacity .8s ease,
      transform .95s
      cubic-bezier(.16,.82,.23,1),
      filter .8s ease;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-topcopy {
    opacity: 1;

    transform: none;

    filter: none;
  }


  .hero-mobile-top-program {
    color: #bf1630;

    font-family:
      var(--serif);

    font-size:
      clamp(17px, 5vw, 22px);

    font-weight: 600;

    line-height: 1;

    letter-spacing: .055em;

    text-transform: uppercase;

    opacity: 0;

    transform:
      translateY(-5px);

    transition:
      opacity .55s ease .03s,
      transform .65s ease .03s;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-top-program {
    opacity: 1;

    transform: none;
  }


  .hero-mobile-top-title {
    margin-top: 8px;

    color: #f4ebe0;

    font-family:
      var(--serif);

    font-size:
      clamp(52px, 17vw, 74px);

    font-weight: 600;

    line-height: .82;

    letter-spacing: -.055em;

    text-transform: uppercase;

    text-shadow:
      0 5px 24px
      rgba(0,0,0,.95);

    opacity: 0;

    transform:
      scale(.95);

    transition:
      opacity .72s ease .14s,
      transform .82s
      cubic-bezier(.16,.82,.23,1)
      .14s;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-top-title {
    opacity: 1;

    transform: none;
  }


  .hero-mobile-top-by {
    margin-top: 11px;

    color: #cba56e;

    font-family:
      var(--serif);

    font-size:
      clamp(14px, 4.3vw, 19px);

    font-weight: 500;

    line-height: 1;

    letter-spacing: .18em;

    text-transform: uppercase;

    opacity: 0;

    transition:
      opacity .62s ease .28s;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-top-by {
    opacity: 1;
  }


  .hero-mobile-top-vignette {
    width: 155px;
    height: 28px;

    margin:
      13px auto
      0;

    background:
      url("/assets/ui/gothic-divider.svg")
      center / contain
      no-repeat;

    opacity: 0;

    transform:
      scaleX(.12);

    transform-origin:
      center;

    transition:
      opacity .55s ease .36s,
      transform .85s
      cubic-bezier(.12,.9,.23,1)
      .36s;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-top-vignette {
    opacity: .72;

    transform:
      scaleX(1);
  }



  /* -------------------------------------------------------
     BOTTOM EVENT INFO
     ------------------------------------------------------- */

  .hero-mobile-bottomcopy {
    position: absolute;

    z-index: 6;

    left: 18px;
    right: 18px;

    bottom:
      calc(
        98px +
        env(safe-area-inset-bottom)
      );

    text-align: center;

    pointer-events: none;

    opacity: 0;

    transform:
      translateY(13px);

    filter:
      blur(5px);

    text-shadow:
      0 3px 15px
      rgba(0,0,0,.98);

    transition:
      opacity .8s ease .38s,
      transform .9s
      cubic-bezier(.16,.82,.23,1)
      .38s,
      filter .8s ease .38s;
  }


  .hero-cinematic.is-info-ready
  .hero-mobile-bottomcopy {
    opacity: 1;

    transform: none;

    filter: none;
  }


  /*
   * Немного тёмного тумана за нижним текстом,
   * без прямоугольной подложки.
   */

  .hero-mobile-bottomcopy::before {
    content: "";

    position: absolute;

    z-index: -1;

    left: 50%;
    top: 50%;

    width:
      min(
        390px,
        98vw
      );

    height: 180px;

    transform:
      translate(-50%, -50%);

    background:
      radial-gradient(
        ellipse,
        rgba(2,1,2,.80) 0%,
        rgba(2,1,2,.48) 46%,
        transparent 75%
      );

    pointer-events: none;
  }


  .hero-mobile-bottom-city {
    color: #f1e7db;

    font-family:
      var(--serif);

    font-size:
      clamp(27px, 8vw, 35px);

    font-weight: 600;

    line-height: 1;

    letter-spacing: -.015em;

    text-transform: uppercase;
  }


  .hero-mobile-bottom-place {
    margin-top: 7px;

    color:
      rgba(237,226,213,.62);

    font-family:
      var(--sans);

    font-size: 11px;

    font-weight: 400;

    line-height: 1.45;

    letter-spacing: .015em;
  }


  .hero-mobile-bottom-date {
    margin-top: 10px;

    color: #d5ae75;

    font-family:
      var(--serif);

    font-size:
      clamp(19px, 5.7vw, 25px);

    font-weight: 600;

    line-height: 1;

    letter-spacing: .035em;

    text-transform: uppercase;
  }


  .hero-mobile-bottom-date span {
    display: inline-block;

    margin:
      0 7px;

    color: #bd1730;

    font-size: .68em;

    transform:
      translateY(-2px);
  }

}


/*
 * Очень короткие экраны.
 */

@media
(max-width: 767px)
and
(max-height: 700px) {

  .hero-mobile-topcopy {
    top: 2.7svh;
  }


  .hero-mobile-top-title {
    font-size:
      clamp(46px, 15vw, 62px);
  }


  .hero-mobile-top-vignette {
    margin-top: 9px;
  }


  .hero-mobile-bottomcopy {
    bottom:
      calc(
        91px +
        env(safe-area-inset-bottom)
      );
  }


  .hero-mobile-bottom-city {
    font-size: 25px;
  }


  .hero-mobile-bottom-date {
    font-size: 19px;
  }

}


@media (
  prefers-reduced-motion:
  reduce
) {

  .hero-mobile-topcopy,
  .hero-mobile-top-program,
  .hero-mobile-top-title,
  .hero-mobile-top-by,
  .hero-mobile-top-vignette,
  .hero-mobile-bottomcopy {
    transition-duration:
      .01ms !important;
  }

}


/* central mechanical lock removed */

.hero-mech-core {
  display: none !important;
}



/* =========================================================
   MOBILE HERO ALIGNMENT V3
   ========================================================= */

@media (max-width: 767px) {

  /*
   * Картинку фиксируем строго по геометрическому
   * центру hero независимо от flex/layout.
   */

  .hero-video-stage {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100svh;

    overflow: hidden;
  }


  .hero-video-stage .hero-motion {
    position: absolute;

    left: 50%;
    top: 50%;

    width: auto;
    height: 92svh;

    max-width: none;

    margin: 0;

    transform:
      translate(-50%, -50%) !important;

    object-fit: contain;
  }


  /*
   * Верхняя типографика занимает ровно ширину
   * экрана и больше не может уехать в сторону.
   */

  .hero-mobile-topcopy {
    left: 0;
    right: 0;

    width: 100%;

    padding:
      0 12px;

    box-sizing:
      border-box;
  }


  /*
   * HALLOWEEN раньше был 17vw —
   * на узких Android это физически шире экрана.
   */

  .hero-mobile-top-title {
    width: 100%;

    font-size:
      clamp(
        43px,
        13.6vw,
        62px
      );

    line-height: .84;

    letter-spacing: -.055em;

    white-space: nowrap;

    text-align: center;
  }


  .hero-mobile-top-program {
    width: 100%;

    font-size:
      clamp(
        16px,
        4.5vw,
        21px
      );

    white-space: nowrap;

    text-align: center;
  }


  .hero-mobile-top-by {
    white-space: nowrap;
  }


  /*
   * Нижний город тоже страхуем от обрезки
   * на 320–360px экранах.
   */

  .hero-mobile-bottomcopy {
    left: 12px;
    right: 12px;
  }


  .hero-mobile-bottom-city {
    font-size:
      clamp(
        24px,
        7.1vw,
        32px
      );

    letter-spacing: -.025em;

    white-space: nowrap;
  }


  .hero-mobile-bottom-date {
    font-size:
      clamp(
        18px,
        5.3vw,
        24px
      );

    white-space: nowrap;
  }

}


/*
 * Совсем узкие устройства.
 */

@media (max-width: 360px) {

  .hero-mobile-top-title {
    font-size: 45px;
  }


  .hero-mobile-bottom-city {
    font-size: 23px;
  }


  .hero-mobile-bottom-date {
    font-size: 18px;
  }

}