/* ==========================================================================
   AÇILIŞ PERDESİ
   Uygulamadaki BootIntro.svelte'in web karşılığı: aynı ritim, aynı ölçüler,
   aynı degrade. Perde başlıktaki markanın büyütülmüş kopyasıdır; sonunda
   tek bir dönüşümle sol üstteki logonun üzerine oturur.
   Ölçüler başlığın katları: logo 30px, boşluk 11px, yazı 21px.
   ========================================================================== */

.intro {
  --intro-unit: clamp(2.2px, 0.46vw, 3.6px);

  position: fixed;
  inset: 0;
  z-index: 400;
  overflow: hidden;
  background: var(--bg);
}

.intro.is-leaving {
  pointer-events: none;
}

.intro-backdrop,
.intro-decor,
.intro-stage {
  position: absolute;
  inset: 0;
}

.intro-backdrop {
  background: radial-gradient(
    120% 100% at 50% 45%,
    #10141d 0%,
    var(--bg) 60%,
    #05070b 100%
  );
}

.intro-aurora {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
}

.intro-aurora--one {
  background: radial-gradient(
    circle,
    rgba(90, 169, 238, 0.34) 0%,
    rgba(90, 169, 238, 0) 65%
  );
  animation: intro-drift-a 9s ease-in-out infinite;
}

.intro-aurora--two {
  background: radial-gradient(
    circle,
    rgba(227, 180, 92, 0.26) 0%,
    rgba(227, 180, 92, 0) 65%
  );
  animation: intro-drift-b 11s ease-in-out infinite;
}

@keyframes intro-drift-a {
  0%,
  100% {
    transform: translate(-62%, -56%) scale(1);
  }
  50% {
    transform: translate(-40%, -46%) scale(1.14);
  }
}

@keyframes intro-drift-b {
  0%,
  100% {
    transform: translate(-40%, -46%) scale(1.08);
  }
  50% {
    transform: translate(-60%, -58%) scale(0.94);
  }
}

/* Düz siyah yerine dokulu boşluk. */
.intro-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(255, 255, 255, 0.028) 0 1px,
    transparent 1px 4px
  );
  mask-image: radial-gradient(80% 65% at 50% 50%, #000 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(
    80% 65% at 50% 50%,
    #000 0%,
    transparent 100%
  );
}

.intro-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    75% 65% at 50% 50%,
    transparent 40%,
    rgba(3, 5, 10, 0.72) 100%
  );
}

/* Yazı belirirken kilidin arkasından geçen ışık şeridi. */
.intro-beam {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  opacity: 0;
  transform: scaleX(0.05);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(227, 180, 92, 0.55) 30%,
    rgba(120, 200, 255, 0.75) 50%,
    rgba(227, 180, 92, 0.55) 70%,
    transparent
  );
  animation: intro-beam 1500ms cubic-bezier(0.22, 1, 0.36, 1) 380ms both;
}

@keyframes intro-beam {
  0% {
    opacity: 0;
    transform: scaleX(0.05);
  }
  28% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

.intro-stage {
  display: grid;
  place-items: center;
}

.intro-lockup {
  display: flex;
  align-items: center;
  gap: calc(11 * var(--intro-unit));
  transform-origin: 0 0;
  will-change: transform;
}

/* Logo ve yazı, animasyon onları açana kadar saklı. */
.intro-logo {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: calc(30 * var(--intro-unit));
  height: calc(30 * var(--intro-unit));
  opacity: 0;
}

.intro-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 26%;
  filter: drop-shadow(0 0 calc(4 * var(--intro-unit)) rgba(227, 180, 92, 0.45));
}

.intro-halo {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(227, 180, 92, 0.3) 0%,
    rgba(90, 169, 238, 0.14) 45%,
    transparent 70%
  );
  animation: intro-halo 2600ms ease-in-out 260ms both;
}

@keyframes intro-halo {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  30% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.55;
    transform: scale(1.06);
  }
}

.intro-ring {
  position: absolute;
  inset: -16%;
  border: 1px solid rgba(227, 180, 92, 0.5);
  border-radius: 50%;
  opacity: 0;
  animation: intro-ring 1250ms cubic-bezier(0.22, 1, 0.36, 1) 240ms both;
}

