/* Hareket: açılış koreografisi ve etkileşim tepkileri.
   Ortak ölçüler: giriş yavaşlayarak varır, çıkış girişin ~%65'i kadar sürer. prefers-reduced-motion theme.css'te hepsini kapatır. */
:root {
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --ease-stamp: cubic-bezier(.3, 1.45, .5, 1);
  --d-press: 120ms; --d-ui: 220ms; --d-page: 420ms;
}
@property --sw { syntax: "<angle>"; inherits: false; initial-value: 360deg; }

/* ——— Açılış ——— */
.intro { display: none; }
html.intro-on, html.intro-on body { overflow: hidden; }
html.intro-on .intro {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px 16px; cursor: pointer;
  background: radial-gradient(ellipse 80% 70% at 50% 42%, #3b141c 0%, var(--mar-8) 52%, var(--mar-9) 100%);
}
.intro-stage { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.intro-seal { position: relative; width: min(80vw, 50vh, 470px); aspect-ratio: 1; margin-bottom: clamp(10px, 3vh, 28px); }
.intro-seal img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

/* Zaman ibresi: kadran Ekim 1918 çizgisinden (15°) başlayıp saat yönünde açılır. */
.intro-ring {
  -webkit-mask: conic-gradient(from 15deg, #000 var(--sw), transparent 0); mask: conic-gradient(from 15deg, #000 var(--sw), transparent 0);
  animation: sweep 1.65s cubic-bezier(.45, .05, .25, 1) .15s both, ringTurn 2.2s var(--ease-out) .15s both;
}
@keyframes sweep { from { --sw: 0deg; } to { --sw: 360deg; } }
@keyframes ringTurn { from { transform: rotate(-24deg) scale(.96); } to { transform: none; } }

/* Mum mühür basılır: yukarıdan iner, zemine çarpıp hafifçe ezilir ve yerleşir. */
.intro-core { position: absolute; inset: 0; animation: coreIn .5s var(--ease-in) 1.28s both; }
.intro-core .half.r { display: none; }   /* mühür bölünmez: ikinci kopya kullanılmıyor, tek bütün görsel */
@keyframes coreIn {
  0% { opacity: 0; transform: translateY(-26px) scale(1.04); }
  60% { opacity: 1; transform: translateY(0) scale(.974); }
  80% { transform: scale(1.008); }
  to { transform: none; }
}
/* Tek bir iz halkası: basımın kâğıda bıraktığı kısa ince yankı. */
.intro-shock { position: absolute; left: 26%; top: 26%; width: 48%; height: 48%; border-radius: 50%; border: 1.5px solid var(--gold-2); opacity: 0; animation: shock .75s var(--ease-out) 1.56s; }
@keyframes shock { from { opacity: .5; transform: scale(1); } to { opacity: 0; transform: scale(1.22); } }

.intro-title { margin: 0; font: 900 clamp(2.1rem, 7.2vw, 4.4rem)/1.15 var(--font-head); letter-spacing: .06em; color: var(--gold-2); text-shadow: 0 3px 0 #6d4f13, 0 10px 30px rgba(0, 0, 0, .7); }
.intro-title span { display: inline-block; animation: rise .72s var(--ease-out) calc(1.82s + var(--i) * 45ms) both; }
@keyframes rise { from { opacity: 0; transform: translateY(.45em); filter: blur(5px); } }
.intro-sub { margin: 0 0 18px; font: italic 400 clamp(1.05rem, 2.4vw, 1.3rem) var(--font-body); color: var(--on-dark-2); animation: introFade .8s var(--ease-out) 2.38s both; }
.intro-go { animation: introUp .6s var(--ease-out) 2.6s both; }
.intro-skip { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--on-dark-2); font: italic 400 1rem var(--font-body); padding: 10px 12px; cursor: pointer; animation: introFade .6s ease .7s both; }
.intro-skip:hover { color: var(--gold-2); }
@keyframes introFade { from { opacity: 0; } }
@keyframes introUp { from { opacity: 0; transform: translateY(10px); } }

/* Mühür açılır: bütün kalır, hafifçe kalkıp parlar ve söner; kadran büyüyerek söner, perde kalkar. */
.intro.opening { cursor: default; animation: introOut .5s var(--ease-in) .55s forwards; }
.intro.opening .intro-ring { --sw: 360deg; animation: ringOut .8s var(--ease-in) forwards; }
.intro.opening .intro-core { animation: none; }
.intro.opening .half.l { animation: sealLift .9s var(--ease-in) forwards; }
.intro.opening .intro-title, .intro.opening .intro-sub, .intro.opening .intro-go, .intro.opening .intro-skip { animation: fadeOut .32s var(--ease-in) forwards; }
.intro.opening .intro-shock { animation: shock .7s var(--ease-out); }
.intro.opening.quick, .intro.opening.quick * { animation-duration: .3s !important; animation-delay: 0s !important; }
@keyframes ringOut { to { opacity: 0; transform: scale(1.22) rotate(10deg); } }
/* Mühür önce hafifçe içe basar, sonra yükselip büyüyerek altın bir parıltıyla söner. */
@keyframes sealLift { 18% { transform: scale(.97); } 55% { opacity: 1; filter: drop-shadow(0 0 22px rgba(224, 185, 90, .75)); } to { opacity: 0; transform: translateY(-6%) scale(1.14); filter: drop-shadow(0 0 40px rgba(224, 185, 90, 0)); } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }

/* Perde kalkınca ana sayfa başlığı yerine oturur. */
#hero.arrive .hero-in > * { animation: introUp .7s var(--ease-out) both; }
#hero.arrive .hero-in > :nth-child(2) { animation-delay: 70ms; }
#hero.arrive .hero-in > :nth-child(3) { animation-delay: 140ms; }
#hero.arrive .hero-in > :nth-child(n+4) { animation-delay: 210ms; }

/* ——— Ortak geçiş: kendi geçişi tanımlı olmayan bütün bağlantı ve düğmeler renk, zemin, kenarlık ve gölge
   değişimlerini aynı süre ve eğriyle yapar (sınıf kuralları daha özgül olduğundan kendi geçişlerini korur). ——— */
a, button, summary, [role="tab"] { transition: color var(--d-ui) var(--ease-out), background-color var(--d-ui) var(--ease-out), border-color var(--d-ui) var(--ease-out), box-shadow var(--d-ui) var(--ease-out), opacity var(--d-ui) var(--ease-out); }

/* ——— Dokunma tepkisi ——— */
.btn, .tbtn, .chip, .cb, .opt, .ord, .learned, .th-list button, .bs-steps button, .dbtn, .jump button, .amap-zoom button, .tab, .burger { transition: transform var(--d-press) var(--ease-out), filter .15s, background-color var(--d-ui), border-color var(--d-ui), color var(--d-ui), box-shadow var(--d-ui); }
.btn:active, .tbtn:active, .chip:active, .cb:active, .opt:not(:disabled):active, .ord:active, .learned:active, .th-list button:active, .bs-steps button:active,
.dbtn:active, .jump button:active, .amap-zoom button:active, .tab:active, .burger:active, .th-dots button:active::before { transform: scale(.965); }
.fcard:active, .feat a:active { transform: translateY(-2px) scale(.99); transition-duration: var(--d-press); }
.mnav a:hover { background: rgba(201, 162, 75, .08); }
.prose summary:hover, .srch-list li:hover { background: rgba(201, 162, 75, .1); }
/* Dokunmatik ekranda “hover” dokunduktan sonra takılı kalmasın: kalkma ve büyüme yalnız fareyle. */
@media (hover: none) {
  .btn:hover, .fcard:hover, .feat a:hover, .bcard:hover, .ucard:hover, .fcard:hover .pic img { transform: none; }
}

.ink-wrap { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.ink { position: absolute; border-radius: 50%; pointer-events: none; transform: scale(0); background: radial-gradient(circle, rgba(255, 232, 170, .5) 0%, rgba(255, 214, 130, .22) 34%, transparent 68%); animation: ink .6s var(--ease-out) forwards; }
@keyframes ink { to { transform: scale(1); opacity: 0; } }

.pop { animation: pop .42s var(--ease-stamp); }
@keyframes pop { 0% { transform: scale(.86); } 60% { transform: scale(1.1); } }

/* Sonuç bildiren tepkiler */
.opt.right { animation: okPulse .75s var(--ease-out); }
.opt.wrong { animation: shake .38s; }
@keyframes okPulse { from { box-shadow: 0 0 0 0 rgba(44, 95, 67, .55); } to { box-shadow: 0 0 0 14px rgba(44, 95, 67, 0); } }
.fcard .done { animation: stampIn .5s var(--ease-stamp) both; }
@keyframes stampIn { from { opacity: 0; transform: scale(1.8) rotate(-12deg); } }
.review .rv { animation: introUp .4s var(--ease-out) both; }
.review .rv:nth-child(2) { animation-delay: 40ms; } .review .rv:nth-child(3) { animation-delay: 80ms; } .review .rv:nth-child(4) { animation-delay: 120ms; } .review .rv:nth-child(n+5) { animation-delay: 160ms; }

/* Açılan, kapanan, değişen yüzeyler */
.page.enter { animation: pageIn var(--d-page) var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } }
.srch:not([hidden]) { animation: introFade .16s ease-out; }
.srch:not([hidden]) .srch-box { animation: popIn var(--d-ui) var(--ease-out); }
dialog[open] { animation: popIn .26s var(--ease-out); }
dialog[open]::backdrop { animation: introFade .2s ease-out; }
/* Kapanış: destekleyen tarayıcılarda pencere ve perde sönerek kapanır (desteklemeyende anında kapanır). */
dialog { transition: opacity .18s var(--ease-in), transform .18s var(--ease-in), overlay .18s allow-discrete, display .18s allow-discrete; }
dialog:not([open]) { opacity: 0; transform: translateY(-6px) scale(.98); }
dialog::backdrop { transition: opacity .18s ease-in, overlay .18s allow-discrete, display .18s allow-discrete; }
dialog:not([open])::backdrop { opacity: 0; }
@keyframes popIn { from { opacity: 0; transform: translateY(-8px) scale(.97); } }
.mnav.open { animation: popIn var(--d-ui) var(--ease-out); }
.toast.on { transition: opacity .25s, transform .3s var(--ease-stamp); }

/* Ses efektleri düğmesi */
#sfxBtn .mute { display: none; }
#sfxBtn.off { color: var(--on-dark-2); }
#sfxBtn.off .wave { display: none; }
#sfxBtn.off .mute { display: inline; }

/* Hareket azaltma tercihi: bütün canlandırma ve geçişler kapanır (tek yer). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-slides img.on { transform: none; }
}

@media (max-width: 420px) {
  .tools { gap: 5px; }
  .tbtn { width: 36px; height: 36px; }
  .burger { width: 40px; height: 40px; padding: 9px; }
  .logo { gap: 8px; }
  .logo-t { font-size: 1.02rem; }
}
@media (max-height: 560px) {
  .intro-seal { width: min(46vmin, 300px); }
  .intro-sub { margin-bottom: 10px; }
}