:root {
  --intro-duration: 1200ms;
  --hold-duration: 180ms;
  --exit-duration: 420ms;
}

/* --- Cinematic background --- */
.intro-bg {
  background:
    radial-gradient(
      1200px 600px at 20% 15%,
      rgba(255, 255, 255, 0.08),
      transparent 55%
    ),
    radial-gradient(
      900px 500px at 80% 20%,
      rgba(255, 255, 255, 0.06),
      transparent 60%
    ),
    radial-gradient(
      1000px 700px at 50% 90%,
      rgba(255, 255, 255, 0.05),
      transparent 62%
    ),
    linear-gradient(135deg, #0b0f14 0%, #0a0d12 45%, #06080b 100%);
}

/* --- Subtle moving "blueprint" grid --- */
.grid-overlay {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(
    closest-side at 50% 50%,
    black 0%,
    black 45%,
    transparent 78%
  );
  -webkit-mask-image: radial-gradient(
    closest-side at 50% 50%,
    black 0%,
    black 45%,
    transparent 78%
  );
  animation: gridMove 12s linear infinite;
  opacity: 0.22;
}
@keyframes gridMove {
  from {
    background-position:
      0 0,
      0 0;
  }
  to {
    background-position:
      64px 0,
      0 64px;
  }
}

/* --- Light sweep --- */
.sweep {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 100%
  );
  transform: translateX(-120%) skewX(-12deg);
  animation: sweep 2.2s ease-in-out 0.25s forwards;
  filter: blur(0.2px);
  opacity: 0;
}
@keyframes sweep {
  0% {
    transform: translateX(-120%) skewX(-12deg);
    opacity: 0;
  }
  10% {
    opacity: 0.35;
  }
  55% {
    opacity: 0.35;
  }
  100% {
    transform: translateX(120%) skewX(-12deg);
    opacity: 0;
  }
}

/* --- Logo draw animation --- */
.draw path {
  fill: rgba(243, 243, 242, 0);
  stroke: rgba(243, 243, 242, 0.95);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;

  /* these are set by JS per-path */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;

  animation:
    dash var(--intro-duration) cubic-bezier(0.2, 0.8, 0.2, 1) forwards,
    fillIn 900ms ease forwards;
  animation-delay: 0ms, calc(var(--intro-duration) - 420ms);
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fillIn {
  to {
    fill: rgba(243, 243, 242, 1);
    stroke: rgba(243, 243, 242, 0.55);
  }
}

/* --- Premium glow + micro-float --- */
.logo-wrap {
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 26px rgba(255, 255, 255, 0.08));
  transform: translateY(6px) scale(0.98);
  opacity: 0;
  animation: popIn 700ms cubic-bezier(0.2, 0.9, 0.2, 1) 40ms forwards;
}

@keyframes popIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes floaty {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-6px) scale(1);
  }
}

/* --- Intro exit --- */
.intro-exit {
  animation: exit var(--exit-duration) cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
@keyframes exit {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(1.02);
    pointer-events: none;
  }
}

/* --- Main reveal --- */
.reveal {
  animation: reveal 900ms cubic-bezier(0.2, 0.9, 0.2, 1) forwards;
}
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .grid-overlay,
  .sweep,
  .logo-wrap,
  .draw path {
    animation: none !important;
  }
}

/* опционально, если хочется увеличить область клика */
[data-carousel-dots] button {
  width: 12px;
  height: 12px;
}

.slide-btn-active {
  border-color: rgba(255, 255, 255, 0.9);
  color: white;
}

/* стрелки */
.swiper {
  --swiper-navigation-color: #ffffff;
  --swiper-navigation-size: 20px;

  /* точки */
  --swiper-pagination-color: #ffffff;
  --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, 0.35);
  --swiper-pagination-bullet-inactive-opacity: 1;
}

.intro-fade-only {
  background: #000 !important;
  animation: introFadeOnly 520ms ease forwards !important;
}

.intro-fade-only .grid-overlay,
.intro-fade-only .sweep,
.intro-fade-only .logo-wrap,
.intro-fade-only #introStatus {
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}

@keyframes introFadeOnly {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}