/* Hero intro overlay — aligned with Figma "animation desktop" (1440×960 reference) */

/* Prevent flash of full logo before hero-intro.js runs */
.page-intro__icon {
  opacity: 0;
  transform: scale(0.92);
}

.page-intro__title {
  opacity: 0;
}

.page-intro__tagline {
  opacity: 0;
  transform: translateY(40px);
}

.page-intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1d1d1b;
  pointer-events: auto;
  transition: background-color 0.45s ease;
}

.page-intro.is-hero-revealing {
  background-color: transparent;
  pointer-events: none;
}

.page-intro.is-complete {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.23s ease, visibility 0.23s ease;
}

.page-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* Logo block: Figma logo frame 215×238; icon ~205×206 */
.page-intro__stack {
  --intro-icon-size: 120px;
  --intro-logo-width: 215px;
  --intro-wordmark-width: 126px;
  --intro-tagline-width: 117px;
  --intro-name-height: 19px;
  width: min(var(--intro-logo-width), 100%);
  max-width: calc(100vw - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

@media (min-width: 1024px) {
  .page-intro__stack {
    --intro-icon-size: 205px;
    --intro-logo-width: 215px;
    --intro-wordmark-width: 215px;
    --intro-tagline-width: 200px;
    gap: 16px;
  }
}

.page-intro__cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 11px;
  will-change: transform, opacity;
}

@media (min-width: 1024px) {
  .page-intro__cluster {
    gap: 12px;
  }
}

.page-intro__cluster.is-morphing {
  position: fixed;
  z-index: 210;
  margin: 0;
}

.page-intro__icon {
  display: block;
  width: var(--intro-icon-size);
  height: auto;
  aspect-ratio: 1;
  align-self: center;
  flex-shrink: 0;
  color: #fff;
}

/* DOUBLE I GROUP — path-based SVG from logo.svg, matched to Figma wordmark width */
.page-intro__title {
  width: var(--intro-wordmark-width);
  height: auto;
  margin: 0;
  display: block;
  align-self: center;
  min-height: var(--intro-name-height);
}

/* architecture and design studio — outlined SVG asset, slightly narrower than wordmark */
.page-intro__tagline {
  width: var(--intro-tagline-width);
  height: auto;
  margin: 0;
  align-self: center;
  display: block;
}

/* Initial hidden state before intro completes */

body:not(.page--intro-done) .hero__slideshow {
  visibility: visible;
  opacity: 1
}

body:not(.page--intro-done) .hero__slide.is-active,
body:not(.page--intro-done) .hero__img.is-active {
  opacity: 0;
  visibility: visible
}

body:not(.page--intro-done) .hero__slide:not(.is-active),
body:not(.page--intro-done) .hero__img:not(.is-active) {
  opacity: 0;
  visibility: hidden
}

body:not(.page--intro-done) .hero__gradient-bottom,
body:not(.page--intro-done) .hero__stat,
body:not(.page--intro-done) .hero__lead-line,
body:not(.page--intro-done) .hero__btn,
body:not(.page--intro-done) .header__nav--left,
body:not(.page--intro-done) .header__nav--right,
body:not(.page--intro-done) .header__menu-btn,
body:not(.page--intro-done) .header__contact-btn,
body:not(.page--intro-done) .header__brand {
  opacity: 0;
  visibility: hidden;
}

body.page--intro-done .hero__slideshow,
body.page--intro-done .hero__slide,
body.page--intro-done .hero__img,
body.page--intro-done .hero__gradient-bottom,
body.page--intro-done .hero__stat,
body.page--intro-done .hero__lead-line,
body.page--intro-done .hero__btn,
body.page--intro-done .header__nav--left,
body.page--intro-done .header__nav--right,
body.page--intro-done .header__menu-btn,
body.page--intro-done .header__contact-btn,
body.page--intro-done .header__brand {
  opacity: 1;
  visibility: visible;
}

@keyframes intro-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes intro-fade-in-nav {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.intro-anim-fade-up {
  animation: intro-fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.intro-anim-nav {
  animation: intro-fade-in-nav 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .page-intro {
    display: none !important;
  }

  body:not(.page--intro-done) .hero__slideshow,
  body:not(.page--intro-done) .hero__slide.is-active,
  body:not(.page--intro-done) .hero__img.is-active,
  body:not(.page--intro-done) .hero__gradient-bottom,
  body:not(.page--intro-done) .hero__stat,
  body:not(.page--intro-done) .hero__lead-line,
  body:not(.page--intro-done) .hero__btn,
  body:not(.page--intro-done) .header__nav--left,
  body:not(.page--intro-done) .header__nav--right,
  body:not(.page--intro-done) .header__menu-btn,
  body:not(.page--intro-done) .header__contact-btn,
  body:not(.page--intro-done) .header__brand {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  .intro-anim-fade-up,
  .intro-anim-nav {
    animation: none !important;
  }
}