.intro-ring--two {
  border-color: rgba(90, 169, 238, 0.45);
  animation-delay: 460ms;
}

@keyframes intro-ring {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  22% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: scale(2.15);
  }
}

.intro-sparks {
  position: absolute;
  inset: 0;
}

.intro-sparks span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2);
  border-radius: 50%;
  background: rgba(255, 236, 194, 0.95);
  box-shadow: 0 0 8px rgba(227, 180, 92, 0.9);
  opacity: 0;
  animation: intro-spark 1100ms cubic-bezier(0.22, 1, 0.36, 1) var(--spark-delay)
    both;
}

@keyframes intro-spark {
  0% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(calc(var(--distance) * 0.16))
      scale(0.3);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(var(--angle)) translateX(var(--distance)) scale(0);
  }
}

.intro-word-slot {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

/* Başlıktaki marka yazısıyla aynı degrade: iniş bitince iki katman
   üst üste oturuyor, geçiş görünmüyor. */
.intro-word,
.intro-shine {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Geist Site", system-ui, sans-serif;
  font-size: calc(21 * var(--intro-unit));
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.intro-word {
  opacity: 0;
  clip-path: inset(-35% 100% -35% 0);
  background-image: linear-gradient(
    105deg,
    #dff5ff 0%,
    #62c4f4 20%,
    #8d93ff 42%,
    #e8c76f 62%,
    #7ecdf2 82%,
    #dff5ff 100%
  );
  background-size: 200% 100%;
  background-position: 100% 0;
  filter: drop-shadow(0 0 calc(2 * var(--intro-unit)) rgba(93, 176, 235, 0.35));
}

.intro-shine {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  background-image: linear-gradient(
    100deg,
    transparent 42%,
    rgba(255, 255, 255, 0.95) 50%,
    transparent 58%
  );
  background-size: 300% 100%;
  background-position: 115% 0;
}

/* Açılan yazının ucundaki ışık çizgisi. */
.intro-edge {
  position: absolute;
  top: -12%;
  left: 0;
  width: 2px;
  height: 124%;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(226, 244, 255, 0.95) 22%,
    rgba(255, 255, 255, 1) 50%,
    rgba(226, 244, 255, 0.95) 78%,
    transparent
  );
  box-shadow: 0 0 12px rgba(140, 205, 255, 0.9);
}

.intro-tagline-slot {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin-top: calc(24 * var(--intro-unit));
  text-align: center;
}

.intro-tagline {
  display: inline-block;
  color: var(--dim);
  font-family: "Geist Mono Site", ui-monospace, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  opacity: 0;
}

.intro-skip {
  position: absolute;
  right: 24px;
  bottom: 22px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: rgba(16, 19, 25, 0.7);
  color: var(--dim);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  animation: intro-skip-in 400ms ease-out 1100ms both;
}

.intro-skip:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

@keyframes intro-skip-in {
  to {
    opacity: 1;
  }
}

/* Yazı tipi ölçülene kadar sahne saklı: ilk karede yerinden oynamıyor. */
.intro-stage,
.intro-decor {
  opacity: 0;
}

.intro.is-ready .intro-stage,
.intro.is-ready .intro-decor {
  opacity: 1;
}

/* Perde açıkken sayfa kaymasın. */
html.intro-locked,
html.intro-locked body {
  overflow: hidden;
}

/* Perde inerken başlıktaki gerçek marka saklı durur, sonra devralır. */
.brand.is-docking img,
.brand.is-docking span {
  opacity: 0;
}

/* --- Başlıktaki marka yazısının ışık geçişi ---------------------------- */

.brand span {
  position: relative;
  background-size: 220% 100%;
  background-position: 0 0;
}

.brand.is-sweeping span {
  animation: brand-sweep 1100ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes brand-sweep {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-aurora,
  .intro-beam,
  .intro-halo,
  .intro-ring,
  .intro-sparks span,
  .brand.is-sweeping span {
    animation: none;
  }

  .intro-beam,
  .intro-ring,
  .intro-sparks {
    opacity: 0;
  }

  .intro-halo {
    opacity: 0.5;
  }
}