/**
 * Missions Section - EXACT copy from telescope-zoom-main
 * Converted from nested CSS to standard CSS
 */

.section-missions {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #010101;
  --progress: 0;
}

.section-missions .section__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  transform: scale(var(--progress));
}

.section-missions .section__media__front,
.section-missions .section__media__back {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.section-missions .section__media__front {
  filter: blur(2px);
}

.section-missions .section__media__front img {
  mask-image: url(../../images/mask.png);
  -webkit-mask-image: url(../../images/mask.png);
  mask-position: 50% 50%;
  -webkit-mask-position: 50% 50%;
  mask-size: cover;
  -webkit-mask-size: cover;
}

.section-missions .front-1 {
  transform: scale(1);
}

.section-missions .front-2 {
  transform: scale(0.85);
}

.section-missions .front-3 {
  transform: scale(0.6);
}

.section-missions .front-4 {
  transform: scale(0.45);
}

.section-missions .front-5 {
  transform: scale(0.3);
}

.section-missions .front-6 {
  transform: scale(0.15);
}

.section-missions .section__media img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.section-missions h2 {
  font-size: clamp(1.5rem, 3vw, 4rem);
  font-weight: 600;
  transform: translateY(-15%);
  display: flex;
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.section-missions h2 span {
  display: inline-block;
}

.section-missions h2 .left {
  transform: translate3d(calc(var(--progress) * (-66vw + 100%) - 0.5vw), 0, 0);
}

.section-missions h2 .right {
  transform: translate3d(calc(var(--progress) * (66vw - 100%)), 0, 0);
}

@media (max-width: 768px) {
  .section-missions h2 {
    font-size: 9vw;
  }

  .section-missions h2 .left {
    transform: translate3d(calc(var(--progress) * (-100vw + 100%) - 0.5vw), 0, 0);
  }

  .section-missions h2 .right {
    transform: translate3d(calc(var(--progress) * (100vw - 100%)), 0, 0);
  }
}

.section-missions .section__images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  perspective: 100vh;
}

.section-missions .section__images img {
  position: absolute;
  width: 10vw;
}

@media (max-width: 768px) {
  .section-missions .section__images img {
    width: 20vw;
  }
}

.section-missions .section__images img:nth-of-type(1) {
  top: 15vw;
  left: -3vw;
}

.section-missions .section__images img:nth-of-type(2) {
  top: 5vw;
  left: 20vw;
}

.section-missions .section__images img:nth-of-type(3) {
  top: 8vw;
  left: 26.5vw;
}

@media (max-width: 768px) {
  .section-missions .section__images img:nth-of-type(3) {
    top: 30vw;
    left: 30vw;
  }
}

.section-missions .section__images img:nth-of-type(4) {
  top: 18vw;
  right: 18vw;
}

@media (max-width: 768px) {
  .section-missions .section__images img:nth-of-type(4) {
    right: 15vw;
    top: 30vw;
  }
}

.section-missions .section__images img:nth-of-type(5) {
  top: 5vw;
  right: 10vw;
}

@media (max-width: 768px) {
  .section-missions .section__images img:nth-of-type(5) {
    top: 10vw;
    right: 5vw;
  }
}

.section-missions .section__images img:nth-of-type(6) {
  bottom: 5vw;
  left: 10vw;
}

@media (max-width: 768px) {
  .section-missions .section__images img:nth-of-type(6) {
    left: 5vw;
  }
}

.section-missions .section__images img:nth-of-type(7) {
  bottom: 8vw;
  left: 22.5vw;
}

@media (max-width: 768px) {
  .section-missions .section__images img:nth-of-type(7) {
    left: 10vw;
    bottom: 27.5vw;
  }
}

.section-missions .section__images img:nth-of-type(8) {
  bottom: 3vw;
  left: 45vw;
}

@media (max-width: 768px) {
  .section-missions .section__images img:nth-of-type(8) {
    bottom: 10vw;
    left: 35vw;
  }
}

.section-missions .section__images img:nth-of-type(9) {
  bottom: 5vw;
  right: 15vw;
}

.section-missions .section__images img:nth-of-type(10) {
  bottom: 9vw;
  right: 7vw;
}

@media (max-width: 768px) {
  .section-missions .section__images img:nth-of-type(10) {
    right: 3vw;
    bottom: 22vw;
  }
}

/* Fullscreen text overlay */
.section-missions .missions-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  width: 90%;
  max-width: 900px;
  /* Solid background fallback - less GPU intensive */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 50%, transparent 85%);
  padding: 3rem 4rem;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Frosted glass only on devices that support it well */
@supports (backdrop-filter: blur(12px)) {
  @media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
    .section-missions .missions-overlay {
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.5) 50%, transparent 85%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
  }
}

.section-missions .missions-overlay__title {
  font-family: 'Fira Sans', var(--font-primary), sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 1rem;
  text-shadow: none;
  letter-spacing: -0.02em;
  line-height: 1.1;
  clip-path: inset(100% 0 0 0);
  transform: translateY(30px);
  transition: none;
}

.section-missions .missions-overlay__subtitle {
  font-family: 'Fira Sans', var(--font-primary), sans-serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 400;
  color: rgba(255,255,255,0.9);
  margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

.section-missions .missions-overlay.is-visible {
  opacity: 1;
}

.section-missions .missions-overlay.is-visible .missions-overlay__title {
  clip-path: inset(0 0 0 0);
  transform: translateY(0);
  transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-missions .missions-overlay.is-visible .missions-overlay__subtitle {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}

/* Wrapper for smooth scroll */
.missions-wrapper {
  position: relative;
}

.missions-content {
  position: relative;
}

/* Tablet */
@media (max-width: 1024px) {
  .section-missions .section__images img {
    width: 12vw;
  }
}

@media (max-width: 900px) {
  .section-missions .section__images img {
    width: 15vw;
  }

  .section-missions .missions-overlay {
    padding: 2.5rem 3rem;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .section-missions .missions-overlay {
    padding: 2rem;
    width: 95%;
  }

  .section-missions .missions-overlay__title {
    font-size: clamp(1.75rem, 8vw, 3rem);
  }

  .section-missions .missions-overlay__subtitle {
    font-size: clamp(0.85rem, 3vw, 1.1rem);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .section-missions .section__media,
  .section-missions h2 span,
  .section-missions .missions-overlay__title,
  .section-missions .missions-overlay__subtitle {
    transition: none !important;
    animation: none !important;
  }
}