/* TCGmine kart -- animasyonlu birlestirme * * Kullanim: *
* *
*
*
* * --s kartin olcegi (1 = 560x720). Butun ic olculer ondan turetilir. * Pipleri tcg.js uretebilir; elle de yazilabilir, 6 adet yeterli. */ /* Damganin maskesi. BURADA, tek yerde tanimli: hem kartin .tcg-mark'i hem paketin .pack-mark'i bunu kullaniyor. Once .tcg-mark'ta tanimliydi ve paket kendi kuralinda geri dusme degeri kullaniyordu; teslim paketi logoyu data URI'ye cevirirken yalnizca .tcg-mark'takini degistiriyor, paket ise dosya yolunda kaliyordu. CSS maskeleri file:// uzerinden CORS'a takildigi icin paketlerde damga HIC gorunmuyordu -- sessizce, konsolda tek satir. */ :root { --logo: url("logo.png"); /* Paket sayfasi da BURADA, tek yerde: hem .tcg-pack hem cevrilen paketin yan yuzleri kullaniyor. Iki ayri yerde tanimlanirsa teslim paketi onu data URI'ye cevirirken yalnizca birini degistirir. */ --pack-sheet: url("packs/packs.png"); --pack-sheet-w: 849; /* paket sayfasinin olculeri; 20 satir x 9 sutun */ --pack-sheet-h: 3143; } .tcg { --s: 1; --chroma-o: 0.55; /* holo parlakligin siddeti; 0 = kapali */ position: relative; /* Flex kabinda kucultulmesin. Kart eni --s'ten hesaplaniyor ve flex varsayilani onu esnetiyor: kart yatay olarak siksiyor, kalinlik ve yerlesim hesaplari sessizce kayiyor. */ flex: none; width: calc(560px * var(--s)); height: calc(720px * var(--s)); overflow: hidden; /* chroma tuvalin disina tasar, orijinal render de kirpar */ isolation: isolate; /* screen blend sayfa zeminine sizmasin */ } .tcg-base { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; display: block; } /* Holografik parlaklik. Orijinal render'daki yerlesim: 35/-15, 485x735, screen @ %55.00000000000001 */ .tcg-chroma { position: absolute; left: calc(35px * var(--s)); top: calc(-15px * var(--s)); width: calc(485px * var(--s)); height: calc(735px * var(--s)); background-image: url("sprites/chroma_v1.png"); background-repeat: no-repeat; background-size: calc(17945px * var(--s)) calc(735px * var(--s)); image-rendering: pixelated; mix-blend-mode: screen; opacity: var(--chroma-o); pointer-events: none; animation: tcg-chroma 3.0833s steps(37) infinite; } @keyframes tcg-chroma { to { background-position-x: calc(-17945px * var(--s)); } } /* Yildizlar. Sprite hucresi 32px ama kartta 35px'e ciziliyor, yani yildiz seridi karta gore 1.09375x olcekli -- 5x degil. */ .tcg-stars { position: absolute; inset: 0; pointer-events: none; } .tcg-stars i { position: absolute; top: calc(80px * var(--s)); width: calc(35px * var(--s)); height: calc(35px * var(--s)); background-image: url("sprites/star.png"); background-repeat: no-repeat; background-size: calc(455px * var(--s)) calc(35px * var(--s)); background-position-x: 0; image-rendering: pixelated; opacity: 0.35; /* sonuk slot: bos da olsa altin kalir */ } /* Yanan yildiz: tam opak ve donuyor. Her slot 2 kare kaymis basliyor -- dalga etkisi bundan geliyor, orijinal render'daki gibi. */ .tcg-stars i.lit { opacity: 1; animation: tcg-star 1.0833s steps(13) infinite; } @keyframes tcg-star { to { background-position-x: calc(-455px * var(--s)); } } .tcg-stars i:nth-child(1) { left: calc(128.25px * var(--s)); animation-delay: 0.0000s; } .tcg-stars i:nth-child(2) { left: calc(149.95px * var(--s)); animation-delay: -0.1667s; } .tcg-stars i:nth-child(3) { left: calc(171.65px * var(--s)); animation-delay: -0.3333s; } .tcg-stars i:nth-child(4) { left: calc(193.35px * var(--s)); animation-delay: -0.5000s; } .tcg-stars i:nth-child(5) { left: calc(215.05px * var(--s)); animation-delay: -0.6667s; } .tcg-stars i:nth-child(6) { left: calc(236.75px * var(--s)); animation-delay: -0.8333s; } /* --- Arka yuz ---------------------------------------------------------------- * Yeni kural yok: arka yuz ayni 485x735 chroma katmanini, ayni * yerlesimle ve ayni blend ile kullaniyor. Fark yildizlarda: designer arka yuze * ne pip ne de yildiz plaketi ciziyor, o yuzden donen tek katman chroma. * *
* *
*
* * Chroma on yuzdeki kuralin aynisi: sifir yildizda kapali. Arka plan seffaf, * kartin cevresinde sayfanin kendi zemini gorunur. tcg-back'in kendi kurali * yok, isaret olsun diye yaziliyor. */ /* --- Cevrilen kart ----------------------------------------------------------- * On yuz, arka yuz ve dort yan yuz tek bir 3B kutuda. Onaylanan ayar: * 20 sn tur, kalinlik 7, iki yuzde de beklesin. * *
*
*
...
...
*
... (dort tane) *
*
* * DOM'u tcg.js icindeki makeFlip kuruyor. */ .flip { --s: 0.55; --spin: 20s; --thick: 7; --edge-zoom: 200000px; width: calc(560px * var(--s)); height: calc(720px * var(--s)); perspective: calc(1600px * var(--s)); } .flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: flip-dwell var(--spin) ease-in-out infinite; } @keyframes flip-dwell { 0%, 30% { transform: rotateY(0deg); } 50%, 80% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } /* `--s: inherit` sart: tcg.css kendi `.tcg { --s: 1 }` kuralini yaziyor. */ .flip .tcg { --s: inherit; position: absolute; left: 0; top: 0; backface-visibility: hidden; transform: translateZ(calc(var(--thick) * 0.5px * var(--s))); } .flip .tcg-back { transform: rotateY(180deg) translateZ(calc(var(--thick) * 0.5px * var(--s))); } /* Kalinlik: dort yan yuz kartin kendi kenarlarinda, rengi kartin icindeki koyu cerceve (on yuz tabaninin (90,360) pikseli). */ .flip-edge { position: absolute; background-image: var(--card-img); background-size: var(--edge-zoom) var(--edge-zoom); background-position: calc(var(--edge-zoom) * -90 / 560) calc(var(--edge-zoom) * -360 / 720); background-repeat: no-repeat; image-rendering: pixelated; } .flip-edge.left, .flip-edge.right { top: calc(52px * var(--s)); height: calc(616px * var(--s)); width: calc(var(--thick) * 1px * var(--s)); margin-left: calc(var(--thick) * -0.5px * var(--s)); transform: rotateY(90deg); } .flip-edge.left { left: calc(80px * var(--s)); } .flip-edge.right { left: calc(480px * var(--s)); } .flip-edge.top, .flip-edge.bottom { left: calc(92px * var(--s)); width: calc(376px * var(--s)); height: calc(var(--thick) * 1px * var(--s)); margin-top: calc(var(--thick) * -0.5px * var(--s)); transform: rotateX(90deg); } .flip-edge.top { top: calc(40px * var(--s)); } .flip-edge.bottom { top: calc(680px * var(--s)); } /* Yan yuzleri duz renk yapan surum. Kapak icin gerekli: kapagin PNG'si yok, iki maske uzerine CSS'ten boyaniyor, dolayisiyla kenar rengi gorselden ornekelenemiyor. */ .flip.flip-flat .flip-edge { background-image: none; background-color: var(--edge-color, #17131f); } @media (prefers-reduced-motion: reduce) { .tcg-chroma, .tcg-stars i.lit, .flip-inner, .tcg-gleam, .tcg-pack .pack-chroma, .pack-inner { animation: none; } } /* --- Reveal kapagi ----------------------------------------------------------- * Kapak yalnizca IKI sekil tasiyor: koyu zemin ve cerceveyi olusturan * parcaciklar. Ikisi de PNG degil MASKE olarak tutuluyor, renkleri CSS'ten * geliyor -- yeni bir ton denemek icin dosya uretmek gerekmiyor ve iki * maskenin toplami 3.8 KB, hazir PNG'nin ucte biri. * * REVEAL'A KADAR BAKILAN TEK YUZ BURASI. Duz iki renk kasvetli duruyordu; * derinligi uc katman veriyor: * * 1 ISIK zeminin ortasinda sicak bir hale. Kart duz bir zemin degil, * icinden aydinlanan bir yuzey gibi duruyor. * 2 METAL parcaciklar duz boya degil: ustten alta acik -> orta -> koyu * gecisli, yani isik alan yuzey gibi parliyor. * 3 PARILTI yavasca gecen egik bir isik seridi. Chroma'dan bagimsiz ve * cok daha sakin; kartin "canli" hissini o veriyor. * *
*
*
*
*
...
*
*
*/ .tcg-cover { --cover-body: url("reveal/cover_body.png"); --cover-bits: url("reveal/cover_bits.png"); --cover-rim: url("reveal/cover_rim.png"); --cover-ground: #110b1e; --cover-glow: #7127a5; /* ortadaki isik */ --cover-grain: #700aff; /* Dis kenar HER ZAMAN suslerle ayni renk. Ayri bir deger olarak durursa susler degistiginde geride kalir ve fark edilmesi zor bir uyumsuzluk birakir; buradan turedigi icin oyle bir ihtimal yok. */ --cover-rim-c: var(--cover-grain); --cover-grain-hi: #8f0dff; /* parcaciklarin isik alan yuzu */ --cover-grain-lo: #4a07a8; /* golgede kalan yuzu */ --gleam-a: 0.02; /* parilti siddeti */ --gleam-t: 7s; /* bir gecis suresi */ /* Kapak kartlardan AYRI: kartlarda chroma %55 ve orada bir nadirlik gostergesi, kapakta ise yalnizca atmosfer. Ustelik kapakta ayrica parilti katmani var; ikisi %55'te ust uste binince fazla oluyor. */ --chroma-o: 0.3; } /* Dis kenar. Kartlardaki renkli cerceveyle AYNI olcu: 5 piksel kalinlikta ve kartin cercevesiyle ayni yerde basliyor (x=80). Kartta o serit paletin 3. tonu ve dokuz tier'da da oyle; kapakta yuzun kendi susleriyle ayni renk, cunku kapagin tier'i yok. */ .tcg-cover .tcg-skin.rim { background: var(--cover-rim-c); -webkit-mask-image: var(--cover-rim); mask-image: var(--cover-rim); } .tcg-cover .tcg-skin, .tcg-cover .tcg-gleam { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; image-rendering: pixelated; } /* Zemin + ortadan yayilan isik. Isik damganin arkasina denk geliyor. */ .tcg-cover .tcg-skin.body { background: radial-gradient(ellipse 64% 44% at 50% 46%, var(--cover-glow) 0%, transparent 76%), var(--cover-ground); -webkit-mask-image: var(--cover-body); mask-image: var(--cover-body); } /* Parcaciklar metal gibi: egik bir gecisle acik yuzden koyu yuze. */ .tcg-cover .tcg-skin.bits { background: linear-gradient(146deg, var(--cover-grain-hi) 0%, var(--cover-grain) 46%, var(--cover-grain-lo) 100%); -webkit-mask-image: var(--cover-bits); mask-image: var(--cover-bits); } /* Yavas gecen isik seridi. Kart siluetinde kaliyor, disina tasmiyor. */ .tcg-cover .tcg-gleam { background: linear-gradient(102deg, transparent 40%, rgb(255 255 255 / var(--gleam-a)) 50%, transparent 60%); background-size: 300% 100%; -webkit-mask-image: var(--cover-body); mask-image: var(--cover-body); mix-blend-mode: screen; pointer-events: none; animation: cover-gleam var(--gleam-t) linear infinite; } @keyframes cover-gleam { from { background-position: 160% 0; } to { background-position: -60% 0; } } /* --- Kart paketi ------------------------------------------------------------- * Paket, uzerinden gecen gokkusagi ve damga. * * Sayfa TEK IZGARA: 9 sutun x 18 satir, hucre 87x156, ilk hucre (2,2), adim * 95x157. Onsekiz satir onsekiz PAKET TASARIMI, dokuz sutun dokuz cizilmis * RENK YOLU -- violet, ice, yellow, orange, blue, green, magenta, brown, sky. * Yani sutun bir filtre degil, palet: turuncu paket, menekseye hue-rotate * uygulanmis hali degil, turuncu boyanmis, turuncu golgeli, turuncu bantli * ayri bir cizim. 162 bitmis paket. * * Sayfa DUZ, chroma basili degil: parlaklik burada canli donuyor. Kaynak * oyunun sevk ettigi `packs.png` ile birebir ayni dosya. * * CHROMA KARTLARINKI DEGIL. Kartlar V1/V2 (97x147), paketler V3/V4 * (112x181) takiyor. * * KARE OLCEKLENMIYOR, 1:1 KONULUYOR. Chroma tuvali paketten buyuk ama * TUVALIN KENDISI olcu degil: karede gercekten cizili alan x 12..97, * y 12..167, yani 86x156 -- paket hucresi 87x156. Sanatci pakete gore * cizmis, gerisi bos pay. Ayni sey V1 icin de gecerli: cizili alani 82x130, * kartin yerel sanat alani 80x128. * * Bu yuzden kare paketin uzerine kendi olcusunde konuyor ve cizili alanin * kosesi paketin kosesine denk gelsin diye (-12,-12) kaydiriliyor. * * ONCE YANLIS YAPILIYORDU. Kaynak oyunun kodu "dort setin hicbiri ustune * cizildigi sekle oturmuyor" diyor ve kareyi yukseklige gore olcekliyor; * o not TUVALI olcmus, cizili alani degil. Yukseklige oturtunca tuval * 181'den 156'ya iniyor, cizili alan da 0.862 ile kuculuyor: sweep 156 * yerine 134 boyunda kaliyor ve paketin icine gomuluyor. Sanatcinin * hizaladigi kenarlar tutmuyor, holo paketin kenarina hic degmiyor. * * BLEND DE FARKLI: kart `screen` %55 takiyor, paket `overlay` %50. Kaynak * oyunda gerekcesi yazili ve kopyalamak bir hataymis: pack tasarimlarinin * hepsi tek soluk menekse tonunda duz alanlar, `screen` yalnizca acabildigi * ve en cok koyulari kaldirdigi icin paketi beyaza dogru itiyor, Void * serpintisini gri lekeye cevirip sweep'i kalici bir pusa dondururuyor. * `overlay` acigi aciyor, koyuyu birakiyor ve altindaki renk yoluyla * birlesiyor -- sheen turuncu paketin turuncusunun uzerinde geziyor. * *
*
*
*
*
*/ .tcg-pack { --pack-chroma-img: url("packs/chroma_v3.png"); --pack-col: 0; /* renk yolu, 0-8 */ --pack-row: 0; /* tasarim, 0-17 */ --pack-s: 1; /* olcek; 1 = 87x156 */ /* Paket holo'su TAM guclu. Kaynak oyun 0.5 kullaniyor ama orada sweep yukseklige oturtulup kuculdugu icin zaten sonuk kaliyordu; kare 1:1 konunca ayni deger fazla sonuk duruyor. Kartlarin %55'i ile karistirma: bu blend `overlay`, o `screen`. */ --pack-chroma-o: 1; --pack-chroma-n: 36; --pack-chroma-t: 2.4s; --pack-chroma-fw: 112; /* chroma karesinin tuvali */ --pack-chroma-fh: 181; --pack-chroma-px: 12; /* tuval icinde cizili alanin sol ust kosesi */ --pack-chroma-py: 12; /* Damganin ayarlari BURADA duruyor, .pack-mark'ta degil. Once orada tanimliydi ve bir alt blokta tanimlanan varsayilan, ust elemana yazilan degeri golgeliyor: makePack rengi .tcg-pack uzerine yaziyordu ama .pack-mark kendi #fff'ini dayatiyordu, damga her pakette beyaz kaliyordu. Hesaplanan deger dogru gorunuyordu, cizilen yanlisti. */ --pack-mark-w: 44; /* damganin eni, paket tuvalinde px */ --pack-mark-y: 78; /* dikey merkezi; govde y 19..136 arasi */ --pack-mark-ar: 1.1313; /* logo.png en/boy */ --pack-mark-fade: 75; --pack-ink: #fff; --pack-halo: 0 0 0; --pack-halo-a: 1; --pack-w: calc(87px * var(--pack-s)); --pack-h: calc(156px * var(--pack-s)); /* chroma karesi 1:1, cizili alanin kosesi paketin kosesine gelsin diye tuval kadar geri kaydiriliyor */ --pack-fw: calc(var(--pack-chroma-fw) * 1px * var(--pack-s)); --pack-fh: calc(var(--pack-chroma-fh) * 1px * var(--pack-s)); --pack-x0: calc(var(--pack-chroma-px) * -1px * var(--pack-s)); --pack-y0: calc(var(--pack-chroma-py) * -1px * var(--pack-s)); position: relative; width: var(--pack-w); height: var(--pack-h); flex: none; /* flex kabinda sikismasin, bkz. .tcg */ isolation: isolate; /* overlay sayfa zeminine sizmasin */ } /* Sayfadan tek hucre. Ayni degerler chroma'nin maskesi olarak da kullaniliyor: maskesiz gokkusagi, yuvarlak koseli bir seklin uzerinde duran dikdortgen olurdu. */ .tcg-pack .pack-art, .tcg-pack .pack-chroma { position: absolute; inset: 0; background-repeat: no-repeat; image-rendering: pixelated; } .tcg-pack .pack-art { background-image: var(--pack-sheet); background-size: calc(var(--pack-sheet-w) * 1px * var(--pack-s)) calc(var(--pack-sheet-h) * 1px * var(--pack-s)); background-position: calc((-2px - var(--pack-col) * 95px) * var(--pack-s)) calc((-2px - var(--pack-row) * 157px) * var(--pack-s)); } .tcg-pack .pack-chroma { background-image: var(--pack-chroma-img); background-size: calc(var(--pack-fw) * var(--pack-chroma-n)) var(--pack-fh); background-position: var(--pack-x0) var(--pack-y0); mix-blend-mode: overlay; opacity: var(--pack-chroma-o); pointer-events: none; -webkit-mask-image: var(--pack-sheet); mask-image: var(--pack-sheet); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: calc(var(--pack-sheet-w) * 1px * var(--pack-s)) calc(var(--pack-sheet-h) * 1px * var(--pack-s)); mask-size: calc(var(--pack-sheet-w) * 1px * var(--pack-s)) calc(var(--pack-sheet-h) * 1px * var(--pack-s)); -webkit-mask-position: calc((-2px - var(--pack-col) * 95px) * var(--pack-s)) calc((-2px - var(--pack-row) * 157px) * var(--pack-s)); mask-position: calc((-2px - var(--pack-col) * 95px) * var(--pack-s)) calc((-2px - var(--pack-row) * 157px) * var(--pack-s)); animation: pack-chroma var(--pack-chroma-t) steps(var(--pack-chroma-n)) infinite; } @keyframes pack-chroma { from { background-position-x: var(--pack-x0); } to { background-position-x: calc(var(--pack-x0) - var(--pack-fw) * var(--pack-chroma-n)); } } /* Damga. Kartlardaki .tcg-mark ile ayni maskeyi kullaniyor ama olculeri paketin kendi tuvalinde (87x156), kartin 560x720'sinde degil. */ .tcg-pack .pack-mark { position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 0 calc(1px * var(--pack-s)) rgb(var(--pack-halo) / var(--pack-halo-a))); } .tcg-pack .pack-mark i { position: absolute; display: block; width: calc(var(--pack-mark-w) * 1px * var(--pack-s)); height: calc(var(--pack-mark-w) * 1px * var(--pack-s) / var(--pack-mark-ar)); left: calc((87px - var(--pack-mark-w) * 1px) / 2 * var(--pack-s)); top: calc((var(--pack-mark-y) * 1px - var(--pack-mark-w) * 0.5px / var(--pack-mark-ar)) * var(--pack-s)); background: radial-gradient(ellipse 72% 78% at 50% 50%, var(--pack-ink) calc(var(--pack-mark-fade) * 1%), transparent 100%); -webkit-mask-image: var(--logo); mask-image: var(--logo); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* --- Cevrilen paket ---------------------------------------------------------- * Kalinlik, KENAR SERIDIYLE degil KATMANLA veriliyor: on yuzun tipatip ayni * sekli, aralara dizilmis ince dilimler halinde tekrarlaniyor. * * Neden boyle: paketin dis hatti duz bir dikdortgen degil, muhurlu uclari * govdeden iki piksel genis. Kartta oldugu gibi dort duz kenar seridi * kullanmak bu yuzden ise yaramiyordu -- serit ya govdeye ya uca oturuyor, * otekinde acik kaliyordu. Dilimlerin her biri paketin KENDI siluetini * tasidigi icin boyle bir sorun olusamiyor; kapali bir govde cikiyor. * * Dilim sayisi kalinliktan ve olcekten turetiliyor: derinlikte piksel basina * yaklasik bir dilim. Az olursa acili bakista dilimlerin arasi taranir. * * IKI KIP: * * `.tek` -- sayfada tek bir paket yuzu var. On yuz kalinlastirilmis, donen * sey o kalinligin kendisi; en arkadaki dilim arka yuzun yerine geciyor. * Uydurulmus bir arka yuz yok, dolayisiyla iki yuzu hizalama derdi de yok. * Arkada chroma yok: paketin yalin gereci gorunuyor. * * `.cift` -- eski hal. En arkada ayni paketin damgasiz bir kopyasi durur, * chroma orada da doner. Arkada parlaklik isteniyorsa tek yol bu; chroma * `overlay` ile calisiyor ve altinda boyali bir yuz olmadan cizilemiyor. */ .pack-flip { --pack-s: 3; --spin: 20s; --pack-thick: 6; /* kalinlik, paket pikseli */ /* Chroma ayarlari burada da duruyor: yan duvarlar .tcg-pack'in ICINDE degil, dolayisiyla oradan miras alamiyorlar. */ --pack-chroma-o: 1; --pack-chroma-n: 36; --pack-chroma-t: 2.4s; width: calc(87px * var(--pack-s)); height: calc(156px * var(--pack-s)); perspective: calc(700px * var(--pack-s)); } .pack-flip .pack-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: flip-dwell var(--spin) ease-in-out infinite; } /* Arka yuz X ekseninde geri aynalaniyor. * * `rotateY(180deg)` yuzu cevirirken sanati dunya koordinatinda da ayniliyor. * Paketin sanati hucre icinde simetrik degil -- solda 1, sagda 2 piksel * bosluk var -- bu yuzden arka yuz one gore iki piksel kayiyordu. `scaleX(-1)` * bunu geri aliyor; iki yuz birebir cakisinca desenler de karsilikli geliyor. */ .pack-flip .tcg-pack.arka > * { transform: scaleX(-1); transform-origin: center; } /* `--pack-s: inherit` sart: .tcg-pack kendi `--pack-s: 1` kuralini yaziyor ve o kural buradaki olcegi golgeler. Kartin .flip'inde de ayni durum var. */ .pack-flip .tcg-pack { --pack-s: inherit; position: absolute; left: 0; top: 0; backface-visibility: hidden; transform: translateZ(calc(var(--pack-thick) * 0.5px * var(--pack-s))); } .pack-flip .tcg-pack.arka { transform: rotateY(180deg) translateZ(calc(var(--pack-thick) * 0.5px * var(--pack-s))); } /* Ara dilim: yalnizca paketin gorseli, chroma ve damga yok. Iki yuzun arasinda kaldigi icin duz bakista gorunmuyor; acili bakista govdeyi dolduruyor. Hafif koyu, cunku yandan gorunen yuzey isiktan kaciyor. */ .pack-flip .pack-dilim { position: absolute; inset: 0; background-image: var(--pack-sheet); background-repeat: no-repeat; image-rendering: pixelated; } /* Arkadan gorunen dilimlerin chroma'si. * * Tek yuz kipinde arka yuz, en arkadaki dilimin ta kendisi. Chroma yalnizca * on yuzde olunca paket arkasi donerken sonuyordu; oysa kural bu projede * bastan beri ayni: gokkusagi PAKETIN, bir yuzunun degil. Bu yuzden arkadan * gorunebilen dilimlere -- en arkadaki ile iki uc levhasinin arka yuzune -- * chroma ekleniyor. Hepsine degil: bir dilim ancak arka yuzey olabiliyorsa * chroma tasiyor, aksi halde yuzlerce animasyonlu katman olurdu. * * Maske sart: dilimin boyasi yalnizca paketin siluetinde opak, chroma ise * tuvalin tamamini kapliyor. Maskesiz gokkusagi siluetin disina tasar. */ .pack-flip .pack-dilim.holo { isolation: isolate; } .pack-flip .pack-dilim.holo > i { position: absolute; inset: 0; display: block; background-image: var(--pack-chroma-img); background-repeat: no-repeat; background-size: calc(var(--pack-fw) * var(--pack-chroma-n)) var(--pack-fh); background-position: var(--pack-x0) var(--pack-y0); image-rendering: pixelated; mix-blend-mode: overlay; opacity: var(--pack-chroma-o); pointer-events: none; -webkit-mask-image: var(--pack-sheet); mask-image: var(--pack-sheet); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; animation: pack-chroma var(--pack-chroma-t) steps(var(--pack-chroma-n)) infinite; } /* Yan duvar: paketin sol/sag yan yuzeyi. Yuzlere DIK duran tek bir duzlem, derinlik boyunca uzuyor. Ekrandaki eni |sin(aci)| ile gidiyor, yani yuzlerin |cos(aci)|'ini tam tamamliyor: duz bakista sifir enli, tam yandan bakista bandin tamami. Dilim yigini o acida sifir alanli kaldigi ve tarayici bir kismini eledigi icin bandin ortasinda acilan delik buradan kapaniyor -- gerekcesi makePackFlip icinde yazili. Boyasi kaynaktan tek sutun, duvarin eni kadar gerdirilmis; kagidin kesigi zaten satir satir duz renk. Kirpmasi profil polygonu, o da JS'ten. */ .pack-flip .pack-duvar { position: absolute; left: 0; background-image: var(--pack-sheet); background-repeat: no-repeat; image-rendering: pixelated; isolation: isolate; /* overlay yalnizca kendi boyasiyla karissin */ } /* Duvarin chroma'si. * * Gerekli, cunku yuz chroma aliyor duvar almiyordu ve ikisi yan yana * geldiginde renk tutmuyordu: chroma suprulurken aradaki fark salindigi * icin yan profil PARLIYOR gibi duruyordu. Olculdu -- chroma kapaliyken yuz * ile duvar birebir ayni renk, acikken ayriliyorlar. En cok muhurlu ucta * belli oluyor, cunku orasi koyu. * * Duvarin boyasi kaynaktan tek sutun/tek satir gerdirilmis hali; chroma da * ayni gerdirmeyi kullaniyor, o yuzden olculer JS'ten geliyor. Kirpma * gerekmiyor: clip-path cocuklari da kirpiyor. Kartlarda ve kapakta oldugu * gibi burada da kural ayni -- gokkusagi PAKETIN, bir yuzunun degil. */ .pack-flip .pack-duvar > i { position: absolute; inset: 0; display: block; background-image: var(--pack-chroma-img); background-repeat: no-repeat; background-size: calc(var(--pack-fw) * var(--pack-chroma-n)) var(--pack-fh); background-position: var(--pack-x0) var(--pack-y0); image-rendering: pixelated; mix-blend-mode: overlay; opacity: var(--pack-chroma-o); pointer-events: none; animation: pack-chroma var(--pack-chroma-t) steps(var(--pack-chroma-n)) infinite; } /* Duvar YALNIZCA donusun kendisinde gerekli. Duz ve tam arka bakista sifir enli kaliyor ve o hal kararsiz: tarayici kimi karede birer pikselik bir serit ciziyor, kimi karede cizmiyor. Arka yuzde beklerken TITREME olarak goruluyordu -- olculdu, duvarlar gizlendiginde oynayan piksel sifira duşuyor, dilimler tek basina hic oynatmiyor. Bu yuzden duraklamalarda kapatiliyorlar. Keyframe'ler flip-dwell ile ayni sureyi ve ayni bolumleri kullaniyor -- 0-30% on yuzde, 50-80% arka yuzde durulur -- ve iki animasyon ayni anda basladigi icin senkron kaliyor. `step-end`: gecis yok, anahtar gibi. Kapandiklari anlarda paket zaten duz ya da tam arka bakista, duvarin gorunur bir katkisi yok. flip-dwell degistirilirse burasi da degismeli. */ .pack-flip .pack-duvar { animation: pack-duvar-gorun var(--spin) step-end infinite; } @keyframes pack-duvar-gorun { 0%, 30% { opacity: 0; } /* on yuzde duraklama */ 31%, 48% { opacity: 1; } /* one dogru donus */ 49%, 80% { opacity: 0; } /* arka yuzde duraklama */ 81%, 98% { opacity: 1; } /* geri donus */ 99% { opacity: 0; } } /* Sabitlenmis paket donmuyor, duvar her zaman gorunur. */ .pack-flip.sabit .pack-duvar { animation: none; opacity: 1; } /* Donmeyi durdurup istenen aciya sabitler; sayfadaki "yandan" secenegi bunu kullaniyor. Duraklatmak yetmez, animasyon kendi karesini yazmaya devam eder ve inline transform'u ezer. */ .pack-flip.sabit .pack-inner { animation: none; transform: rotateY(var(--pack-aci, 0deg)); } /* --- Damga (TCG MINERS) ------------------------------------------------------ * Kartin ortasina oturan marka isareti. Logo TEK dosya ve beyaz; renk * CSS'ten geliyor, cunku PNG maske olarak kullaniliyor -- yalnizca alfa * kanali okunuyor, govdesinin rengi hic ise karismiyor. Bu yuzden 9 tier * icin 9 ayri logo dosyasi yok, hepsi ayni `logo.png`. * * Iki renk de kartin KENDI paletinden turetildi: govde en koyu rengin 0.55 * kati (karttaki hicbir pikselden koyu, o yuzden zeminle asla ayni renge * dusmuyor), hale ise en acik ton yani alttaki ambleminki. Acik zeminde * govde ayiriyor, koyu zeminde hale. * * Damganin altinda cok ince bir golge var. Kontur DEGIL -- hedef gorselden * olculdu: kalinligi 2px (kartin bir sanat pikselinin yarisindan az) ve * zemini yalnizca bir tik koyultuyor. Gorevi harfleri kartin acik * bolgelerinden ayirmak; govde ile zemin ayni tona dustugunde damga onsuz * eriyor. Kapatmak icin --mark-shadow: 0. * *
*/ .tcg-mark { --mark-w: 190; /* damganin kart tuvalindeki genisligi, px */ --mark-ar: 1.1313; /* logo.png en/boy orani -- 560x495 */ --tint: #fff; --mark-shadow: 2; /* hale yaricapi, kart tuvalindeki px */ --mark-shadow-a: 1; --halo: 0 0 0; /* rgb ucusu; alfa ile birlestirilebilsin diye hex degil */ --mark-fade: 75; /* govdenin tam opak kaldigi yaricap, %. 100 = silme yok */ --mark-y: 360; /* damganin dikey merkezi, kart tuvalinde. 360 = orta */ position: absolute; inset: 0; pointer-events: none; filter: drop-shadow(0 0 calc(var(--mark-shadow) * 1px * var(--s)) rgb(var(--halo) / var(--mark-shadow-a))); } .tcg-mark i { position: absolute; display: block; width: calc(var(--mark-w) * 1px * var(--s)); height: calc(var(--mark-w) * 1px * var(--s) / var(--mark-ar)); left: calc((280px - var(--mark-w) * 0.5px) * var(--s)); top: calc((var(--mark-y) * 1px - var(--mark-w) * 0.5px / var(--mark-ar)) * var(--s)); /* Govde duz renk degil, merkezden disa acilan bir gradyan: lockup'in ucları -- cizgilerin uclari ve dis baklavalar -- sonumleniyor, ortadaki kelime tam guclu kaliyor. Damga boylece karta yapistirilmis gibi degil, zeminden cikiyormus gibi duruyor. --mark-fade: 100 ile tamamen kapanir. */ background: radial-gradient(ellipse 72% 78% at 50% 50%, var(--tint) calc(var(--mark-fade) * 1%), transparent 100%); -webkit-mask-image: var(--logo); mask-image: var(--logo); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* --- Paket acilmasi ----------------------------------------------------------- * Kaynagin elle cizdigi sekiz kare, serit halinde. Taklit yok: serit kalkiyor, * donuyor, sola ucup gidiyor, paket acik kaliyor. * * KARE PAKETTEN GENIS. Kare 168x191, paket sag yaride (x 84..167) ve alta * yaslanmis; sol yari bos, cunku kapak oraya uciyor. Dis kutu paketin kendi * olcusunde tutulup kare katmani 84 piksel sola kaydiriliyor -- paket kutuya * oturur, ucan serit disari tasar. `overflow` bu yuzden acik kalmali. * * Katman sirasi cizimin kendi sirasi: arka parca, kart, animasyonlu on. */ .pack-ac { --ac-s: 3; /* olcek */ --ac-t: 0.72s; /* yirtilma suresi, sekiz kare */ --ac-kart-t: 1.6s; /* kartin paketten cikma suresi */ --ac-kart-yol: 116; /* kartin yukari suzulme mesafesi, paket pikseli */ --ac-agiz: 50; /* acik paketin ust kenari, kare icinde y */ --ac-pay: 220; /* kirpicinin YUKARI payi, paket pikseli */ --ac-on-yol: 110; /* one gelince duracagi yer (kart yolunun yerine) */ --ac-yakin: 1.35; /* one gelirken buyume */ --ac-ileri-t: 0.9s; /* one gelme suresi */ --ac-sonme-t: 1s; /* paketin sonme suresi */ --ac-sonme-gec: 0.3s; /* sonme, kart yola ciktiktan sonra bassin */ --ac-damga-w: 44; /* damganin eni, paket pikseli */ --ac-damga-y: 114; /* damganin dikey merkezi, kare icinde */ --ac-damga-ar: 1.1313; /* logo.png en/boy */ /* Chroma ayarlari: bu kutu .tcg-pack degil, miras alamiyor. */ --pack-chroma-o: 1; --pack-chroma-n: 36; --pack-chroma-t: 2.4s; isolation: isolate; /* overlay sayfa zeminine sizmasin */ --ac-kare-w: 168; --ac-kare-h: 191; --ac-pack-w: 84; position: relative; width: calc(var(--ac-pack-w) * 1px * var(--ac-s)); height: calc(var(--ac-kare-h) * 1px * var(--ac-s)); flex: none; } .pack-ac-arka, .pack-ac-kare { position: absolute; top: 0; /* kare, paketi kutuya oturtacak kadar sola */ left: calc(var(--ac-pack-w) * -1px * var(--ac-s)); width: calc(var(--ac-kare-w) * 1px * var(--ac-s)); height: calc(var(--ac-kare-h) * 1px * var(--ac-s)); background-repeat: no-repeat; image-rendering: pixelated; background-size: calc(var(--ac-kare-w) * 1px * var(--ac-s)) calc(var(--ac-kare-h) * 1px * var(--ac-s)); /* Tiklamayi gecirirler. Kare katmani kartin ustunde duruyor ve pointer olaylarini yakalarsa karta hic tiklanamiyor -- kart cikmis olsa bile tiklama pakete gidiyor ve hicbir sey olmuyordu. */ pointer-events: none; } /* Serit sekiz kare yan yana; ilk karede duruyor. */ .pack-ac-kare { background-image: var(--ac-serit); background-size: calc(var(--ac-kare-w) * 8px * var(--ac-s)) calc(var(--ac-kare-h) * 1px * var(--ac-s)); background-position: 0 0; } /* Animasyon bittiginde SON KARE duruyor, ama bu `forwards` ile YAPILMAZ. `steps(8)` animasyon boyunca sekiz duragi geziyor: 0, -1, ... -7 kare. Ama `forwards` bitisi `to` degerine sabitliyor ve o deger -8 kare, yani seridin BIR KARE OTESI: paket tamamen kayboluyor ve arkasindaki ic parca ortaya cikiyordu -- acilma bitince paket duz turuncu bir dikdortgene donusuyordu. Dogrusu: taban degeri son kareye yazip `forwards`i hic kullanmamak. Animasyon bitince deger tabana duşuyor, o da zaten sekizinci kare. */ .pack-ac.acik .pack-ac-kare { background-position-x: calc(var(--ac-kare-w) * -7px * var(--ac-s)); animation: pack-ac-yirt var(--ac-t) steps(8) 1; } @keyframes pack-ac-yirt { from { background-position-x: 0; } to { background-position-x: calc(var(--ac-kare-w) * -8px * var(--ac-s)); } } /* Kartin yuvasi: paketin agzinda, iceride bekliyor. Cikinca yukari suzuluyor. Kirpma yok -- kart paketin onunde degil, ARKASINDA duruyor ve paketin on yuzu onu kendiliginden gizliyor. */ /* Damga. Duz paketteki .pack-mark ile ayni maske, ama olculeri KARE koordinatinda: sanatin alt kenari her karede 190, damganin merkezi de sanatin dibinden 76 piksel yukarida -- yani 114. Yirtilan serit govdeyi oynatmadigi icin damga kareler boyunca yerinde duruyor. */ .pack-ac-damga { position: absolute; left: calc((var(--ac-pack-w) - var(--ac-damga-w)) / 2 * 1px * var(--ac-s)); top: calc((var(--ac-damga-y) - var(--ac-damga-w) * 0.5 / var(--ac-damga-ar)) * 1px * var(--ac-s)); width: calc(var(--ac-damga-w) * 1px * var(--ac-s)); height: calc(var(--ac-damga-w) / var(--ac-damga-ar) * 1px * var(--ac-s)); pointer-events: none; filter: drop-shadow(0 0 calc(1px * var(--ac-s)) rgb(var(--pack-halo) / var(--pack-halo-a, 1))); } .pack-ac-damga > i { position: absolute; inset: 0; display: block; background: radial-gradient(ellipse 72% 78% at 50% 50%, var(--pack-ink) calc(var(--pack-mark-fade, 75) * 1%), transparent 100%); -webkit-mask-image: var(--logo); mask-image: var(--logo); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Holo. Maskesi SERIDIN KENDISI ve serit gibi adim adim ilerliyor, o yuzden parlaklik her karede paketin o andaki siluetine kirpiliyor ve ucan seridin uzerinde de donuyor. Sabit bir maske, yirtildiktan sonra ustte bos bir seride parlaklik birakirdi. Chroma karesinin cizili alani (12, 12) noktasindan basliyor ve paketin sol ust kosesi kare icinde (84, 37); ikisini ust uste getiren kayma 72 ve 25. Kapali karenin kosesine sabit, cunku parlaklik PAKETIN -- yirtilan seridin degil, ve serit gidince govde yerinde kaliyor. */ .pack-ac-holo { position: absolute; top: 0; left: calc(var(--ac-pack-w) * -1px * var(--ac-s)); width: calc(var(--ac-kare-w) * 1px * var(--ac-s)); height: calc(var(--ac-kare-h) * 1px * var(--ac-s)); --pack-fw: calc(112px * var(--ac-s)); --pack-fh: calc(181px * var(--ac-s)); --pack-x0: calc(72px * var(--ac-s)); --pack-y0: calc(25px * var(--ac-s)); background-image: var(--pack-chroma-img); background-repeat: no-repeat; background-size: calc(var(--pack-fw) * var(--pack-chroma-n)) var(--pack-fh); background-position: var(--pack-x0) var(--pack-y0); image-rendering: pixelated; mix-blend-mode: overlay; opacity: var(--pack-chroma-o); pointer-events: none; -webkit-mask-image: var(--ac-serit); mask-image: var(--ac-serit); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: calc(var(--ac-kare-w) * 8px * var(--ac-s)) calc(var(--ac-kare-h) * 1px * var(--ac-s)); mask-size: calc(var(--ac-kare-w) * 8px * var(--ac-s)) calc(var(--ac-kare-h) * 1px * var(--ac-s)); -webkit-mask-position: 0 0; mask-position: 0 0; animation: pack-chroma var(--pack-chroma-t) steps(var(--pack-chroma-n)) infinite; } .pack-ac.acik .pack-ac-holo { -webkit-mask-position-x: calc(var(--ac-kare-w) * -7px * var(--ac-s)); mask-position-x: calc(var(--ac-kare-w) * -7px * var(--ac-s)); animation: pack-chroma var(--pack-chroma-t) steps(var(--pack-chroma-n)) infinite, pack-ac-maske var(--ac-t) steps(8) 1; } @keyframes pack-ac-maske { from { -webkit-mask-position-x: 0; mask-position-x: 0; } to { -webkit-mask-position-x: calc(var(--ac-kare-w) * -8px * var(--ac-s)); mask-position-x: calc(var(--ac-kare-w) * -8px * var(--ac-s)); } } /* Kirpici sarmal. Uc paket eni genisliginde, paket ortada; agzin ALTINDA kalan her sey paketin enine kirpiliyor, agzin ustu serbest. Gerekli, cunku kart paketten genis olabiliyor. Oyle oldugunda kart daha tiklanmadan, kapali paketin iki yaninda kenarlariyla gorunuyordu. Kirpma SABIT ve sarmalda; kart hareket ederken kirpma yerinde duruyor, yani kart yukari suzuldukce kendiliginden ortaya cikiyor. */ .pack-ac-kirp { position: absolute; /* Tiklamayi GECIRIR. Bu kutu, kart yukari cikabilsin diye paketin 220 birim ustune kadar uzaniyor; arka plani olmasa da fare olaylarini yakaliyor ve sayfanin ust kismini -- gezinme menusunu -- tiklanamaz yapiyordu. Kartin kendi yuvasi asagida yeniden aciyor. */ pointer-events: none; /* Kutu YUKARI dogru uzatiliyor. clip-path kendi kutusunun disini da kesiyor; kutu paket boyundayken yukari suzulen kart sarmalin ust kenarinda kesiliyor ve kartin yalnizca alt seridi gorunuyordu. */ top: calc(var(--ac-pay) * -1px * var(--ac-s)); left: calc(var(--ac-pack-w) * -1px * var(--ac-s)); width: calc(var(--ac-pack-w) * 3px * var(--ac-s)); height: calc((var(--ac-pay) + var(--ac-kare-h)) * 1px * var(--ac-s)); /* Agzin ustu serbest, alti paketin enine kirpik. Y degerleri piksel: yuzde verilirse pay degisince agiz kayardi. */ clip-path: polygon( 0 0, 100% 0, 100% calc((var(--ac-pay) + var(--ac-agiz)) * 1px * var(--ac-s)), 66.6667% calc((var(--ac-pay) + var(--ac-agiz)) * 1px * var(--ac-s)), 66.6667% 100%, 33.3333% 100%, 33.3333% calc((var(--ac-pay) + var(--ac-agiz)) * 1px * var(--ac-s)), 0 calc((var(--ac-pay) + var(--ac-agiz)) * 1px * var(--ac-s))); } .pack-ac-yuva { position: absolute; /* Kart PAKETIN ICINDEYKEN tiklamayi yakalamamali. Yakalarsa paketin ortasina tiklamak karta gidiyor ve paket hic acilmiyor -- kart buyudukce paketin ortasini tamamen ortuyor. Cikinca geri aciliyor. */ pointer-events: none; left: 50%; /* Sarmalin alt kenari paketin alt kenariyla ayni, o yuzden bu deger hala paketin dibine gore. */ bottom: calc(6px * var(--ac-s)); transform: translate(-50%, 0); /* Yayvan egri. Once cubic-bezier(.22,.8,.3,1) vardi: yolun ucte ikisi ilk dortte birinde bitiyor, geri kalani suruniyordu -- sureyi uzatmak yetmiyor, hareket yine hizli basliyor. */ transition: transform var(--ac-kart-t) cubic-bezier(.45, .1, .3, 1); } .pack-ac.kart-cikti .pack-ac-yuva { pointer-events: auto; transform: translate(-50%, calc(var(--ac-kart-yol) * -1px * var(--ac-s))); } /* KART ONE GELIYOR. Pakete gore one geciyor, ekrana dogru buyuyor; paket de arkasinda golgede kalip yavas yavas soniyor. Kirpma burada KALKIYOR: kirpici kartin paketten genis kismini agzin altinda kesiyordu, ama kart artik paketin onunde, kesilecek bir sey yok. Kalsaydi kart one geldikce alt kosesinden kirpilirdi. */ .pack-ac.one .pack-ac-kirp { z-index: 5; clip-path: none; } .pack-ac.one .pack-ac-yuva { /* Yol EKLENMIYOR, degistiriliyor. Eklenince kart yukari firliyordu: cikma yolu (150) ustune bir 210 daha binince sayfanin disina tasiyordu. Burada istenen yukari gitmek degil, EKRANA YAKLASMAK -- yani buyumek. Kart bu yuzden biraz asagi geliyor ve olcegi artiyor. */ transform: translate(-50%, calc(var(--ac-on-yol) * -1px * var(--ac-s))) scale(var(--ac-yakin)); transition: transform var(--ac-ileri-t) cubic-bezier(.3, .7, .2, 1); } /* Paket once golgeye duşuyor, sonra soniyor -- kart yola ciktiktan sonra bassin diye sonmenin gecikmesi var. */ .pack-ac.one .pack-ac-arka, .pack-ac.one .pack-ac-kare, .pack-ac.one .pack-ac-damga, .pack-ac.one .pack-ac-holo { opacity: 0; filter: brightness(.5); transition: opacity var(--ac-sonme-t) ease var(--ac-sonme-gec), filter .35s ease; } /* --- Reveal karti ------------------------------------------------------------ * Paketten cikan kart. Uc yuz gibi davraniyor ama iki yuzu var: * * on : gercek kart + UZERINDE mor kapak * arka : kehribar kapak * * Bir tam tur atarken gorulen sey mor -> kehribar -> mor, yani hangi kart * oldugu hala belli degil. Sonunda mor kapak eriyor ve altindaki gercek kart * ortaya cikiyor -- cevirme degil, BURUNME. Kart hic donmedigi icin donusun * bitisiyle acilis birbirine karismiyor. */ .reveal { --s: 0.5; --rv-tur: 2.4s; /* bir tam tur */ --rv-eri: 1s; /* kapagin erime suresi */ /* Isigin iki tonu: kapagin iki yuzunun kendi renkleri. Sayfa yaziyor. */ --rv-mor: 112 10 255; --rv-sari: 255 215 122; position: relative; width: calc(560px * var(--s)); height: calc(720px * var(--s)); perspective: calc(1600px * var(--s)); } .reveal-inner { position: relative; z-index: 1; /* isik arkada kalsin */ width: 100%; height: 100%; transform-style: preserve-3d; /* Yayvan egri. Onceki .35,0,.25,1 turun yarisini ilk ceyrekte bitiriyordu; sureyi uzatmak tek basina yavas hissettirmiyor. */ transition: transform var(--rv-tur) cubic-bezier(.45, .05, .25, 1); } /* YARIM tur: morda baslar, SARIDA durur. Tam tur atsaydi yine morda biterdi ve acilacak yuz gorunmeyen yuz olurdu. */ .reveal.donuyor .reveal-inner { transform: rotateY(180deg); } .reveal-yuz { position: absolute; inset: 0; backface-visibility: hidden; } .reveal-yuz.arka { transform: rotateY(180deg); } /* `--s: inherit` sart: tcg.css kendi `.tcg { --s: 1 }` kuralini yaziyor. */ .reveal-yuz > .tcg { --s: inherit; position: absolute; left: 0; top: 0; } /* --- Isik: kart one gelirken arkasindan aciliyor --------------------------- * * Ilk hali "duvar kagidi gunes patlamasi" gibi duruyordu: esit arali isinlar * kareyi kose kose dolduruyor, hicbir yerde karanlik kalmiyordu. Isik her * yerdeyse hicbir yerde degil -- drama karsitlikla oluyor. * * Bu yuzden kurallar sunlar: * * 1. Isigin DISA DOGRU KESIN BIR SONU var. Butun katmanlar ortak bir radyal * maskeden geciyor, kenarlar karanlikta kaliyor. * 2. Isinlar DUZENSIZ. Iki konik gradyan var ve donemleri 9 ile 13 derece, * yani aralarinda asal: desen ancak 117 derecede tekrar ediyor. Tek * gradyanla disli carka benziyordu. * 3. Isik KARTIN ETRAFINDA topluyor. Hale daraltildi; kartin siluetini * saran bir kabarma gibi duruyor, arka planlik bir aydinlik degil. * 4. Havada TOZ var. Iki katman, farkli hizda suzulen ve sonup yanan * noktalar. Sabit bir isik olu duruyor; hareket eden kucuk seyler * ortami canli yapiyor. * 5. Isinlar opakligi dusuk, agirligi SIS tasiyor. Cizgiler ortami degil * deseni one cikariyor. */ .reveal-isik { position: absolute; inset: -85%; z-index: 0; pointer-events: none; opacity: 0; transform: scale(.5); transition: opacity 1s ease, transform 1.3s cubic-bezier(.2, .7, .3, 1); mix-blend-mode: screen; /* Ortak sonlanma. Butun katmanlar bunun icinde yasiyor. */ -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 18%, rgb(0 0 0 / .6) 40%, transparent 66%); mask-image: radial-gradient(circle at 50% 50%, #000 18%, rgb(0 0 0 / .6) 40%, transparent 66%); } .reveal.parla .reveal-isik { opacity: 1; transform: scale(1); } .reveal-isik > * { position: absolute; inset: 0; } /* Kalin, notr huzmeler: en arkadaki taban. Ters yonde ve en bulanik olan. Ayni yonde donselerdi ustteki ince isinlarla kilitlenip tek bir cark gibi gorunurlerdi. */ .isik-huzme { background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(255 255 255 / .1) 0deg 10deg, transparent 10deg 34deg); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 16%, #000 38%, transparent 70%); mask-image: radial-gradient(circle at 50% 50%, transparent 16%, #000 38%, transparent 70%); filter: blur(calc(9px * var(--s))); animation: reveal-isin-ters 52s linear infinite; } .isik-kat { transition: opacity var(--rv-tur) ease; } .isik-kat.mor { --rv-ton: var(--rv-mor); opacity: 1; } .isik-kat.sari { --rv-ton: var(--rv-sari); opacity: 0; } .reveal.donuyor .isik-kat.mor { opacity: 0; } .reveal.donuyor .isik-kat.sari { opacity: 1; } .isik-kat::before, .isik-kat::after { content: ""; position: absolute; inset: 0; } /* Hale: kartin siluetini saran kabarma. Genis ve solgun degil, DAR ve kuvvetli -- isik kartin arkasindan geliyor, ortami aydinlatmiyor. */ .isik-kat::before { background: radial-gradient(circle at 50% 50%, rgb(var(--rv-ton) / .55) 0%, rgb(var(--rv-ton) / .28) 14%, rgb(var(--rv-ton) / .07) 26%, transparent 40%); animation: reveal-hale 5.5s ease-in-out infinite; } /* Cizgi isinlar. Gercek bir dugum, ::after degil: sis onlarin ONUNE gelmeli ve ::after her zaman icerigin ustunde ciziliyor. Iki gradyan, donemleri 9 ve 13 derece: aralarinda asal olduklari icin desen 117 derecede bir tekrar ediyor ve goz duzeni yakalayamiyor. */ .isik-kat > .isik-cizgi { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 50%, rgb(var(--rv-ton) / .34) 0deg 3.4deg, transparent 3.4deg 9deg), repeating-conic-gradient(from 7deg at 50% 50%, rgb(var(--rv-ton) / .22) 0deg 2.2deg, transparent 2.2deg 13deg); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 13%, #000 27%, rgb(0 0 0 / .35) 45%, transparent 62%); mask-image: radial-gradient(circle at 50% 50%, transparent 13%, #000 27%, rgb(0 0 0 / .35) 45%, transparent 62%); filter: blur(calc(2.6px * var(--s))); animation: reveal-isin 30s linear infinite; } /* SIS: isinlarin onunde, agir bulanik, yavas suzulen bir pus. Agirligi bu tasiyor -- isinlar deseni, sis ortami veriyor. Iki ayri elips kullaniyor, cunku tek elips nefes alan bir daireye benziyor; ikisi surukleniyor. */ .isik-kat::after { background: radial-gradient(ellipse 52% 40% at 43% 47%, rgb(var(--rv-ton) / .34), transparent 68%), radial-gradient(ellipse 42% 52% at 60% 56%, rgb(var(--rv-ton) / .26), transparent 70%); filter: blur(calc(20px * var(--s))); animation: reveal-sis 11s ease-in-out infinite alternate; } /* TOZ: havada suzulen noktalar. Iki katman, farkli hizda ve farkli boyda. Sabit bir isik olu duruyor; hareket eden kucuk seyler ortami canli yapiyor. Noktalar `background-image` ile duruyor, yani dugum maliyeti sifir. */ .isik-toz { animation: reveal-toz 19s linear infinite; } .isik-toz.ince { background: radial-gradient(circle 1.5px at 12% 78%, rgb(255 255 255 / .9), transparent 60%), radial-gradient(circle 1.5px at 27% 34%, rgb(255 255 255 / .7), transparent 60%), radial-gradient(circle 1.5px at 41% 88%, rgb(255 255 255 / .8), transparent 60%), radial-gradient(circle 1.5px at 56% 21%, rgb(255 255 255 / .65), transparent 60%), radial-gradient(circle 1.5px at 68% 63%, rgb(255 255 255 / .85), transparent 60%), radial-gradient(circle 1.5px at 79% 44%, rgb(255 255 255 / .7), transparent 60%), radial-gradient(circle 1.5px at 88% 81%, rgb(255 255 255 / .8), transparent 60%), radial-gradient(circle 1.5px at 34% 57%, rgb(255 255 255 / .6), transparent 60%); } .isik-toz.iri { animation-duration: 31s; background: radial-gradient(circle 2.6px at 19% 47%, rgb(var(--rv-sari) / .8), transparent 62%), radial-gradient(circle 2.6px at 47% 72%, rgb(var(--rv-sari) / .6), transparent 62%), radial-gradient(circle 2.6px at 63% 29%, rgb(var(--rv-sari) / .75), transparent 62%), radial-gradient(circle 2.6px at 83% 58%, rgb(var(--rv-sari) / .65), transparent 62%), radial-gradient(circle 2.6px at 30% 15%, rgb(var(--rv-sari) / .55), transparent 62%); filter: blur(calc(.6px * var(--s))); } @keyframes reveal-isin { to { transform: rotate(360deg); } } @keyframes reveal-isin-ters { to { transform: rotate(-360deg); } } @keyframes reveal-hale { 0%, 100% { opacity: .84; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } @keyframes reveal-sis { from { opacity: .7; transform: scale(1) translate(0, 0); } to { opacity: 1; transform: scale(1.14) translate(2.5%, -2%); } } /* Toz yukari suzuluyor ve yolun basinda/sonunda sonuyor: dongunun basa donusu goze carpmasin. */ @keyframes reveal-toz { 0% { opacity: 0; transform: translateY(4%) scale(1); } 18% { opacity: .85; } 82% { opacity: .85; } 100% { opacity: 0; transform: translateY(-4%) scale(1.04); } } /* --- Kapaktan karta gecis --------------------------------------------------- * Duz bir saydamlasma cok yavan kaliyordu. Uc sey birlikte oluyor: * * kapak parlayip beyaza kacar, hafifce buyur, sonra kaybolur * cakma bir anlik beyaz patlama, kapak kaybolurken tepe yapar * nefes kart yerine otururken kisa bir buyu-kucul * * Sirali degil ic ice: kapak eridigi anda cakma tepesinde, goz kapagin * kayboldugunu degil kartin ortaya CIKTIGINI goruyor. */ .reveal-kapak { transition: opacity var(--rv-eri) ease, filter calc(var(--rv-eri) * .6) ease, transform var(--rv-eri) cubic-bezier(.3, .7, .2, 1); } .reveal.acildi .reveal-kapak { opacity: 0; filter: brightness(2.4) saturate(.35); transform: scale(1.07); } .reveal-cakma { position: absolute; inset: -12%; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 45%, #fff 0%, rgb(255 255 255 / .55) 38%, transparent 70%); } .reveal.acildi .reveal-cakma { animation: reveal-cakma calc(var(--rv-eri) * 1.1) ease-out 1; } @keyframes reveal-cakma { 0% { opacity: 0; transform: scale(.88); } 26% { opacity: .8; transform: scale(1.03); } 100% { opacity: 0; transform: scale(1.14); } } .reveal.acildi { animation: reveal-nefes calc(var(--rv-eri) * 1.15) cubic-bezier(.25, .9, .3, 1) 1; } /* COSKU: kart ortaya cikarken arkadaki isik bir kabarip yerine oturuyor. Keyframe kendi dinlenme haliyle BASLIYOR ve ayni haliyle BITIYOR (brightness 1, scale 1). Boyle olmazsa animasyon bitince isik son kareden dinlenme haline sicriyor -- goz o sicramayi kabarmadan daha cok fark ediyor. */ .reveal.acildi .reveal-isik { animation: reveal-cosku calc(var(--rv-eri) * 1.7) cubic-bezier(.16, .84, .3, 1) 1; } @keyframes reveal-cosku { 0% { filter: brightness(1) saturate(1); transform: scale(1); } 13% { filter: brightness(3) saturate(1.35); transform: scale(1.32); } 42% { filter: brightness(1.7) saturate(1.15); transform: scale(1.13); } 100% { filter: brightness(1) saturate(1); transform: scale(1); } } /* Halka: disa dogru acilan tek bir dalga. Isigin kabarmasi "daha parlak" diyor, halka "SIMDI oldu" diyor -- ikisi ayri isler, o yuzden ayri. */ .reveal-dalga { position: absolute; inset: -55%; z-index: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle at 50% 50%, transparent 52%, rgb(var(--rv-sari) / .75) 60%, rgb(var(--rv-sari) / .12) 66%, transparent 72%); filter: blur(calc(3px * var(--s))); } .reveal.acildi .reveal-dalga { animation: reveal-dalga calc(var(--rv-eri) * 1.3) cubic-bezier(.1, .7, .25, 1) 1; } @keyframes reveal-dalga { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: .95; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.75); } } @keyframes reveal-nefes { 0% { transform: scale(1); } 35% { transform: scale(1.055); } 100% { transform: scale(1); } } /* Elle cevrilen kart: kendi kendine donmuyor, tiklamayla iki yuz arasinda gidip geliyor. `.flip`in kendi donme animasyonu kapatiliyor. */ .flip.elle .flip-inner { animation: none; transition: transform .9s cubic-bezier(.4, 0, .2, 1); transform: rotateY(180deg); } .flip.elle.on .flip-inner { transform: rotateY(0deg); }