/* ЛАБА — интро главной. Работает только при html.is-intro (ставится скриптом в <head>). */

.intro { display: none; }
html.is-intro, html.is-intro body { overflow: hidden; }
html.is-intro .intro {
  display: block;
  position: fixed; inset: 0; z-index: 1000; overflow: hidden;
  background: #111113;
  cursor: pointer; -webkit-user-select: none; user-select: none;
}

/* Цветные столбики снизу */
.intro__bars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.intro__bar { position: absolute; top: 100%; height: 115vh; border-radius: 999px 999px 0 0; will-change: transform; }

/* Пластинка и «камера» */
.intro__cam {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: min(64vmin, 440px); aspect-ratio: 1;
  visibility: hidden; will-change: transform;
}
.intro__rec { width: 100%; height: 100%; overflow: visible; }
.intro__groove { fill: none; stroke: #2A2A2A; stroke-width: 4; stroke-dasharray: 1; }
.intro__ghost { opacity: 0; }
.intro__ghost--a { fill: var(--hot); }
.intro__ghost--b { fill: var(--sky); }

/* Вылетающие звуки */
.intro__fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.intro__fx > div { position: absolute; left: 0; top: 0; will-change: transform, opacity; }
.intro__fx svg { width: 100%; height: auto; }

/* Надпись */
.intro__brand {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; justify-items: center; gap: clamp(16px, 2.2vw, 28px);
  padding-bottom: 18vh;
  visibility: hidden; pointer-events: none;
}
.intro__mark { --w: min(66vw, 620px); display: flex; align-items: flex-end; gap: calc(var(--w) * .03); }
.intro__word { position: relative; width: var(--w); aspect-ratio: 2378 / 620; }
.intro__l {
  position: absolute; inset: 0;
  -webkit-mask: url(../assets/wordmark-cream.png) center / contain no-repeat;
          mask: url(../assets/wordmark-cream.png) center / contain no-repeat;
  will-change: transform, filter, opacity;
}
/* Срезы по буквам: Л | А | Б | А (границы посчитаны по PNG, стыки у букв наклонные) */
.intro__l:nth-child(1) { background: var(--hot);   clip-path: polygon(0 0, 27.3% 0, 27.3% 100%, 0 100%);                  transform-origin: 15% 55%; }
.intro__l:nth-child(2) { background: var(--lemon); clip-path: polygon(27.3% 0, 51.75% 0, 52.15% 100%, 27.3% 100%);        transform-origin: 40% 55%; }
.intro__l:nth-child(3) { background: var(--sky);   clip-path: polygon(51.75% 0, 78.65% 0, 69.6% 100%, 52.15% 100%);       transform-origin: 62% 55%; }
.intro__l:nth-child(4) { background: var(--grass); clip-path: polygon(78.65% 0, 100% 0, 100% 100%, 69.6% 100%);           transform-origin: 86% 55%; }

.intro__eq { display: flex; align-items: flex-end; gap: .14em; height: .8em; font-size: calc(var(--w) * .2); margin-bottom: calc(var(--w) * .038); }
.intro__eq i { width: .16em; height: 100%; border-radius: 999px; transform-origin: bottom; transform: scaleY(0); }
.intro__eq i:nth-child(1) { background: var(--hot); }
.intro__eq i:nth-child(2) { background: var(--paper); }
.intro__eq i:nth-child(3) { background: var(--lemon); }
.intro__eq i:nth-child(4) { background: var(--pink); }
.intro__eq i:nth-child(5) { background: var(--sky); }

.intro__tag {
  margin: 0; opacity: 0;
  font: 500 clamp(12px, 1.1vw, 15px)/1 var(--font-b); letter-spacing: .32em; text-transform: uppercase;
  color: #A6A6AE;
}

/* Шторки на выходе: последняя — цвет неба, как фон первого экрана */
.intro__wipe {
  position: absolute; left: -20%; right: -20%; bottom: 0; z-index: 5;
  height: 150vh; border-radius: 50% 50% 0 0 / 30vh 30vh 0 0;
  transform: translateY(100%);
}

.intro__skip {
  position: absolute; right: var(--gutter); bottom: 24px; z-index: 6;
  min-height: 40px; padding: 0 18px; border-radius: 999px;
  border: 2px solid #3A3A40; background: transparent; color: #A6A6AE;
  font: 600 14px/1 var(--font-b); cursor: pointer; opacity: 0;
  transition: color .2s, border-color .2s;
}
.intro__skip:hover, .intro__skip:focus-visible { color: var(--paper); border-color: var(--paper); }
.intro__skip:focus-visible { outline-color: var(--paper); }