/* =========================================================
   ANIMATIONS.CSS: hareketler ve giriş animasyonları
   ========================================================= */

/* ---------- Anahtar kareler ---------- */
@keyframes fadeUp      { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes fadeScale   { from { opacity: 0; transform: scale(.85) translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes floatY      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes floatRot    { 0%, 100% { transform: rotate(var(--r, 0deg)) translateY(0); } 50% { transform: rotate(var(--r, 0deg)) translateY(-12px); } }
@keyframes sweep       { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes spin        { to { transform: rotate(360deg); } }
@keyframes drift       { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(40px, 30px) scale(1.12); } }
@keyframes gradientMove{ 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes pulseDot    { 0% { box-shadow: 0 0 0 0 rgba(255, 92, 157, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(255, 92, 157, 0); } }
@keyframes btnShine    { 0%, 60% { left: -75%; } 100% { left: 130%; } }
@keyframes waPulse     { 0% { box-shadow: 0 10px 30px rgba(37, 211, 102, .35), 0 0 0 0 rgba(37, 211, 102, .5); }
                         70%, 100% { box-shadow: 0 10px 30px rgba(37, 211, 102, .35), 0 0 0 16px rgba(37, 211, 102, 0); } }
@keyframes scrollDot   { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

/* ---------- Hero: metin sırayla belirir ---------- */
.hero-text > * { opacity: 0; animation: fadeUp .9s var(--ease) forwards; }
.hero-text > :nth-child(1) { animation-delay: .10s; }
.hero-text > :nth-child(2) { animation-delay: .25s; }
.hero-text > :nth-child(3) { animation-delay: .40s; }
.hero-text > :nth-child(4) { animation-delay: .55s; }
.hero-text > :nth-child(5) { animation-delay: .70s; }

/* Kayan gradient başlık */
.hero .gradient-text {
  background-image: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 200% 100%;
  animation: gradientMove 5s linear infinite;
}

/* Rozet noktası */
.badge-dot { animation: pulseDot 1.8s infinite; }

/* ---------- Hero: kılıflar ---------- */
.hero-visual { opacity: 0; animation: fadeScale 1.1s var(--ease) .35s forwards; }

.case-main { animation: floatY 6s ease-in-out infinite; }
.case-back-1 { animation: floatRot 7s ease-in-out infinite .6s; }
.case-back-2 { animation: floatRot 8s ease-in-out infinite 1.2s; }
.case-shine { animation: sweep 5s ease-in-out infinite 1.5s; }
.orbit-ring { animation: spin 40s linear infinite; }

.chip-1 { animation: floatY 5s ease-in-out infinite .3s; }
.chip-2 { animation: floatY 6s ease-in-out infinite 1s; }

/* Arka plan ışıkları yavaşça kayar */
.hero-glow-1 { animation: drift 14s ease-in-out infinite; }
.hero-glow-2 { animation: drift 17s ease-in-out infinite reverse; }

/* ---------- Butonlar ---------- */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .4), transparent);
  transform: skewX(-20deg); animation: btnShine 4s ease-in-out infinite 2s;
}
.hero .btn-whatsapp { animation: waPulse 2.4s infinite; }

/* Kaydırma ipucu */
.scroll-hint span { animation: scrollDot 1.8s ease-in-out infinite; }

/* ---------- Hareketi azaltmak isteyenler için ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-text > *, .hero-visual { opacity: 1 !important; transform: none !important; }
}


/* ---------- Model seçilmediğinde sallanma ---------- */
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }
.model-options.shake { animation: shake .45s; }

/* ---------- Yüzen butonlar ve sepet ---------- */
@keyframes fabIn { from { opacity: 0; transform: translateY(30px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes bump  { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.28) rotate(-8deg); } 70% { transform: scale(.94); } }

.fab-wa { animation: fabIn .7s var(--ease) 1.6s both, waPulse 2.4s infinite 2.4s; }
.fab-cart.bump { animation: bump .6s var(--ease); }
.fab-cart:not([hidden]) { animation: fabIn .5s var(--ease) both; }
.fab-cart.bump:not([hidden]) { animation: bump .6s var(--ease); }

/* =========================================================
   ADIM 7: KAYDIRMA ANİMASYONLARI VE ETKİLEŞİMLER
   ========================================================= */

/* ---------- Kaydırınca belirme (hareket azaltma açıksa uygulanmaz) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    translate: 0 36px;
    transition:
      opacity .85s var(--ease) var(--d, 0ms),
      translate .85s var(--ease) var(--d, 0ms),
      scale .85s var(--ease) var(--d, 0ms),
      transform .45s var(--ease),
      border-color .4s,
      box-shadow .4s;
  }
  html.js [data-reveal="left"]  { translate: -44px 0; }
  html.js [data-reveal="right"] { translate: 44px 0; }
  html.js [data-reveal="zoom"]  { translate: none; scale: .92; }

  html.js [data-reveal].revealed { opacity: 1; translate: none; scale: none; }

  /* Fareyle eğilirken kart imleci hızlı takip etsin */
  html.js .product-card[data-reveal].is-tilting {
    transition:
      opacity .85s var(--ease) var(--d, 0ms),
      translate .85s var(--ease) var(--d, 0ms),
      transform .12s linear,
      border-color .4s,
      box-shadow .4s;
  }
}

/* ---------- Ürün kartı: 3D eğilme ve parlama ---------- */
.product-card { position: relative; }
.product-card:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-8px);
}
.product-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .14), transparent 55%);
  transition: opacity .35s;
}
.product-card:hover::after { opacity: 1; }

