/* ═══════════════════════════════════════════════════
   ANİMASYONLAR — Hakan Yöndem
   ═══════════════════════════════════════════════════ */

/* ── Temel keyframes ─────────────────────────────── */
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.4); opacity: .6; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: none; }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: none; }
}

@keyframes expandWidth {
  from { width: 0; }
  to   { width: var(--target-w, 100%); }
}

/* Sayfa giriş karakteri — harf harf */
@keyframes charReveal {
  from { opacity: 0; transform: translateY(1em) rotateX(-30deg); }
  to   { opacity: 1; transform: none; }
}

/* Parallax yardımcısı (JS ile transform uygulanır) */
.parallax { will-change: transform; }

/* Sayfa geçiş maskesi */
.page-mask {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 9998;
  transform-origin: top;
  transform: scaleY(0);
  pointer-events: none;
}
.page-mask.entering { animation: maskIn .6s var(--ease-in) forwards; }
.page-mask.leaving  { animation: maskOut .6s var(--ease-out) forwards; }

@keyframes maskIn {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes maskOut {
  from { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}

/* Satır çizgisi animasyonu */
.line-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2s var(--ease) forwards;
}
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* ── Hover efektler ──────────────────────────────── */
.hover-lift {
  transition: transform var(--dur-mid) var(--ease),
              box-shadow var(--dur-mid) var(--ease);
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0,0,0,.4);
}

/* Altın parlama efekti — özel kartlar için */
.hover-glow {
  transition: box-shadow var(--dur-mid) var(--ease);
}
.hover-glow:hover {
  box-shadow: 0 0 0 1px rgba(200,169,110,.3),
              0 20px 40px rgba(200,169,110,.08);
}

/* Metin parıltı geçişi */
.shimmer {
  background: linear-gradient(
    120deg,
    var(--ash-light) 0%,
    var(--paper) 40%,
    var(--accent) 50%,
    var(--paper) 60%,
    var(--ash-light) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.shimmer:hover {
  animation: shimmerMove 1.2s var(--ease) forwards;
}
@keyframes shimmerMove {
  from { background-position: 100% 0; }
  to   { background-position: -100% 0; }
}

/* ── Yükleme ekranı ──────────────────────────────── */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2rem;
}

.loader-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 300;
  letter-spacing: .1em;
  color: var(--paper);
  overflow: hidden;
}

.loader-line {
  width: 0;
  height: 1px;
  background: var(--accent);
  animation: loaderExpand 1.2s var(--ease) .4s forwards;
}
@keyframes loaderExpand {
  to { width: 200px; }
}

.site-loader.done {
  animation: loaderFade .6s var(--ease) forwards;
  pointer-events: none;
}
@keyframes loaderFade {
  to { opacity: 0; visibility: hidden; }
}