/* Kendine dön — hareket katmanı. Başlangıç hâlleri yalnızca animasyon içinde tanımlanır;
   hareket kapatıldığında (animation:none) her öğe son hâlinde görünür kalır. */
:root{--spring:cubic-bezier(.2,.9,.25,1.12);--ease-out:cubic-bezier(.16,1,.3,1)}

/* ---------- Ortam ---------- */
.ambient-dust{position:fixed;z-index:-1;inset:0;pointer-events:none;mix-blend-mode:screen}
.candle-light{position:fixed;z-index:-1;left:0;top:0;width:0;height:0;pointer-events:none;will-change:transform}
.candle-halo{position:absolute;left:0;top:0;width:calc(440px * var(--cs,1));height:calc(440px * var(--cs,1));translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#ffc77a3d,#ffb65a17 46%,#ffb65a00);mix-blend-mode:screen;animation:candle-halo 3.4s ease-in-out infinite}
.candle-flame{position:absolute;left:0;top:0;width:calc(24px * var(--cs,1));height:calc(62px * var(--cs,1));translate:-50% -58%;border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;background:radial-gradient(ellipse at 50% 72%,#fff7dfd9,#ffd28a70 42%,#ffb34a00 72%);mix-blend-mode:screen;transform-origin:50% 92%;animation:flame 1.9s ease-in-out infinite}
@keyframes candle-halo{0%,100%{opacity:.86;transform:scale(1)}21%{opacity:1;transform:scale(1.05)}38%{opacity:.7;transform:scale(.97)}61%{opacity:.96;transform:scale(1.02)}80%{opacity:.78;transform:scale(.99)}}
@keyframes flame{0%,100%{transform:scaleY(1) skewX(0)}18%{transform:scaleY(1.1) skewX(-2.5deg)}41%{transform:scaleY(.93) skewX(1.8deg)}67%{transform:scaleY(1.05) skewX(-1deg)}84%{transform:scaleY(.97) skewX(1deg)}}
/* Arka plan kendi katmanında; derinlik hareketi yalnızca bu katmanın transform'unu değiştirir (motion.js). */
.scene-bg{position:fixed;z-index:-2;inset:0;pointer-events:none;background:var(--night-bg) var(--night-scene) center top/cover no-repeat;will-change:transform}
.scene.has-bg::before{content:none}
.moon-mark{position:relative}
.moon-mark::after{content:"";position:absolute;inset:-1px;border-radius:50%;box-shadow:0 0 18px 2px #d8b78244;opacity:0;animation:moon-breathe 6s ease-in-out infinite}
@keyframes moon-breathe{50%{opacity:1}}

/* ---------- Başlık ve metin girişleri ---------- */
.tw{display:inline-block;animation:title-in .8s var(--ease-out) both;animation-delay:calc(var(--i) * 70ms + 40ms)}
@keyframes title-in{from{opacity:0;transform:translateY(.32em)}}
/* Kelimeler satır içi kalır, yalnızca saydamlık oynar: her kelime ayrı bir katman olmaz. */
.words .w{animation:word-in .7s ease-out both}
.words.is-instant .w{animation:none}
@keyframes word-in{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes fade{from{opacity:0}}
/* Geçişte sönen eski sahnenin kopyası, bulunduğu hâlde donar; kopyadaki animasyonlar baştan başlamaz. */
.is-ghost,.is-ghost *,.is-ghost *::before,.is-ghost *::after{animation:none!important;transition:none!important}

/* ---------- Menü çizgisi ---------- */
.site-nav{position:relative}
.site-nav .nav-active{border-bottom-color:transparent}
.nav-ink{position:absolute;left:0;bottom:0;width:100px;height:1px;background:var(--night-gold);box-shadow:0 0 10px #d8b782aa;transform-origin:0 50%;pointer-events:none;transition:transform .55s var(--spring),opacity .2s}
.nav-ink.is-instant{transition:none}

/* ---------- Adım çubuğu ---------- */
.flow-steps li:not(:last-child)::after{background:linear-gradient(90deg,var(--night-gold) 50%,var(--night-line-strong) 50%) right/200% 100%;transition:background-position .9s var(--ease-out)}
.flow-steps li.is-done::after{background-position:left}
.flow-steps .is-current .flow-mark{animation:mark-pop .7s var(--spring)}
.flow-steps .is-done .flow-mark{transition:background .4s,border-color .4s}
@keyframes mark-pop{from{transform:scale(.4);box-shadow:0 0 0 0 #f1e5d155}60%{box-shadow:0 0 0 10px #f1e5d100}}

/* ---------- Düğmeler ---------- */
.btn-main{position:relative;overflow:hidden;isolation:isolate}
.btn-main::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(100deg,#fff0 30%,#fffaf0d9 48%,#fff0 66%) -140% 0/220% 100% no-repeat;pointer-events:none}
.btn-main:hover:not(:disabled)::after{animation:sheen .9s var(--ease-out)}
.intent-cta .btn-main::after{animation:sheen 1.1s var(--ease-out) 1.4s,sheen 1.1s var(--ease-out) 7s}
@keyframes sheen{from{background-position:-140% 0}to{background-position:240% 0}}
.btn:not(:disabled){transition:transform .35s var(--spring),background var(--night-fast),border-color var(--night-fast),color var(--night-fast),box-shadow .3s}
.btn-main:hover:not(:disabled){box-shadow:0 10px 30px #0006,0 0 26px #f1e5d133}

/* ---------- 1 · Niyet kartları: desteden dağıtılır, süzülür, imleci izler ---------- */
.intent-choice{animation:deal 1s var(--spring) both;animation-delay:calc(var(--i) * 90ms + 120ms)}
.intent-art{position:relative;transform:perspective(1200px) rotate(var(--angle,0deg)) translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));animation:float 7s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s)}
.intent-choice:hover .intent-art{transform:perspective(1200px) rotate(var(--angle)) translateY(calc(var(--lift) - 10px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.intent-choice:has(input:checked) .intent-art{transform:perspective(1200px) rotate(var(--angle)) translateY(calc(var(--lift) - 8px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.intent-art.is-tilting,.intent-choice:has(.is-tilting) .intent-art{transition:transform .12s linear,filter var(--night-fast)}
.intent-art::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),#fff8e866,#fff8e800 46%);mix-blend-mode:soft-light;opacity:0;transition:opacity .35s;pointer-events:none}
.intent-art.is-tilting::after{opacity:1}
.intent-title,.intent-meta,.done-badge{animation:rise .6s var(--ease-out) both;animation-delay:calc(var(--i) * 90ms + 520ms)}
.intent-cta{animation:rise .7s var(--ease-out) .95s both}
.no-enter .intent-choice,.no-enter .intent-title,.no-enter .intent-meta,.no-enter .done-badge,.no-enter .intent-cta{animation:none}
@keyframes deal{from{opacity:0;translate:calc((2 - var(--i)) * 108%) -6%;rotate:calc(var(--angle,0deg) * -1 + (2 - var(--i)) * 2deg);scale:.92}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}
.intent-choice:has(input:checked)::after{animation:dot-in .5s var(--spring)}
@keyframes dot-in{from{transform:scale(0);opacity:0}}

/* ---------- 2 · Onay: harita ile dizilim birbirini işaret eder ---------- */
.position-list li{transition:background .3s,transform .4s var(--spring)}
.position-list li.is-hint{background:linear-gradient(90deg,#d8b7821f,#d8b78200);transform:translateX(4px)}
.position-list li.is-hint .position-index{background:var(--night-gold);color:#0b1020;transition:background .3s,color .3s}
.lay-slot .lay-card{transition:transform .45s var(--spring),filter .4s}
.layout-stage[data-mode=preview] .lay-slot.is-hint .lay-card{transform:translateY(-8px) scale(1.05);filter:drop-shadow(0 0 14px #d8b78288)}
.map-focus-body{animation:rise .45s var(--ease-out) both}

/* ---------- 3 · Soru ---------- */
.question-deck .card-back{transition:box-shadow .5s,filter .5s}
.question-step:focus-within .question-deck .card-back{filter:brightness(1.12);box-shadow:0 1px 0 #8c7757,0 3px 0 #544535,0 5px 0 #8c7757,0 7px 0 #544535,0 20px 30px #000a,0 0 40px #d8b78244}
.question-deck .card-back:nth-child(3){animation:altar-breathe 5s ease-in-out infinite}
@keyframes altar-breathe{50%{translate:0 -4px}}

/* ---------- 4 · Karıştırma ---------- */
.deck::before{content:"";position:absolute;left:50%;top:50%;width:190%;height:150%;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,#f0ce9540,#f0ce9500);opacity:0;transform:translateZ(-20px);transition:opacity .6s;pointer-events:none}
.deck.is-shuffling::before{opacity:1;animation:deck-glow 1.2s ease-in-out infinite}
@keyframes deck-glow{50%{opacity:.55}}
.shuffle-ornament{animation:fade 1s ease-out .2s both}
.shuffle-question{animation:rise .8s var(--ease-out) .15s both}
.deck{animation:deck-in .9s var(--spring) .1s both}
@keyframes deck-in{from{opacity:0;translate:0 -40px}}

/* ---------- 5 · Seçim ---------- */
.flyer .card-back{box-shadow:0 16px 30px #000b,0 0 24px #d8b78266}
.lay-slot.is-next:not(.is-filled) .lay-card{animation:slot-call 2.4s ease-in-out infinite}
@keyframes slot-call{50%{box-shadow:0 0 0 6px #d8b78212,0 0 34px #d8b78240}}

/* ---------- Kıvılcım: motion.js tek bir tuvalde çizer ---------- */
.spark-layer{position:fixed;z-index:60;inset:0;pointer-events:none}
.lay-slot.is-revealed .face-front{animation:face-glow 1.4s var(--ease-out)}
@keyframes face-glow{from{box-shadow:0 0 0 1.5px #f7dca6,0 0 40px 8px #f0ce9588,var(--night-card-shadow-flat)}}

/* ---------- 8 · Yorum: anlatılan kart öne çıkar, diğerleri geri çekilir ---------- */
.layout-stage[data-mode=reading] .lay-slot{transition:opacity .5s}
.layout-stage[data-mode=reading][data-focus] .lay-slot:not(.is-focus){opacity:.3}
.layout-stage[data-mode=reading] .lay-slot.is-focus{z-index:4}
.layout-stage[data-mode=reading] .lay-slot.is-focus .lay-card{transform:translateY(-8px) scale(1.07)}
.layout-stage[data-mode=reading] .lay-slot.is-focus .face-front{box-shadow:0 0 0 1.5px var(--night-gold),0 0 36px 6px #d8b78255,var(--night-card-shadow-flat);transition:box-shadow .5s}
.layout-stage[data-mode=reading] .lay-slot.is-focus .lay-name{color:var(--night-gold)}
.story-dot::before{transition:width .45s var(--spring),background .3s,box-shadow .3s}
.story-arrow{transition:transform .35s var(--spring),background .25s,border-color .25s,opacity .25s}
.story-arrow:active:not(:disabled){transform:scale(.92)}
.story-arrow.is-nudge{animation:nudge 2.6s ease-in-out 2.4s 2}
@keyframes nudge{0%,100%{transform:none}10%{transform:translateX(5px)}20%{transform:none}30%{transform:translateX(3px)}40%{transform:none}}

/* ---------- Kartları tanı ---------- */
.guide-card::after{transition:opacity .35s}
.guide-card .guide-art{transition:box-shadow .4s}
.guide-card.is-center .guide-art{box-shadow:0 0 0 1px var(--night-gold),0 0 44px #d8b78240,0 26px 44px #000c}
.guide-caption.is-swapping>*{animation:rise .45s var(--ease-out) both}
.guide-caption.is-swapping>*:nth-child(2){animation-delay:40ms}
.guide-caption.is-swapping>*:nth-child(3){animation-delay:80ms}

/* ---------- Okumalarım ---------- */
.history-cards img{transition:transform .45s var(--spring)}
.history-item:hover .history-cards img:first-child{transform:rotate(-11deg) translateX(-8px)}
.history-item:hover .history-cards img:nth-child(2){transform:translateY(-10px)}
.history-item:hover .history-cards img:nth-child(3){transform:rotate(10deg) translateX(8px)}
.history-go{transition:transform .35s var(--spring),color .2s}
.history-item:hover .history-go{transform:translateX(4px)}

/* ---------- Diyaloglar: açılırken yükselir, kapanırken söner ---------- */
.night-dialog{opacity:0;transform:translateY(14px) scale(.97);transition:opacity .28s,transform .45s var(--spring),overlay .3s allow-discrete,display .3s allow-discrete}
.night-dialog[open]{opacity:1;transform:none}
.night-dialog::backdrop{opacity:0;transition:opacity .3s,overlay .3s allow-discrete,display .3s allow-discrete}
.night-dialog[open]::backdrop{opacity:1}
@starting-style{.night-dialog[open]{opacity:0;transform:translateY(14px) scale(.97)}.night-dialog[open]::backdrop{opacity:0}}
.dialog-emblem{animation:emblem .9s var(--spring) .1s both}
@keyframes emblem{from{opacity:0;transform:rotate(-40deg) scale(.6)}}
.card-detail-art img{transition:transform .8s var(--spring)}
.card-meaning.is-swapping{animation:rise .45s var(--ease-out)}

/* ---------- Hareket azaltıldığında ortam katmanı tamamen kapanır ---------- */
@media(prefers-reduced-motion:reduce){html:not([data-motion=full]) .ambient-dust,html:not([data-motion=full]) .candle-light{display:none}}
html[data-motion=reduced] .ambient-dust,html[data-motion=reduced] .candle-light{display:none}