/* ==========================================================
   LEVANTIN36 — animations.css
   Keyframes, reveal sistemi, metin bölme, parallax yardımcıları
   JS yoksa içerik görünür kalır (html.js kontrolü)
   ========================================================== */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ring-spin-3d { from { transform: rotateX(68deg) rotateZ(0deg); } to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes ring-tilt { 0%, 100% { transform: rotateX(18deg) rotateY(-18deg); } 50% { transform: rotateX(-18deg) rotateY(18deg); } }
@keyframes logo-spin {
  0% { transform: rotateY(-180deg) scale(0.6); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}
@keyframes load-bar { to { transform: scaleX(1); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes btn-shine { from { left: -60%; } to { left: 130%; } }
@keyframes particle-rise {
  0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  15% { opacity: 0.9; }
  100% { transform: translate3d(var(--dx, 20px), -105vh, 0) scale(1.2); opacity: 0; }
}
@keyframes cue-line {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes g-in { from { opacity: 0; transform: translateY(30px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes section-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes target-pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--gold), 0 0 50px -8px rgba(181, 154, 99, 0.5); } 50% { box-shadow: 0 0 0 1px var(--gold), 0 0 80px 0 rgba(181, 154, 99, 0.75); } }
@keyframes bg-drift { 0%, 100% { transform: scale(1.08) translate3d(0, 0, 0); } 50% { transform: scale(1.14) translate3d(-1.2%, -1%, 0); } }
@keyframes shimmer { from { background-position: 0 0; } to { background-position: 200% 0; } }

/* ---------- Hero ---------- */
.hero__bg { animation: bg-drift 24s ease-in-out infinite; }
.hero__rings span { animation: ring-tilt 16s ease-in-out infinite; transform-style: preserve-3d; }
.hero__rings span:nth-child(2) { animation-duration: 22s; animation-direction: reverse; }
.hero__rings span:nth-child(3) { animation-duration: 28s; }
.hero__particles i { animation: particle-rise var(--dur, 12s) linear var(--delay, 0s) infinite; left: var(--x, 50%); }
.scroll-cue::after { animation: cue-line 2.4s var(--ease-in-out) infinite; }

/* ---------- Reveal ---------- */
html.js [data-reveal] {
  opacity: 0;
  translate: 0 44px;
  transition: opacity 1s var(--ease) var(--d, 0s), translate 1.1s var(--ease) var(--d, 0s);
}
html.js [data-reveal="left"] { translate: -50px 0; }
html.js [data-reveal="right"] { translate: 50px 0; }
html.js [data-reveal="scale"] { translate: 0 0; scale: 0.92; transition: opacity 1s var(--ease) var(--d, 0s), scale 1.2s var(--ease) var(--d, 0s); }
html.js [data-reveal].is-visible { opacity: 1; translate: 0 0; scale: 1; }

/* Tilt ile birlikte kullanılan kartlarda reveal + tilt geçişleri */
[data-tilt] { transition: opacity 1s var(--ease) var(--d, 0s), translate 1.1s var(--ease) var(--d, 0s), transform 0.35s ease-out, box-shadow 0.4s, border-color 0.4s; will-change: transform; }

html.js [data-reveal][data-tilt] { transition: opacity 1s var(--ease) var(--d, 0s), translate 1.1s var(--ease) var(--d, 0s), transform 0.35s ease-out, box-shadow 0.4s, border-color 0.4s; }

/* Çizgi çizme */
html.js [data-line] { transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) var(--d, 0s); }
html.js [data-line].is-visible { transform: scaleX(1); }

/* Görsel perdesi (görsel açılış efekti) */
html.js .img-reveal { position: relative; }
html.js .img-reveal::before {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background: var(--forest);
  transform-origin: top;
  transition: transform 1.3s var(--ease-in-out) var(--d, 0s);
}
html.js .img-reveal.is-visible::before { transform: scaleY(0); }
.section--cream .img-reveal::before { background: var(--cream); }

/* ---------- Metin bölme ---------- */
.word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.word__inner { display: inline-block; }
.char { display: inline-block; }
html.js [data-split] .word__inner {
  transform: translateY(115%) rotate(4deg);
  transform-origin: left bottom;
  transition: transform 1.1s var(--ease) calc(var(--i, 0) * 0.09s + var(--base, 0s));
}
html.js [data-split] .char {
  transform: translateY(115%) rotateX(-70deg);
  opacity: 0;
  transform-origin: 50% 100%;
  transition: transform 1s var(--ease) calc(var(--i, 0) * 0.055s + var(--base, 0s)), opacity 0.8s calc(var(--i, 0) * 0.055s + var(--base, 0s));
}
html.js [data-split].is-visible .word__inner { transform: none; }
html.js [data-split].is-visible .char { transform: none; opacity: 1; }

/* Hero öğeleri yükleme tamamlanana kadar bekler: JS is-visible ekler */

/* ---------- Footer açılışı ---------- */
html.js .site-footer .footer__grid > * {
  opacity: 0; translate: 0 36px;
  transition: opacity 1s var(--ease) calc(var(--i, 0) * 0.12s), translate 1.1s var(--ease) calc(var(--i, 0) * 0.12s);
}
html.js .site-footer.is-visible .footer__grid > * { opacity: 1; translate: 0 0; }
html.js .footer__mark { opacity: 0; transition: opacity 1.6s var(--ease) 0.4s, transform 1.6s var(--ease) 0.4s; transform: translateY(45%); }
html.js .site-footer.is-visible .footer__mark { opacity: 1; transform: translateY(18%); }

/* ---------- Altın çizgi vurgusu ---------- */
.gold-shimmer {
  background: linear-gradient(100deg, var(--gold) 20%, #f1e3bb 40%, var(--gold) 60%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}

/* ---------- Azaltılmış hareket ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  html.js [data-reveal], html.js [data-split] .word__inner, html.js [data-split] .char,
  html.js .site-footer .footer__grid > *, html.js .footer__mark {
    opacity: 1 !important; translate: none !important; scale: 1 !important; transform: none !important;
  }
  html.js .img-reveal::before { display: none; }
  .hero__particles { display: none; }
  .preloader { display: none; }
  .page-transition { display: none; }
}