/* * Davetiye efektleri. * * Bu dosya yalnız temada en az bir efekt açıksa sayfaya bağlanır. * Sınıflar üzerine eklenir: efekt- (alt tireler tireye döner). * Katalog app/Efektler.php içindedir; oradaki her CSS/tipografi/etkileşim * efektinin karşılığı burada bir kural bloğudur. * * Hareket azaltma tercihi olan ziyaretçilerde dosyanın sonundaki blok * animasyonları durdurur. */ /* ================= Parçacık katmanı (kar, yaprak, balon…) ================= */ #efektKatman { position: fixed; inset: 0; z-index: 6000; pointer-events: none; } /* ================= Kapak görünümü ================= */ /* Video alt kenarını yumuşat */ .efekt-video-maske .kapak-video { -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%); mask-image: linear-gradient(to bottom, #000 74%, transparent 100%); } /* Vinyet: köşeler koyulaşır, bakış ortada toplanır */ .efekt-vinyet .kapak::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, .34) 100%); } /* Ken Burns: kapak görseli/videosu çok yavaş yakınlaşır */ .efekt-ken-burns .kapak-video, .efekt-ken-burns .kapak-foto { animation: efekt-kenburns 26s ease-in-out infinite alternate; transform-origin: center 40%; } @keyframes efekt-kenburns { from { transform: scale(1); } to { transform: scale(1.09); } } /* İsimlerin altında soluk yansıma */ .efekt-ayna .kapak h1 { position: relative; } .efekt-ayna .kapak h1::after { content: attr(data-yansima); position: absolute; left: 0; right: 0; top: 100%; transform: scaleY(-1); opacity: .16; filter: blur(1px); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%); pointer-events: none; } /* ================= Atmosfer ================= */ /* Ortam katmanları: her efektin kendi sabit katmanı vardır, birbirini ezmez */ .efekt-ortam { position: fixed; pointer-events: none; } /* Film greni: çok ince, hareketli doku */ .ortam-film-grain { inset: -50%; z-index: 5900; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E"); animation: efekt-gren 1.1s steps(4) infinite; } @keyframes efekt-gren { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -2%); } 100% { transform: translate(0, 0); } } /* Sis: yavaşça kayan yumuşak katman */ .ortam-sis { inset: -10% -30%; z-index: 5700; background: radial-gradient(ellipse at 20% 80%, rgba(255, 255, 255, .28), transparent 55%), radial-gradient(ellipse at 75% 65%, rgba(255, 255, 255, .22), transparent 58%); animation: efekt-sis 34s ease-in-out infinite alternate; } @keyframes efekt-sis { from { transform: translateX(-6%); } to { transform: translateX(6%); } } /* Işık huzmesi: üstten süzülen eğik şeritler */ .ortam-isik-huzmesi { inset: -20% -10%; z-index: 5750; background: linear-gradient(104deg, transparent 30%, rgba(255, 255, 255, .16) 36%, transparent 42%, transparent 56%, rgba(255, 255, 255, .10) 61%, transparent 66%); animation: efekt-huzme 12s ease-in-out infinite alternate; } @keyframes efekt-huzme { from { transform: translateX(-8%); opacity: .7; } to { transform: translateX(8%); opacity: 1; } } /* Mum ışığı: sayfa aydınlığı çok hafif titreşir */ .efekt-mum-isigi .kapak > .sar { animation: efekt-mum 5.5s ease-in-out infinite; } @keyframes efekt-mum { 0%, 100% { filter: brightness(1); } 18% { filter: brightness(1.05); } 32% { filter: brightness(.97); } 55% { filter: brightness(1.03); } 72% { filter: brightness(.99); } } /* Zemindeki renk geçişi ağır ağır yer değiştirir */ body.efekt-gradient-kayma { background-image: linear-gradient(135deg, var(--zemin) 0%, var(--zemin-alt) 45%, var(--ana-yumusak) 100%); background-size: 300% 300%; animation: efekt-gradient 28s ease infinite; } @keyframes efekt-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Bölüm aralarında yumuşak hareketli dalga çizgisi */ .efekt-dalga section ~ section::before { content: ""; display: block; height: 22px; margin: -1.4rem auto 1.4rem; max-width: 260px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'%3E%3Cpath d='M0 10 Q 25 0 50 10 T 100 10 T 150 10 T 200 10' fill='none' stroke='%23000' stroke-opacity='.28' stroke-width='1.4'/%3E%3C/svg%3E"); animation: efekt-dalga 6s ease-in-out infinite; } @keyframes efekt-dalga { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } } /* ================= Yazı animasyonları ================= */ /* Daktilo: JS harf harf yazar, imleç burada */ .efekt-daktilo .kapak h1.daktilo-aktif::after { content: ""; display: inline-block; width: 2px; height: .85em; margin-left: .08em; vertical-align: -.08em; background: currentColor; animation: efekt-imlec .8s steps(1) infinite; } @keyframes efekt-imlec { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* Harfler tek tek belirir (JS harfleri span içine alır) */ .efekt-harf-belirme .harf { display: inline-block; opacity: 0; transform: translateY(.35em); animation: efekt-harf-gel .55s ease forwards; animation-delay: calc(var(--sira) * 55ms); } @keyframes efekt-harf-gel { to { opacity: 1; transform: none; } } /* Harf dalgası: sonsuz hafif salınım */ .efekt-harf-dalga .harf { display: inline-block; animation: efekt-harf-salin 3.2s ease-in-out infinite; animation-delay: calc(var(--sira) * 90ms); } @keyframes efekt-harf-salin { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.12em); } } .harf-bosluk { display: inline-block; width: .32em; } /* İmza çizgisi soldan sağa çizilir */ .efekt-imza-ciz .kapak h1 { position: relative; } .efekt-imza-ciz .kapak h1::before { content: ""; position: absolute; left: 50%; bottom: -.28em; height: 1px; width: 0; background: var(--ana); transform: translateX(-50%); animation: efekt-imza 1.6s .6s ease forwards; } @keyframes efekt-imza { to { width: 62%; } } /* ================= Etkileşim ================= */ /* Kaydırdıkça belirme — JS görünür alana girince .gorundu ekler */ .efekt-kaydirma-belirme section:not(.kapak) { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; } .efekt-kaydirma-belirme section.gorundu { opacity: 1; transform: none; } /* Paralaks: JS kapak görseline --kaydir yazar */ .efekt-parallax .kapak-video, .efekt-parallax .kapak-foto { will-change: transform; transform: translateY(var(--kaydir, 0px)); } /* Müzik dalgası: ses düğmesinin yanında çubuklar */ .muzik-dalga { position: fixed; right: calc(1.1rem + 52px); bottom: 1.35rem; z-index: 8000; display: none; align-items: flex-end; gap: 3px; height: 18px; pointer-events: none; } .efekt-muzik-dalgasi .muzik-dalga { display: flex; } .muzik-dalga span { width: 3px; border-radius: 2px; background: var(--ana); height: 30%; opacity: .8; } .muzik-dalga.calan span { animation: efekt-dalga-cubuk .9s ease-in-out infinite; } .muzik-dalga.calan span:nth-child(2) { animation-delay: .15s; } .muzik-dalga.calan span:nth-child(3) { animation-delay: .3s; } .muzik-dalga.calan span:nth-child(4) { animation-delay: .45s; } @keyframes efekt-dalga-cubuk { 0%, 100% { height: 30%; } 50% { height: 100%; } } /* ================= Hareket azaltma ================= */ @media (prefers-reduced-motion: reduce) { #efektKatman, .efekt-ortam, .muzik-dalga { display: none; } .efekt-ken-burns .kapak-video, .efekt-ken-burns .kapak-foto, .efekt-mum-isigi .kapak > .sar, .efekt-dalga section ~ section::before, .efekt-harf-dalga .harf, body.efekt-gradient-kayma { animation: none; } .efekt-harf-belirme .harf { opacity: 1; transform: none; animation: none; } .efekt-imza-ciz .kapak h1::before { width: 62%; animation: none; } .efekt-kaydirma-belirme section:not(.kapak) { opacity: 1; transform: none; } .efekt-parallax .kapak-video, .efekt-parallax .kapak-foto { transform: none; } }