/* ========================================================================== Gymree açılış ekranı (Gymree 16 sahnesi) - Yalnızca html.splash-on iken görünür (splash.js ekler); JS yoksa hiç görünmez. - Her şey SVG + CSS: harici kütüphane, görsel ya da font yok. - Sahne (sporcu, kettlebell'ler, kamera, ışık efektleri, logo) "Gymree Açılış Videosu (7)" dosyasından alındı; zaman çizelgesi ve sınıf adları orada anlatılan gibidir (aşağıdaki zaman çizelgesine bakın). - prefers-reduced-motion: hareket yok, yalnızca logo kısa süre belirir. ZAMAN ÇİZELGESİ (saniye) 0.0-1.1 sporcunun parçaları önce çizgi olarak çizilir, sonra dolar (.sp-pt, gecikme: style="--d:Xs") 1.1-1.6 çömelme 1.6-1.8 dambıllar omuza 1.8-2.3 yukarı itiş 2.34 KİLİT: ışık patlaması, şok dalgası, parçacıklar 2.85 sporcu kaybolur 3.0-4.8 logo çizilir, harfler yükselir, parlama geçer 5.0 ekran kapanır (splash.js LIFETIME) YENİ PARÇA EKLERKEN: class="sp-pt sp-c-xxx" + pathLength="1" + style="--d:0.4s" verin. Pivotlu @keyframes'te TÜM karelerde aynı fonksiyon listesi kullanın ("transform:none" karıştırmayın). ========================================================================== */ #splash { display: none; } html.splash-on #splash { display: block; } html.splash-on { overflow: hidden; animation: sp-unlock .01s linear 8s forwards; } @keyframes sp-unlock { to { overflow: auto; } } #splash { position: fixed; inset: 0; z-index: 1000; overflow: hidden; color: #fff; background: radial-gradient(75% 60% at 50% 44%, #4a17b0 0%, #2a0b66 52%, #12062b 100%); animation: sp-failsafe .01s linear 8s forwards; /* JS çalışmasa bile ekran kapanır */ -webkit-tap-highlight-color: transparent; cursor: pointer; } #splash::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 180px rgba(8, 1, 28, .75); } #splash.is-leaving { animation: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .55s ease, visibility 0s linear .55s; } @keyframes sp-failsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } .sp-stage { --h: min(92vh, 116.67vw); position: absolute; left: 50%; top: 50%; height: var(--h); width: calc(var(--h) * .857143); transform: translate(-50%, -50%); } .sp-svg { width: 100%; height: 100%; display: block; overflow: visible; } /* ---- arka plan: halkalar, kadran, zemin ---- */ .sp-rg { fill: none; stroke: rgba(255, 255, 255, .10); stroke-width: 1.5; opacity: 0; animation: sp-pop .8s ease .05s forwards; } .sp-rg2 { stroke: rgba(255, 255, 255, .07); } .sp-tick { fill: none; stroke: rgba(255, 255, 255, .24); stroke-width: 1.4; stroke-linecap: round; } .sp-spin { animation: sp-spin 40s linear infinite; } @keyframes sp-spin { to { transform: rotate(360deg); } } .sp-prog { fill: none; stroke: url(#sp-ringg); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: .95; animation: sp-ring 4.8s linear .1s forwards; } @keyframes sp-ring { to { stroke-dashoffset: 0; } } .sp-floor { fill: none; stroke-width: 2; opacity: 0; animation: sp-pop .6s ease .1s forwards, sp-fade .45s ease 2.85s forwards; } .sp-shadow { animation: sp-shadow 5s linear both; } @keyframes sp-shadow { 0%, 22% { transform: translate(300px, 551px) scale(1, 1) translate(-300px, -551px); opacity: 1; } 44% { transform: translate(300px, 551px) scale(.8, 1) translate(-300px, -551px); opacity: 1; } 57% { transform: translate(300px, 551px) scale(.84, 1) translate(-300px, -551px); opacity: 1; } 63%, 100% { transform: translate(300px, 551px) scale(.84, 1) translate(-300px, -551px); opacity: 0; } } /* ---- sporcu: uzuvlar çizilir, gövde belirir, sonra hareket başlar ---- */ @keyframes sp-draw { 0% { opacity: 0; stroke-dashoffset: 1; } 6% { opacity: 1; } 100% { opacity: 1; stroke-dashoffset: 0; } } @keyframes sp-pop { to { opacity: 1; } } @keyframes sp-fade { to { opacity: 0; } } .sp-body { animation: sp-body 5s linear both; } .sp-head { animation: sp-head 5s linear both; } .sp-arm-l { animation: sp-arm-l 5s linear both; } .sp-arm-r { animation: sp-arm-r 5s linear both; } .sp-fore-l { animation: sp-fore-l 5s linear both; } .sp-fore-r { animation: sp-fore-r 5s linear both; } .sp-ath { animation: sp-ath-out .55s cubic-bezier(.4, 0, .6, 1) 2.85s both; } @keyframes sp-ath-out { 0% { opacity: 1; transform: translate(300px, 352px) scale(1) translate(-300px, -352px); } 28% { opacity: 1; transform: translate(300px, 352px) scale(1.045) translate(-300px, -352px) translateY(-6px); } 100% { opacity: 0; transform: translate(300px, 352px) scale(.8) translate(-300px, -352px) translateY(10px); } } /* ---- kilit anı: halka ve kıvılcımlar ---- */ .sp-burst { animation: sp-burst .75s cubic-bezier(.1, .7, .3, 1) 2.34s both; } .sp-bring { fill: none; stroke: #e2d4ff; stroke-width: 3; } .sp-spark { fill: none; stroke: #e2d4ff; stroke-width: 3; stroke-linecap: round; } @keyframes sp-burst { 0% { transform: scale(.4); opacity: 0; } 14% { opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } } /* ---- logo: işaret çizilir, harfler yükselir, parıltı geçer ---- */ .sp-lglow { opacity: 0; animation: sp-pop .9s ease 3.1s forwards; } .sp-mk { fill: url(#sp-mkg); fill-opacity: 0; stroke: #e2d4ff; stroke-width: 1.8; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; animation: sp-draw .9s cubic-bezier(.5, 0, .2, 1) var(--d, 3s) forwards, sp-mkfill .5s ease calc(var(--d, 3s) + .62s) forwards; } @keyframes sp-mkfill { to { fill-opacity: 1; stroke-width: 0; } } .sp-lt { fill: #fff; opacity: 0; animation: sp-letter .6s cubic-bezier(.2, .8, .2, 1) var(--d, 3.4s) forwards; } @keyframes sp-letter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .sp-tag { fill: #c8b2ff; font-weight: 700; font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif; opacity: 0; animation: sp-pop .6s ease 3.95s forwards; } .sp-sheen { opacity: 0; animation: sp-sheen 1s cubic-bezier(.4, 0, .2, 1) 4s both; } @keyframes sp-sheen { 0% { opacity: 0; transform: translateX(0) skewX(-18deg); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(590px) skewX(-18deg); } } /* ---- hareket anahtar kareleri (kol, dirsek, gövde, baş) ---- */ @keyframes sp-arm-l{ 0%{transform:translate(248px,259px) rotate(5deg) translate(-248px,-259px);animation-timing-function:linear;} 22%{transform:translate(248px,259px) rotate(5deg) translate(-248px,-259px);animation-timing-function:cubic-bezier(.45,0,.25,1);} 32%{transform:translate(248px,259px) rotate(38deg) translate(-248px,-259px);animation-timing-function:linear;} 35.2%{transform:translate(248px,259px) rotate(38deg) translate(-248px,-259px);animation-timing-function:cubic-bezier(.32,.04,.16,1);} 47.2%{transform:translate(248px,259px) rotate(170deg) translate(-248px,-259px);animation-timing-function:cubic-bezier(.45,0,.25,1);} 50%{transform:translate(248px,259px) rotate(166deg) translate(-248px,-259px);animation-timing-function:cubic-bezier(.45,0,.25,1);} 54%{transform:translate(248px,259px) rotate(168deg) translate(-248px,-259px);animation-timing-function:linear;} 100%{transform:translate(248px,259px) rotate(168deg) translate(-248px,-259px);} } @keyframes sp-arm-r{ 0%{transform:translate(352px,259px) rotate(-5deg) translate(-352px,-259px);animation-timing-function:linear;} 22%{transform:translate(352px,259px) rotate(-5deg) translate(-352px,-259px);animation-timing-function:cubic-bezier(.45,0,.25,1);} 32%{transform:translate(352px,259px) rotate(-38deg) translate(-352px,-259px);animation-timing-function:linear;} 35.2%{transform:translate(352px,259px) rotate(-38deg) translate(-352px,-259px);animation-timing-function:cubic-bezier(.32,.04,.16,1);} 47.2%{transform:translate(352px,259px) rotate(-170deg) translate(-352px,-259px);animation-timing-function:cubic-bezier(.45,0,.25,1);} 50%{transform:translate(352px,259px) rotate(-166deg) translate(-352px,-259px);animation-timing-function:cubic-bezier(.45,0,.25,1);} 54%{transform:translate(352px,259px) rotate(-168deg) translate(-352px,-259px);animation-timing-function:linear;} 100%{transform:translate(352px,259px) rotate(-168deg) translate(-352px,-259px);} } @keyframes sp-fore-l{ 0%{transform:translate(248px,335px) rotate(0deg) translate(-248px,-335px);animation-timing-function:linear;} 22%{transform:translate(248px,335px) rotate(0deg) translate(-248px,-335px);animation-timing-function:cubic-bezier(.45,0,.25,1);} 32%{transform:translate(248px,335px) rotate(142deg) translate(-248px,-335px);animation-timing-function:linear;} 35.2%{transform:translate(248px,335px) rotate(142deg) translate(-248px,-335px);animation-timing-function:cubic-bezier(.32,.04,.16,1);} 47.2%{transform:translate(248px,335px) rotate(0deg) translate(-248px,-335px);animation-timing-function:linear;} 100%{transform:translate(248px,335px) rotate(0deg) translate(-248px,-335px);} } @keyframes sp-fore-r{ 0%{transform:translate(352px,335px) rotate(0deg) translate(-352px,-335px);animation-timing-function:linear;} 22%{transform:translate(352px,335px) rotate(0deg) translate(-352px,-335px);animation-timing-function:cubic-bezier(.45,0,.25,1);} 32%{transform:translate(352px,335px) rotate(-142deg) translate(-352px,-335px);animation-timing-function:linear;} 35.2%{transform:translate(352px,335px) rotate(-142deg) translate(-352px,-335px);animation-timing-function:cubic-bezier(.32,.04,.16,1);} 47.2%{transform:translate(352px,335px) rotate(0deg) translate(-352px,-335px);animation-timing-function:linear;} 100%{transform:translate(352px,335px) rotate(0deg) translate(-352px,-335px);} } @keyframes sp-body{ 0%{transform:translateY(0px);animation-timing-function:linear;} 22%{transform:translateY(0px);animation-timing-function:cubic-bezier(.45,0,.25,1);} 27.6%{transform:translateY(14px);animation-timing-function:cubic-bezier(.45,0,.25,1);} 32.4%{transform:translateY(0px);animation-timing-function:linear;} 35.2%{transform:translateY(0px);animation-timing-function:cubic-bezier(.32,.04,.16,1);} 46%{transform:translateY(-11px);animation-timing-function:cubic-bezier(.45,0,.25,1);} 52%{transform:translateY(-7px);animation-timing-function:linear;} 100%{transform:translateY(-7px);} } @keyframes sp-head{ 0%{transform:translate(300px,207px) rotate(0deg) translate(-300px,-207px);animation-timing-function:linear;} 42%{transform:translate(300px,207px) rotate(0deg) translate(-300px,-207px);animation-timing-function:cubic-bezier(.45,0,.25,1);} 52%{transform:translate(300px,207px) rotate(-6deg) translate(-300px,-207px);animation-timing-function:linear;} 100%{transform:translate(300px,207px) rotate(-6deg) translate(-300px,-207px);} } /* ========================================================================== Gymree 14 – sporcu ayrıntıları, kamera, ışık efektleri, iris çıkışı ========================================================================== */ @keyframes sp-cam { 0% { scale: 1.06; } 28% { scale: 1; } 46% { scale: 1; } 49% { scale: 1.03; } 62% { scale: 1; } 100% { scale: 1.02; } } @keyframes sp-off { to { opacity: 0; } } @keyframes sp-flash { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } } @keyframes sp-shock { 0% { opacity: 0; transform: scale(.4); } 10% { opacity: .9; } 100% { opacity: 0; transform: scale(7); } } @keyframes sp-mote { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); } } .sp-stage { animation: sp-cam 5s linear both; } .sp-eye { fill: #2a0b66; } .sp-brow, .sp-mouth { fill: none; stroke: #2a0b66; stroke-width: 2.2; stroke-linecap: round; } .sp-ex1 { opacity: 0; animation: sp-pop .4s ease 1s forwards, sp-off .08s linear 2.3s forwards; } .sp-ex2 { opacity: 0; animation: sp-pop .12s ease 2.32s forwards; } .sp-lt { animation-timing-function: cubic-bezier(.34, 1.4, .64, 1); } /* sporcu: önce plan çizgisi çizilir, sonra dolgu gelir (logo ile aynı dil) */ .sp-pt { fill-opacity: 0; stroke: #e2d4ff; stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; animation: sp-draw .55s cubic-bezier(.5, 0, .2, 1) var(--d, 0s) forwards, sp-mkfill .4s ease calc(var(--d, 0s) + .42s) forwards; } .sp-c-sk { fill: url(#sp-skin); } .sp-c-fit { fill: url(#sp-fit); } .sp-c-dk { fill: url(#sp-fit2); } .sp-c-hr { fill: #3b1a8f; } .sp-c-bd { fill: #7a3cf7; } .sp-c-shoe { fill: #6a2fe0; } .sp-c-dbp { fill: url(#sp-metal); } .sp-c-dbs { fill: #6a2fe0; } .sp-c-dbb { fill: #efe6ff; } .sp-tr { fill: none; stroke: #fff; stroke-opacity: .8; stroke-width: 3; stroke-linecap: round; opacity: 0; animation: sp-pop .4s ease .95s forwards; } .sp-tr.thin { stroke-width: 2.2; stroke-opacity: .45; } .sp-kn { fill: none; stroke: #8e6fd8; stroke-opacity: .55; stroke-width: 1.3; stroke-linecap: round; opacity: 0; animation: sp-pop .4s ease 1s forwards; } .sp-db-l { animation: sp-db-l 5s linear both; } .sp-db-r { animation: sp-db-r 5s linear both; } .sp-tail { animation: sp-tail 5s linear both; } .sp-head { animation-name: sp-head-v2; } @keyframes sp-head-v2{0%{transform:translate(300px,207px) rotate(0.00deg) translate(-300px,-207px);animation-timing-function:cubic-bezier(.45,0,.25,1);}22%{transform:translate(300px,207px) rotate(0.00deg) translate(-300px,-207px);animation-timing-function:cubic-bezier(.45,0,.25,1);}27.6%{transform:translate(300px,207px) rotate(4.00deg) translate(-300px,-207px);animation-timing-function:cubic-bezier(.45,0,.25,1);}32.4%{transform:translate(300px,207px) rotate(0.00deg) translate(-300px,-207px);animation-timing-function:cubic-bezier(.45,0,.25,1);}42%{transform:translate(300px,207px) rotate(0.00deg) translate(-300px,-207px);animation-timing-function:cubic-bezier(.45,0,.25,1);}52%{transform:translate(300px,207px) rotate(-6.00deg) translate(-300px,-207px);animation-timing-function:cubic-bezier(.45,0,.25,1);}100%{transform:translate(300px,207px) rotate(-6.00deg) translate(-300px,-207px);animation-timing-function:cubic-bezier(.45,0,.25,1);}} @keyframes sp-db-l{0%{transform:translate(248px,403px) rotate(0.00deg) translate(-248px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}45%{transform:translate(248px,403px) rotate(0.00deg) translate(-248px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}47.4%{transform:translate(248px,403px) rotate(-5.00deg) translate(-248px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}51%{transform:translate(248px,403px) rotate(3.50deg) translate(-248px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}55%{transform:translate(248px,403px) rotate(-2.00deg) translate(-248px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}60%{transform:translate(248px,403px) rotate(0.00deg) translate(-248px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}100%{transform:translate(248px,403px) rotate(0.00deg) translate(-248px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}} @keyframes sp-db-r{0%{transform:translate(352px,403px) rotate(0.00deg) translate(-352px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}45%{transform:translate(352px,403px) rotate(0.00deg) translate(-352px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}47.4%{transform:translate(352px,403px) rotate(5.00deg) translate(-352px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}51%{transform:translate(352px,403px) rotate(-3.50deg) translate(-352px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}55%{transform:translate(352px,403px) rotate(2.00deg) translate(-352px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}60%{transform:translate(352px,403px) rotate(0.00deg) translate(-352px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}100%{transform:translate(352px,403px) rotate(0.00deg) translate(-352px,-403px);animation-timing-function:cubic-bezier(.45,0,.25,1);}} @keyframes sp-tail{0%{transform:translate(321px,181px) rotate(0.00deg) translate(-321px,-181px);animation-timing-function:cubic-bezier(.45,0,.25,1);}27.6%{transform:translate(321px,181px) rotate(6.00deg) translate(-321px,-181px);animation-timing-function:cubic-bezier(.45,0,.25,1);}32.4%{transform:translate(321px,181px) rotate(0.00deg) translate(-321px,-181px);animation-timing-function:cubic-bezier(.45,0,.25,1);}46%{transform:translate(321px,181px) rotate(0.00deg) translate(-321px,-181px);animation-timing-function:cubic-bezier(.45,0,.25,1);}48.5%{transform:translate(321px,181px) rotate(-16.00deg) translate(-321px,-181px);animation-timing-function:cubic-bezier(.45,0,.25,1);}53%{transform:translate(321px,181px) rotate(10.00deg) translate(-321px,-181px);animation-timing-function:cubic-bezier(.45,0,.25,1);}58%{transform:translate(321px,181px) rotate(-5.00deg) translate(-321px,-181px);animation-timing-function:cubic-bezier(.45,0,.25,1);}64%{transform:translate(321px,181px) rotate(2.00deg) translate(-321px,-181px);animation-timing-function:cubic-bezier(.45,0,.25,1);}70%{transform:translate(321px,181px) rotate(0.00deg) translate(-321px,-181px);animation-timing-function:cubic-bezier(.45,0,.25,1);}100%{transform:translate(321px,181px) rotate(0.00deg) translate(-321px,-181px);animation-timing-function:cubic-bezier(.45,0,.25,1);}} /* dizler bükülür, ayaklar yerde kalır (ters kinematik ile hesaplanmış) */ .sp-th-l { animation: sp-th-l 5s linear both; } .sp-sh-l { animation: sp-sh-l 5s linear both; } .sp-ft-l { animation: sp-ft-l 5s linear both; } .sp-th-r { animation: sp-th-r 5s linear both; } .sp-sh-r { animation: sp-sh-r 5s linear both; } .sp-ft-r { animation: sp-ft-r 5s linear both; } /* kilit anı: ışık patlaması, şok dalgası, parçacıklar */ .sp-flash { transform-box: fill-box; transform-origin: center; opacity: 0; animation: sp-flash .9s cubic-bezier(.1, .7, .3, 1) 2.3s both; } .sp-shock { fill: none; stroke: #fff; stroke-opacity: .4; stroke-width: 1.6; transform-box: fill-box; transform-origin: center; opacity: 0; animation: sp-shock .9s cubic-bezier(.1, .7, .3, 1) 2.36s both; } .sp-mote { fill: #e2d4ff; opacity: 0; animation: sp-mote 1s cubic-bezier(.15, .7, .3, 1) calc(2.34s + var(--d, 0s)) both; } /* kamera yakınlaşması sahnenin görsel merkezinden yapılır (translate(-50%,-50%) ile birlikte kaymayı önler) */ .sp-stage { transform-origin: 0 0; } @keyframes sp-th-l{0%{transform:translate(0px,0.00px) translate(287px,410px) scale(1,1.0000) translate(-287px,-410px);animation-timing-function:linear}22%{transform:translate(0px,0.00px) translate(287px,410px) scale(1,1.0000) translate(-287px,-410px);animation-timing-function:cubic-bezier(.45,0,.25,1)}27.6%{transform:translate(0px,0.00px) translate(287px,410px) scale(1,0.8792) translate(-287px,-410px);animation-timing-function:cubic-bezier(.45,0,.25,1)}32.4%{transform:translate(0px,0.00px) translate(287px,410px) scale(1,1.0000) translate(-287px,-410px);animation-timing-function:linear}100%{transform:translate(0px,0.00px) translate(287px,410px) scale(1,1.0000) translate(-287px,-410px)}} @keyframes sp-sh-l{0%{transform:translate(0px,0.00px) translate(277px,481px) scale(1,1.0000) translate(-277px,-481px);animation-timing-function:linear}22%{transform:translate(0px,0.00px) translate(277px,481px) scale(1,1.0000) translate(-277px,-481px);animation-timing-function:cubic-bezier(.45,0,.25,1)}27.6%{transform:translate(0px,-8.57px) translate(277px,481px) scale(1,0.9013) translate(-277px,-481px);animation-timing-function:cubic-bezier(.45,0,.25,1)}32.4%{transform:translate(0px,0.00px) translate(277px,481px) scale(1,1.0000) translate(-277px,-481px);animation-timing-function:linear}100%{transform:translate(0px,0.00px) translate(277px,481px) scale(1,1.0000) translate(-277px,-481px)}} @keyframes sp-ft-l{0%{transform:translate(0px,0.00px) translate(268px,536px) scale(1,1.0000) translate(-268px,-536px);animation-timing-function:linear}22%{transform:translate(0px,0.00px) translate(268px,536px) scale(1,1.0000) translate(-268px,-536px);animation-timing-function:cubic-bezier(.45,0,.25,1)}27.6%{transform:translate(0px,0.00px) translate(268px,536px) scale(1,1.1095) translate(-268px,-536px);animation-timing-function:cubic-bezier(.45,0,.25,1)}32.4%{transform:translate(0px,0.00px) translate(268px,536px) scale(1,1.0000) translate(-268px,-536px);animation-timing-function:linear}100%{transform:translate(0px,0.00px) translate(268px,536px) scale(1,1.0000) translate(-268px,-536px)}} @keyframes sp-kn-l{0%{transform:translate(0px,0.00px) translate(277px,481px) scale(1,1.0000) translate(-277px,-481px);animation-timing-function:linear}22%{transform:translate(0px,0.00px) translate(277px,481px) scale(1,1.0000) translate(-277px,-481px);animation-timing-function:cubic-bezier(.45,0,.25,1)}27.6%{transform:translate(0px,-8.57px) translate(277px,481px) scale(1.22,1.2200) translate(-277px,-481px);animation-timing-function:cubic-bezier(.45,0,.25,1)}32.4%{transform:translate(0px,0.00px) translate(277px,481px) scale(1,1.0000) translate(-277px,-481px);animation-timing-function:linear}100%{transform:translate(0px,0.00px) translate(277px,481px) scale(1,1.0000) translate(-277px,-481px)}} @keyframes sp-th-r{0%{transform:translate(0px,0.00px) translate(313px,410px) scale(1,1.0000) translate(-313px,-410px);animation-timing-function:linear}22%{transform:translate(0px,0.00px) translate(313px,410px) scale(1,1.0000) translate(-313px,-410px);animation-timing-function:cubic-bezier(.45,0,.25,1)}27.6%{transform:translate(0px,0.00px) translate(313px,410px) scale(1,0.8792) translate(-313px,-410px);animation-timing-function:cubic-bezier(.45,0,.25,1)}32.4%{transform:translate(0px,0.00px) translate(313px,410px) scale(1,1.0000) translate(-313px,-410px);animation-timing-function:linear}100%{transform:translate(0px,0.00px) translate(313px,410px) scale(1,1.0000) translate(-313px,-410px)}} @keyframes sp-sh-r{0%{transform:translate(0px,0.00px) translate(323px,481px) scale(1,1.0000) translate(-323px,-481px);animation-timing-function:linear}22%{transform:translate(0px,0.00px) translate(323px,481px) scale(1,1.0000) translate(-323px,-481px);animation-timing-function:cubic-bezier(.45,0,.25,1)}27.6%{transform:translate(0px,-8.57px) translate(323px,481px) scale(1,0.9013) translate(-323px,-481px);animation-timing-function:cubic-bezier(.45,0,.25,1)}32.4%{transform:translate(0px,0.00px) translate(323px,481px) scale(1,1.0000) translate(-323px,-481px);animation-timing-function:linear}100%{transform:translate(0px,0.00px) translate(323px,481px) scale(1,1.0000) translate(-323px,-481px)}} @keyframes sp-ft-r{0%{transform:translate(0px,0.00px) translate(332px,536px) scale(1,1.0000) translate(-332px,-536px);animation-timing-function:linear}22%{transform:translate(0px,0.00px) translate(332px,536px) scale(1,1.0000) translate(-332px,-536px);animation-timing-function:cubic-bezier(.45,0,.25,1)}27.6%{transform:translate(0px,0.00px) translate(332px,536px) scale(1,1.1095) translate(-332px,-536px);animation-timing-function:cubic-bezier(.45,0,.25,1)}32.4%{transform:translate(0px,0.00px) translate(332px,536px) scale(1,1.0000) translate(-332px,-536px);animation-timing-function:linear}100%{transform:translate(0px,0.00px) translate(332px,536px) scale(1,1.0000) translate(-332px,-536px)}} @keyframes sp-kn-r{0%{transform:translate(0px,0.00px) translate(323px,481px) scale(1,1.0000) translate(-323px,-481px);animation-timing-function:linear}22%{transform:translate(0px,0.00px) translate(323px,481px) scale(1,1.0000) translate(-323px,-481px);animation-timing-function:cubic-bezier(.45,0,.25,1)}27.6%{transform:translate(0px,-8.57px) translate(323px,481px) scale(1.22,1.2200) translate(-323px,-481px);animation-timing-function:cubic-bezier(.45,0,.25,1)}32.4%{transform:translate(0px,0.00px) translate(323px,481px) scale(1,1.0000) translate(-323px,-481px);animation-timing-function:linear}100%{transform:translate(0px,0.00px) translate(323px,481px) scale(1,1.0000) translate(-323px,-481px)}} /* ===== EK DETAYLAR (tişört, ayakkabı, kas hatları) ===== */ .sp-c-wh, .sp-c-sole { fill: #f4efff; } .sp-c-up { fill: url(#sp-fit); } .sp-c-toe { fill: #4b1fb8; } .sp-lace { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-opacity: .9; opacity: 0; animation: sp-pop .4s ease 1s forwards; } .sp-lace.thick { stroke-width: 2.6; } .sp-lace.thin { stroke-width: 1.4; stroke-opacity: .35; } .sp-lace.sole { stroke: #2a0b66; stroke-width: 2.2; stroke-opacity: .8; } .sp-fold { fill: none; stroke: #fff; stroke-opacity: .18; stroke-width: 2; stroke-linecap: round; opacity: 0; animation: sp-pop .5s ease 1.05s forwards; } .sp-hl2 { fill: #fff; fill-opacity: .24; opacity: 0; animation: sp-pop .5s ease 1.05s forwards; } .sp-nose { fill: none; stroke: #8e6fd8; stroke-opacity: .6; stroke-width: 1.4; stroke-linecap: round; opacity: 0; animation: sp-pop .4s ease 1s forwards; } .sp-emb { fill: #fff; opacity: 0; animation: sp-pop .6s ease .95s forwards; } .sp-fold.dark { stroke: #2a0b66; stroke-opacity: .16; transform: translate(1.2px, 1.6px); } .sp-c-kb { fill: url(#sp-fit); } .sp-c-kbh { fill: url(#sp-metal); } .sp-kbsh { fill: #07011a; fill-opacity: .45; opacity: 0; animation: sp-pop .5s ease .3s forwards; } .sp-kb { transform-box: fill-box; transform-origin: 50% 100%; } .sp-kb-l { animation: sp-kb-l 5s linear both; } .sp-kb-r { animation: sp-kb-r 5s linear both; } @keyframes sp-kb-l { 0%, 46% { transform: none; } 48.6% { transform: translateY(-6px) rotate(-2deg); } 52.5% { transform: none; } 54.5% { transform: translateY(-1.5px); } 57%, 100% { transform: none; } } @keyframes sp-kb-r { 0%, 46% { transform: none; } 48.6% { transform: translateY(-6px) rotate(2deg); } 52.5% { transform: none; } 54.5% { transform: translateY(-1.5px); } 57%, 100% { transform: none; } } .sp-dust { fill: #cdb8ff; opacity: 0; transform-box: fill-box; transform-origin: center; animation: sp-dust .8s ease-out var(--t) both; } @keyframes sp-dust { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: .5; } 100% { opacity: 0; transform: translate(var(--dx), -9px) scale(2.4); } } .sp-kn-l { animation: sp-kn-l 5s linear both; } .sp-kn-r { animation: sp-kn-r 5s linear both; } .sp-tongue { fill: #f4efff; opacity: 0; animation: sp-pop .4s ease 1s forwards; } .sp-ex1 circle.sp-eye { transform-box: fill-box; transform-origin: center; animation: sp-blink 5s linear both; } @keyframes sp-blink { 0%, 23.6% { transform: none; } 24.3% { transform: scaleY(.1); } 25.5% { transform: none; } 40% { transform: none; } 40.6% { transform: scaleY(.1); } 41.8%, 100% { transform: none; } } .sp-floorring { fill: none; stroke: #cdb8ff; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: sp-floorring .75s cubic-bezier(.1, .7, .3, 1) 2.34s both; } @keyframes sp-floorring { 0% { opacity: 0; transform: scale(.3); } 12% { opacity: .65; } 100% { opacity: 0; transform: scale(4.2); } } /* ---- arayüz: Geç düğmesi, ekran okuyucu metni ---- */ .sp-skip { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 3; padding: 9px 17px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .08); color: #fff; font: 600 .9rem/1 inherit; font-family: inherit; cursor: pointer; opacity: 0; animation: sp-pop .5s ease .7s forwards; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .sp-skip:hover { background: rgba(255, 255, 255, .18); } .sp-skip:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } .sp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---- hareketi azalt: sporcu, kamera ve hareketli öğeler yok, logo yumuşakça belirir (en sonda: eşit özgüllükte kazanır) ---- */ @media (prefers-reduced-motion: reduce) { .sp-ath, .sp-burst, .sp-fx, .sp-floor, .sp-shadow, .sp-sheen, .sp-spin { display: none; } .sp-stage { animation: none; } .sp-prog { animation-duration: 1.4s; } .sp-mk, .sp-lt, .sp-tag, .sp-lglow { animation: sp-rm .6s ease .1s both !important; } .sp-mk { stroke-dashoffset: 0; fill-opacity: 1; stroke-width: 0; } .sp-lt { transform: none; } @keyframes sp-rm { from { opacity: 0; } to { opacity: 1; } } }