/*
 * SULOOK "Damacana" yükleme animasyonu — v1 (2 Ekim 2026)
 * Perde, damacana ve çıkış. İşaretleme ve zamanlama: damacana-loader-v1.js
 * Damacananın kendi animasyonu SVG'nin içindeki <style> bloğundadır (sınıflar sdc- önekli).
 *
 * Zamanlama (toplam 3 sn): 0–1,8 sn damacana dolar ve zıplar. 1,8'de yere vurduğu karede:
 *   perde bir kez sarsılır (0,3 sn) · vurduğu noktadan delik ease-out açılır (1,2 sn) ·
 *   deliğin önünde ince bir şok dalgası koşup söner (0,825 sn) · damacana ezilip geri seker,
 *   0,15 sn sonra deliğe düşer (0,39 sn). 3. saniyede site açık.
 */

@property --sdc-hole {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --sdc-wa {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

#sulook-damacana {
  --sdc-paper: #ffffff;
  --sdc-rim: #b6e5fc;
  --sdc-edge: #38bdf8;
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  -webkit-user-select: none;
  user-select: none;
  /* JS hiç çalışmazsa perde 25 sn sonra kendiliğinden kalkar. */
  animation: sdc-failsafe .4s ease 25s forwards;
}

@keyframes sdc-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Perde zemini ayrı katman: delik yalnız burada açılır, damacana kesilmez. */
#sulook-damacana .sdc-bg {
  position: absolute;
  inset: 0;
  background: var(--sdc-paper);
}

#sulook-damacana svg {
  position: relative;
  display: block;
  width: clamp(120px, 22vmin, 170px);
  height: auto;
  overflow: visible;
  transform-origin: 50% 94.7%;
}

/* Delik: vurduğu noktadan, hızlı patlayıp yavaşlayarak (ease-out). Kenarda ince mavi çizgi ve
   açık mavi halka; önünde ince bir şok dalgası koşar ve söner. */
#sulook-damacana.sdc--wipe { pointer-events: none; animation: none; }

#sulook-damacana.sdc--wipe .sdc-bg {
  background: radial-gradient(circle at var(--sdc-x, 50%) var(--sdc-y, 60%),
    transparent var(--sdc-hole),
    var(--sdc-edge) var(--sdc-hole),
    var(--sdc-edge) calc(var(--sdc-hole) + 2px),
    var(--sdc-rim) calc(var(--sdc-hole) + 2px),
    var(--sdc-rim) calc(var(--sdc-hole) + 13px),
    var(--sdc-paper) calc(var(--sdc-hole) + 14px),
    var(--sdc-paper) calc(var(--sdc-hole) * 1.15 + 26px),
    rgb(56 189 248 / var(--sdc-wa)) calc(var(--sdc-hole) * 1.15 + 26px),
    rgb(56 189 248 / var(--sdc-wa)) calc(var(--sdc-hole) * 1.15 + 29px),
    var(--sdc-paper) calc(var(--sdc-hole) * 1.15 + 29px));
  -webkit-mask-image: radial-gradient(circle at var(--sdc-x, 50%) var(--sdc-y, 60%),
    transparent var(--sdc-hole), #000 calc(var(--sdc-hole) + .5px));
  mask-image: radial-gradient(circle at var(--sdc-x, 50%) var(--sdc-y, 60%),
    transparent var(--sdc-hole), #000 calc(var(--sdc-hole) + .5px));
  animation:
    sdc-hole 1.2s cubic-bezier(.25, 1, .5, 1) forwards,
    sdc-wave .825s ease-out forwards;
}

@keyframes sdc-hole {
  from { --sdc-hole: 0px; }
  to { --sdc-hole: var(--sdc-reach, 150vmax); }
}

@keyframes sdc-wave {
  from { --sdc-wa: .75; }
  to { --sdc-wa: 0; }
}

/* Darbe: perde bir kez aşağı sarsılır. (.sdc--wipe'tan sonra gelmeli; o failsafe'i kapatır.) */
#sulook-damacana.sdc--hit { animation: sdc-shake .3s ease-out; }

@keyframes sdc-shake {
  0% { transform: none; }
  25% { transform: translateY(4px); }
  55% { transform: translateY(-2px); }
  80% { transform: translateY(1px); }
  100% { transform: none; }
}

/* Damacana önce yerinde ezilip geri seker (SVG içinde), 0,15 sn sonra yerçekimiyle deliğe düşer. */
#sulook-damacana.sdc--sink svg { animation: sdc-sink .39s cubic-bezier(.55, 0, .9, .45) .15s forwards; }

@keyframes sdc-sink {
  0% { transform: none; opacity: 1; }
  100% { transform: translateY(12%) scale(.12); opacity: 0; }
}

/* Hareket azaltma tercihinde: kısa bir solma. */
#sulook-damacana.sdc--fade {
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}