/* ═══════════════════════════════════════════════════════════
   Sinematik açılış + sayfa geçiş perdesi

   Açılışta header'daki GERÇEK logo düğümü ekranın ortasına
   büyütülür, parça parça kurulur ve sonra kendi köşesine uçar
   (FLIP). Böylece tek DOM düğümü hem intro hem header olur.
   ═══════════════════════════════════════════════════════════ */

/* ── Perde ── */
.perde {
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  background: var(--paper);
  pointer-events: none;
}

/* Sıcak merkez ışıması — logo kurulurken nefes alır */
.perde::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 46%,
    rgba(227, 217, 198, 0.75) 0%,
    rgba(227, 217, 198, 0) 58%
  );
  opacity: 0;
  animation: perde-isik 2600ms var(--ease-soft) forwards;
}

@keyframes perde-isik {
  0% { opacity: 0; transform: scale(0.7); }
  40% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.35; transform: scale(1.15); }
}

/* Açılış bitince perde kalkar */
html.acilis-bitti .perde {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 760ms var(--ease-soft), transform 900ms var(--ease-expo);
}

/* ── Açılış sırasında logo sahnede ── */
.marka {
  z-index: calc(var(--z-intro) + 1);
}

/* JS ölçtüğü FLIP dönüşümünü buraya yazar */
html.acilis-oynuyor .marka {
  transform: var(--flip, none);
  transform-origin: left top;
}

html.acilis-inis .marka {
  transform: none;
  transition: transform 1150ms var(--ease-expo);
}

/* ── Logo parçalarının kuruluşu ──
   Sıra: petaller → kare → krem levha → harfler → alt yazı → parıltı */

html.acilis-oynuyor .marka-logo .lg-plate,
html.acilis-oynuyor .marka-logo .lg-square,
html.acilis-oynuyor .marka-logo .lg-petal,
html.acilis-oynuyor .marka-logo .lg-letter,
html.acilis-oynuyor .marka-logo .lg-sub {
  animation-fill-mode: both;
  animation-timing-function: var(--ease-expo);
}

/* Petaller: dört köşeden dönerek gelir */
html.acilis-oynuyor .marka-logo .lg-petal {
  transform-box: fill-box;
  transform-origin: center;
  animation-name: petal-gel;
  animation-duration: 900ms;
}
html.acilis-oynuyor .marka-logo .lg-petal-1 { animation-delay: 60ms; --gx: -120px; --gy: -120px; }
html.acilis-oynuyor .marka-logo .lg-petal-2 { animation-delay: 170ms; --gx: 120px; --gy: -120px; }
html.acilis-oynuyor .marka-logo .lg-petal-3 { animation-delay: 280ms; --gx: 120px; --gy: 120px; }
html.acilis-oynuyor .marka-logo .lg-petal-4 { animation-delay: 390ms; --gx: -120px; --gy: 120px; }

@keyframes petal-gel {
  0% {
    opacity: 0;
    transform: translate(var(--gx), var(--gy)) rotate(-45deg) scale(0.4);
  }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); }
}

/* Terracotta kare petallerin arkasında açılır */
html.acilis-oynuyor .marka-logo .lg-square {
  transform-box: fill-box;
  transform-origin: center;
  animation-name: kare-ac;
  animation-duration: 820ms;
  animation-delay: 520ms;
}
@keyframes kare-ac {
  0% { opacity: 0; transform: scale(0.15) rotate(-24deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Krem levha sağa doğru açılır */
html.acilis-oynuyor .marka-logo .lg-plate {
  transform-box: fill-box;
  transform-origin: left center;
  animation-name: levha-ac;
  animation-duration: 760ms;
  animation-delay: 1000ms;
}
@keyframes levha-ac {
  0% { transform: scaleX(0.228); }  /* kare genişliği kadar */
  100% { transform: scaleX(1); }
}

/* "akarçay" harfleri sağdan sırayla yerine oturur */
html.acilis-oynuyor .marka-logo .lg-letter {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation-name: harf-gel;
  animation-duration: 780ms;
  animation-delay: calc(1180ms + var(--i, 0) * 62ms);
}
@keyframes harf-gel {
  0% { opacity: 0; transform: translateX(90px) translateY(14px) rotate(6deg); }
  100% { opacity: 1; transform: translateX(0) translateY(0) rotate(0); }
}

/* PATISSERIE harfleri merkezden dışa açılır (letterspacing hissi) */
html.acilis-oynuyor .marka-logo .lg-subletter {
  transform-box: fill-box;
  transform-origin: center;
  animation: alt-harf-ac 720ms var(--ease-expo) both;
  animation-delay: calc(1700ms + var(--i, 0) * 26ms);
}
@keyframes alt-harf-ac {
  0% { opacity: 0; transform: translateX(calc(var(--dx, 0) * 1px)) scale(0.6); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* Altın parıltı logonun üstünden süpürür */
.marka-parilti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    100deg,
    transparent 38%,
    rgba(255, 255, 255, 0.86) 50%,
    transparent 62%
  );
  mix-blend-mode: overlay;
}
html.acilis-oynuyor .marka-parilti {
  animation: parilti 900ms var(--ease-soft) 2050ms both;
}
@keyframes parilti {
  0% { opacity: 0; transform: translateX(-115%) skewX(-14deg); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateX(115%) skewX(-14deg); }
}

/* ═══ Sayfalar arası geçiş perdesi ═══ */

.gecis {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  display: grid;
  place-items: center;
  pointer-events: none;
  visibility: hidden;
}

.gecis-katman {
  position: absolute;
  inset: 0;
  background: var(--terracotta);
  transform: scaleY(0);
  transform-origin: bottom center;
}
.gecis-katman:nth-child(2) {
  background: var(--sand-200);
}
.gecis-amblem {
  position: relative;
  width: clamp(64px, 12vw, 104px);
  opacity: 0;
  transform: scale(0.5) rotate(-45deg);
  filter: drop-shadow(0 12px 30px rgba(61, 26, 15, 0.35));
}

/* Kapanış: alttan yukarı iki katman + amblem belirir */
.gecis.kapaniyor {
  visibility: visible;
}
.gecis.kapaniyor .gecis-katman {
  animation: perde-kapan 620ms var(--ease-expo) forwards;
}
.gecis.kapaniyor .gecis-katman:nth-child(2) {
  animation-delay: 90ms;
}
.gecis.kapaniyor .gecis-amblem {
  animation: amblem-bel 520ms var(--ease-back) 240ms forwards;
}
@keyframes perde-kapan {
  0% { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}
@keyframes amblem-bel {
  0% { opacity: 0; transform: scale(0.5) rotate(-45deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Açılış: yeni sayfada perde yukarı çekilir */
.gecis.aciliyor {
  visibility: visible;
}
.gecis.aciliyor .gecis-katman {
  transform-origin: top center;
  animation: perde-acil 700ms var(--ease-expo) forwards;
}
.gecis.aciliyor .gecis-katman:nth-child(1) {
  animation-delay: 120ms;
}
.gecis.aciliyor .gecis-amblem {
  animation: amblem-git 420ms var(--ease-soft) forwards;
}
@keyframes perde-acil {
  0% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
@keyframes amblem-git {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5) rotate(35deg); }
}

/* ── Hareket azaltma: kuruluş yerine sade geçiş ── */
@media (prefers-reduced-motion: reduce) {
  .perde::after,
  html.acilis-oynuyor .marka-logo * ,
  .marka-parilti {
    animation: none !important;
  }
  html.acilis-oynuyor .marka {
    transform: none !important;
  }
}