/* ===========================
   INTRO SPLASH (HOME OPEN)
   =========================== */

body.intro-pending {
  background-color: #000;
}

/* Intro çıkışı başlar başlamaz body'yi beyaza döndür */
body.is-intro-exit {
  background-color: var(--bg);
}

body.intro-pending .page {
  opacity: 0;
}

/* Intro çıkışında sayfayı cross-fade ile içeri al */
body.is-intro-exit .page {
  opacity: 1;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  place-items: center;
  background: #000;
  opacity: 1;
  transition: opacity 1000ms cubic-bezier(.22, .61, .36, 1);
}

body.is-intro .intro,
body.is-intro-exit .intro {
  display: grid;
  pointer-events: auto;
}

.intro.is-exit {
  opacity: 0;
  pointer-events: none;
}

.intro__inner {
  width: min(250px, calc(100vw - 128px));
  display: grid;
  place-items: center;
}

.intro__logo-wrap {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  --intro-aes-bottom: 24%;
  --intro-arch-top: 74%;
}

.intro__logo-clip {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Ortak logo katmanı */
.intro__logo {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
  filter: brightness(0) invert(1);
}

/* AES — görünmeyen çizgiden yukarı çıkar */
.intro__logo--aes {
  opacity: 1;
  transform: translateY(112%);
  clip-path: inset(0 0 var(--intro-aes-bottom) 0);
  will-change: transform;
}

.intro.is-enter .intro__logo--aes {
  animation: introAesRise 1350ms cubic-bezier(.22, .61, .36, 1) 0ms forwards;
}

@keyframes introAesRise {
  0%   { transform: translateY(112%); }
  100% { transform: translateY(0); }
}

/* architects — AES bittikten sonra yerinde belirsin */
.intro__logo--arch {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  clip-path: inset(var(--intro-arch-top) 0 0 0);
  opacity: 0;
  transform: scale(.985);
  will-change: opacity, transform;
}

.intro.is-enter .intro__logo--arch {
  animation: introArchIn 650ms cubic-bezier(.22, .61, .36, 1) 1350ms forwards;
}

@keyframes introArchIn {
  0%   { opacity: 0; transform: scale(.985); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .intro,
  .intro__logo {
    animation: none !important;
    transition: none !important;
  }

  .intro__logo {
    opacity: 1;
    transform: none;
    filter: brightness(0) invert(1);
  }

  .intro__logo--aes {
    clip-path: inset(0 0 var(--intro-aes-bottom) 0);
  }

  .intro__logo--arch {
    position: absolute;
    inset: 0;
    clip-path: inset(var(--intro-arch-top) 0 0 0);
    opacity: 1;
    transform: none;
  }
}

/* --- Responsive Logo Scaling --- */
@media (max-width: 900px) {
  .intro__inner {
    width: min(160px, calc(100vw - 96px));
  }
}

@media (max-width: 600px) {
  .intro__inner {
    width: min(120px, calc(100vw - 64px));
  }
}