/* ---------- Hero: fareyle derinlik (translate özelliği, süzülme animasyonuyla çakışmaz) ---------- */
.case-main   { translate: calc(var(--px, 0) * 14px)  calc(var(--py, 0) * 14px);  transition: translate .5s var(--ease); }
.case-back-1 { translate: calc(var(--px, 0) * -22px) calc(var(--py, 0) * -12px); transition: translate .6s var(--ease); }
.case-back-2 { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * 18px);  transition: translate .6s var(--ease); }
.float-chip  { translate: calc(var(--px, 0) * 26px)  calc(var(--py, 0) * 20px);  transition: translate .7s var(--ease); }

/* ---------- Menüde aktif bölüm çizgisi ---------- */
.nav a:not(.btn) { position: relative; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px;
  background: var(--gradient); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:not(.btn):hover::after, .nav a.active::after { transform: scaleX(1); }
.nav a.active:not(.btn) { color: var(--text); }

/* ---------- Sayfa ilerleme çubuğu ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 150; width: 100%; height: 3px; pointer-events: none;
  background: var(--gradient); transform-origin: left; transform: scaleX(var(--p, 0));
}


/* ---------- 8L: Hero vitrini sahne girişi, canlı ışık, derinlik ---------- */
@keyframes scDrop {   /* 8M: kartlar yerinde belirir (fotoğraftaki arka plan hareket etmez) */
  0%   { opacity: 0; transform: translateY(4%) scale(.97); }
  100% { opacity: 1; transform: none; }
}
@keyframes scShadowIn { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
@keyframes scFloat    { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes scBeam     { 0%, 100% { translate: -3% 0; opacity: .7; } 50% { translate: 3% 1%; opacity: 1; } }
@keyframes scSweep    { from { translate: -130% 0; opacity: 0; } 25% { opacity: 1; } to { translate: 130% 0; opacity: 0; } }
@keyframes scDust     { 0% { opacity: 0; translate: 0 0; } 25% { opacity: .75; } 100% { opacity: 0; translate: var(--dx) -80px; } }
@keyframes vtOut      { to { opacity: 0; } }
@keyframes vtIn       { from { opacity: 0; } }

.sc-slot { --sc-d: .3s; }
.sc-center { --sc-d: .35s; }
.sc-left   { --sc-d: .6s; }
.sc-right  { --sc-d: .75s; }
.sc-front  { --sc-d: .9s; }
.sc-farright { --sc-d: 1.05s; }
.sc-topleft  { --sc-d: 1.2s; }
.sc-topright { --sc-d: 1.35s; }
/* Sahne zemini daha çabuk belirsin; kılıflar zemin göründükten sonra konar */
.hero-visual { animation-duration: .8s; animation-delay: .1s; }
.sc-light::before, .sc-light::after { content: ""; position: absolute; pointer-events: none; }
.sc-dust { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sc-dust i {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: rgba(255, 236, 200, .85); filter: blur(.4px); opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* Giriş: önce sahne, sonra ortadaki, sol ve sağ kılıf kaideye konar; gölge arkadan belirir */
  html.js .showcase:not(.sc-ready) .sc-slot { opacity: 0; }
  html.js .showcase.sc-ready .sc-case { animation: scDrop 1.05s cubic-bezier(.22, .9, .3, 1) var(--sc-d) both; }
  html.js .showcase.sc-ready .sc-shadow { animation: scShadowIn .7s ease-out calc(var(--sc-d) + .5s) both; }

  /* Canlı ışık: yavaş kayan huzme + açılışta bir kez süpüren parlama */
  .sc-light::before {
    inset: -6%; mix-blend-mode: screen;
    background: linear-gradient(112deg, transparent 24%, rgba(255, 226, 190, .12) 42%, transparent 62%);
    animation: scBeam 14s ease-in-out infinite;
  }
  .showcase.sc-ready .sc-light::after {
    inset: 0; opacity: 0; mix-blend-mode: screen;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 240, 215, .22) 50%, transparent 62%);
    animation: scSweep 1.9s ease-in-out 1.1s both;
  }
  .sc-dust i { animation: scDust var(--t) linear var(--w) infinite; }

  /* Derinlik (parallax): kılıflar sahneden biraz fazla kayar; ışık ters yöne */
  /* 8M: kartlar sahne fotoğrafındaki telefonların üstünü örttüğü için kaymaz (derinlik kaydırması yalnızca ışıkta) */
  .sc-light { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -5px); }

  /* Tekrar ziyaret: kısa giriş */
  .showcase.sc-quick { --quick: 1; }
  .showcase.sc-quick .sc-slot { --sc-d: .05s; }
  .showcase.sc-quick .sc-case { animation-duration: .55s !important; }
  .showcase.sc-quick .sc-light::after { animation: none !important; }

  /* Ekran dışındayken duraklat */
  .showcase.sc-paused *, .showcase.sc-paused *::before, .showcase.sc-paused *::after { animation-play-state: paused !important; }
  .showcase.sc-lite .sc-dust { display: none; }

  /* Sayfalar arası yumuşak geçiş (destekleyen tarayıcılarda; diğerlerinde etkisiz) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .2s ease both vtOut; }
  ::view-transition-new(root) { animation: .32s ease both vtIn; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase .sc-slot { opacity: 1 !important; }
  .sc-dust { display: none; }
}