Nazar Boncuğu 3: CSS

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nazar Boncuğu 3</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}

body{
  background:#07010f;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
}

.stage{
  background:radial-gradient(ellipse at 40% 35%,#1a0535 0%,#07010f 65%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100vh;padding:50px 20px 60px;
  overflow:hidden;position:relative;width:100%;
  perspective:900px;
}

.stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--d,3s) ease-in-out infinite var(--dl,0s)}
@keyframes twinkle{0%,100%{opacity:var(--op,.3);transform:scale(1)}50%{opacity:.9;transform:scale(1.5)}}

.halo{
  position:absolute;
  width:340px;height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(40,80,220,0.30) 0%, rgba(15,30,100,0.12) 50%, transparent 72%);
  animation:halo-pulse 3.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes halo-pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.2);opacity:1}}

.eye-3d{
  transform-style:preserve-3d;
  animation:eye-float 7s ease-in-out infinite, eye-tilt 10s ease-in-out infinite;
  transition:transform 0.12s ease-out;
}
@keyframes eye-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes eye-tilt{
  0%,100%{transform:rotateX(6deg) rotateY(-4deg) translateY(0)}
  30%{transform:rotateX(-4deg) rotateY(6deg) translateY(-6px)}
  60%{transform:rotateX(8deg) rotateY(-6deg) translateY(-3px)}
}

.eye-system{position:relative;width:280px;height:280px;transform-style:preserve-3d}

.ring-1{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(ellipse at 35% 30%, #2550c8 0%, #0e267a 60%, #08155a 100%);
  box-shadow:
    inset -8px -10px 24px rgba(0,0,0,0.6),
    inset 6px 8px 18px rgba(100,140,255,0.25),
    0 0 40px 6px rgba(30,60,200,0.45),
    0 12px 30px rgba(0,0,0,0.7);
  animation:pulse-ring1 2.8s ease-in-out infinite;
}
@keyframes pulse-ring1{
  0%,100%{box-shadow:inset -8px -10px 24px rgba(0,0,0,0.6),inset 6px 8px 18px rgba(100,140,255,0.25),0 0 40px 6px rgba(30,60,200,0.45),0 12px 30px rgba(0,0,0,0.7)}
  50%{box-shadow:inset -8px -10px 24px rgba(0,0,0,0.5),inset 6px 8px 18px rgba(100,140,255,0.35),0 0 70px 18px rgba(50,90,255,0.6),0 16px 40px rgba(0,0,0,0.7)}
}

.ring-filigree{
  position:absolute;inset:13px;border-radius:50%;
  background:
    repeating-conic-gradient(#d4b030 0deg 5deg,#7a5c0e 5deg 10deg),
    radial-gradient(ellipse at 35% 28%, #fce080 0%, #a07818 60%, #5a3e04 100%);
  background-blend-mode:multiply;
  box-shadow:inset -4px -5px 12px rgba(0,0,0,0.55),inset 3px 4px 8px rgba(255,230,120,0.3),0 4px 12px rgba(0,0,0,0.4);
  animation:spin-rev 18s linear infinite;
}

.ring-2{
  position:absolute;inset:27px;border-radius:50%;
  background:radial-gradient(ellipse at 35% 30%, #f0e8d8 0%, #d8ceba 60%, #b8a890 100%);
  box-shadow:inset -4px -5px 12px rgba(0,0,0,0.45),inset 3px 3px 8px rgba(255,255,255,0.35);
}

.ring-pattern{
  position:absolute;inset:55px;border-radius:50%;
  background:
    repeating-conic-gradient(#c0b090 0deg 5deg,#e8dcc4 5deg 10deg),
    radial-gradient(ellipse at 35% 30%, #e0d4b8 0%, #b8a888 100%);
  background-blend-mode:multiply;
  box-shadow:inset -3px -4px 9px rgba(0,0,0,0.35),inset 2px 2px 6px rgba(255,255,255,0.2);
}

.ring-3{
  position:absolute;inset:69px;border-radius:50%;
  background:radial-gradient(ellipse at 35% 30%, #3060e0 0%, #1440b0 55%, #0a2880 100%);
  box-shadow:inset -4px -6px 14px rgba(0,0,0,0.55),inset 3px 4px 9px rgba(80,120,255,0.28);
}

.ring-4{
  position:absolute;inset:98px;border-radius:50%;
  background:radial-gradient(ellipse at 35% 30%, #ece6d4 0%, #c8c0a4 60%, #a09078 100%);
  box-shadow:inset -3px -4px 9px rgba(0,0,0,0.4),inset 2px 3px 6px rgba(255,255,255,0.25);
}

.ring-5{
  position:absolute;inset:114px;border-radius:50%;
  background:radial-gradient(ellipse at 35% 30%, #2055c8 0%, #0e3598 55%, #081e70 100%);
  box-shadow:inset -3px -5px 11px rgba(0,0,0,0.5),inset 2px 3px 7px rgba(60,100,230,0.25);
}

.pupil{
  position:absolute;inset:134px;border-radius:50%;
  background:radial-gradient(ellipse at 38% 32%, #1c1830 0%, #06040e 55%, #020108 100%);
  box-shadow:inset -2px -3px 7px rgba(0,0,0,0.8),inset 2px 2px 5px rgba(80,60,130,0.2),0 0 14px 3px rgba(10,6,30,0.6);
}
.pupil::before{
  content:'';position:absolute;
  top:11%;left:14%;width:30%;height:30%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.4) 50%, transparent 70%);
}
.pupil::after{
  content:'';position:absolute;
  bottom:17%;right:14%;width:13%;height:13%;
  border-radius:50%;
  background:rgba(255,255,255,0.22);
}

.lid-top{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%, #12023a 0%, #07010f 100%);
  clip-path:ellipse(50% 50% at 50% 0%);
  transform-origin:50% 0%;
  transform:scaleY(0);
  animation:blink-top 6s ease-in-out infinite;
  z-index:20;
}
.lid-top::after{
  content:'';
  position:absolute;
  bottom:0;left:8%;width:84%;height:16px;
  background:repeating-linear-gradient(90deg,#07010f 0px 3px,transparent 3px 8px);
  border-radius:0 0 50% 50%;
}
.lid-bottom{
  position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 100%, #12023a 0%, #07010f 100%);
  clip-path:ellipse(50% 50% at 50% 100%);
  transform-origin:50% 100%;
  transform:scaleY(0);
  animation:blink-bottom 6s ease-in-out infinite;
  z-index:20;
}
@keyframes blink-top{0%,7%{transform:scaleY(0)}10%,13%{transform:scaleY(1)}16%,100%{transform:scaleY(0)}}
@keyframes blink-bottom{0%,7%{transform:scaleY(0)}10%,13%{transform:scaleY(1)}16%,100%{transform:scaleY(0)}}

.rays{position:absolute;inset:0;border-radius:50%;animation:spin-slow 50s linear infinite;z-index:-1;pointer-events:none}
.ray{
  position:absolute;top:50%;left:50%;
  width:1.5px;height:160px;
  background:linear-gradient(to bottom, rgba(200,168,48,0.28), transparent 80%);
  transform-origin:top center;margin-left:-0.75px;
}

.burst-ring{position:absolute;inset:-40px;border-radius:50%;animation:spin-slow 35s linear infinite}
.burst-tri{
  position:absolute;width:0;height:0;
  border-left:8px solid transparent;border-right:8px solid transparent;
  border-bottom:20px solid;
  transform-origin:8px 180px;
}
.burst-tri:nth-child(odd){border-bottom-color:#c8a830;opacity:0.9}
.burst-tri:nth-child(even){border-bottom-color:#8a6010;opacity:0.55}

.orbit-outer{position:absolute;inset:-24px;border-radius:50%;animation:spin-rev 22s linear infinite;transform-style:preserve-3d}
.orbit-inner{position:absolute;inset:-10px;border-radius:50%;animation:spin-slow 13s linear infinite;transform-style:preserve-3d}
.orb{
  position:absolute;border-radius:50%;
  box-shadow:inset -2px -2px 4px rgba(0,0,0,0.5),inset 1px 1px 3px rgba(255,255,255,0.35);
}

.corner-eye{
  position:absolute;width:14px;height:24px;
  background:radial-gradient(ellipse at 40% 30%, #2550c8 0%, #0a1e7a 100%);
  border-radius:50% 50% 60% 60%/40% 40% 60% 60%;
  box-shadow:inset -1px -2px 4px rgba(0,0,0,0.5),0 2px 6px rgba(0,0,0,0.4);
}
.corner-eye::after{
  content:'';position:absolute;
  top:4px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #f0e8d0 0%, #c8b890 100%);
}
.ce-tl{top:-32px;left:-32px;transform:rotate(-45deg)}
.ce-tr{top:-32px;right:-32px;transform:rotate(45deg)}
.ce-bl{bottom:-32px;left:-32px;transform:rotate(-135deg)}
.ce-br{bottom:-32px;right:-32px;transform:rotate(135deg)}

.teardrop{
  position:absolute;bottom:-46px;left:50%;transform:translateX(-50%);
  width:24px;height:40px;
  background:radial-gradient(ellipse at 38% 30%, #2550c8 0%, #0e267a 60%, #07154a 100%);
  border-radius:50% 50% 60% 60%/40% 40% 60% 60%;
  box-shadow:inset -2px -3px 7px rgba(0,0,0,0.55),0 4px 12px rgba(0,0,0,0.5);
}
.teardrop::after{
  content:'';position:absolute;
  top:7px;left:50%;transform:translateX(-50%);
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fce080 0%, #b07c10 100%);
}

.chain{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  margin-bottom:8px;
}
.link{
  width:14px;height:9px;border-radius:50%;
  border:2.5px solid #a07818;
  background:linear-gradient(135deg, #d4b030 0%, #7a5a0e 100%);
  box-shadow:0 1px 3px rgba(0,0,0,0.5);
}

.particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.particle{
  position:absolute;border-radius:50%;
  width:var(--sz,3px);height:var(--sz,3px);
  animation:float-up var(--dur,8s) ease-in-out infinite var(--delay,0s);
  left:var(--left,50%);bottom:0;
}
@keyframes float-up{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:var(--op,.5)}
  50%{transform:translateY(-180px) translateX(var(--dx,10px)) scale(0.8);opacity:.8}
  100%{transform:translateY(-360px) translateX(calc(var(--dx,10px)*2)) scale(0.4);opacity:0}
}

@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes spin-rev{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
</style>
</head>
<body>
<div class="stage" id="stage">
  <div class="stars" id="stars"></div>
  <div class="particles" id="particles"></div>
  <div class="halo"></div>

  <div class="chain">
    <div class="link"></div>
    <div class="link"></div>
    <div class="link"></div>
  </div>

  <div class="eye-3d" id="eye3d">
    <div class="eye-system">

      <div class="rays" id="rays"></div>
      <div class="burst-ring" id="burst"></div>
      <div class="orbit-outer" id="orbitOuter"></div>

      <div class="ring-1"></div>
      <div class="ring-filigree"></div>
      <div class="ring-2"></div>
      <div class="ring-pattern"></div>
      <div class="ring-3"></div>
      <div class="ring-4"></div>
      <div class="ring-5"></div>
      <div class="pupil"></div>

      <div class="orbit-inner" id="orbitInner"></div>

      <div class="lid-top"></div>
      <div class="lid-bottom"></div>

      <div class="corner-eye ce-tl"></div>
      <div class="corner-eye ce-tr"></div>
      <div class="corner-eye ce-bl"></div>
      <div class="corner-eye ce-br"></div>

      <div class="teardrop"></div>
    </div>
  </div>
</div>

<script>
(function(){
  const starsEl = document.getElementById('stars');
  for(let i=0;i<80;i++){
    const s=document.createElement('div');
    s.className='star';
    const sz=Math.random()*2+0.5;
    s.style.cssText=`width:${sz}px;height:${sz}px;left:${Math.random()*100}%;top:${Math.random()*100}%;--d:${2+Math.random()*4}s;--dl:${Math.random()*4}s;--op:${0.15+Math.random()*0.55}`;
    starsEl.appendChild(s);
  }

  const particlesEl = document.getElementById('particles');
  for(let i=0;i<18;i++){
    const p=document.createElement('div');
    p.className='particle';
    const sz=Math.random()*3+1.5;
    const isBlue=Math.random()>0.5;
    const col=isBlue?`rgba(80,140,255,${0.3+Math.random()*0.4})`:`rgba(200,168,48,${0.3+Math.random()*0.4})`;
    p.style.cssText=`width:${sz}px;height:${sz}px;background:${col};left:${30+Math.random()*40}%;--dur:${5+Math.random()*8}s;--delay:${Math.random()*6}s;--dx:${(Math.random()-0.5)*30}px;--op:${0.3+Math.random()*0.4}`;
    particlesEl.appendChild(p);
  }

  const raysEl = document.getElementById('rays');
  for(let i=0;i<24;i++){
    const r=document.createElement('div');
    r.className='ray';
    r.style.transform=`rotate(${i*15}deg)`;
    raysEl.appendChild(r);
  }

  const burstEl = document.getElementById('burst');
  for(let i=0;i<24;i++){
    const t=document.createElement('div');
    t.className='burst-tri';
    t.style.transform=`rotate(${i*15}deg)`;
    burstEl.appendChild(t);
  }

  const outerEl = document.getElementById('orbitOuter');
  const outerR=154;
  for(let i=0;i<15;i++){
    const b=document.createElement('div');
    b.className='orb';
    const big=i%2===0;
    const sz=big?10:6;
    const col=big?'radial-gradient(circle at 35% 30%, #c8d8f8 0%, #6090d0 100%)':'radial-gradient(circle at 35% 30%, #f0e8d0 0%, #a89060 100%)';
    const angle=i*(360/15);
    const rad=angle*Math.PI/180;
    const cx=140+outerR*Math.sin(rad)-sz/2;
    const cy=140-outerR*Math.cos(rad)-sz/2;
    b.style.cssText=`width:${sz}px;height:${sz}px;background:${col};left:${cx}px;top:${cy}px;`;
    outerEl.appendChild(b);
  }

  const innerEl = document.getElementById('orbitInner');
  const innerR=148;
  for(let i=0;i<12;i++){
    const b=document.createElement('div');
    b.className='orb';
    const big=i%2===0;
    const sz=big?8:5;
    const col=big?'radial-gradient(circle at 35% 30%, #fce080 0%, #a07010 100%)':'radial-gradient(circle at 35% 30%, #ffe8a0 0%, #c09020 100%)';
    const angle=i*(360/12);
    const rad=angle*Math.PI/180;
    const cx=140+innerR*Math.sin(rad)-sz/2;
    const cy=140-innerR*Math.cos(rad)-sz/2;
    b.style.cssText=`width:${sz}px;height:${sz}px;background:${col};left:${cx}px;top:${cy}px;`;
    innerEl.appendChild(b);
  }

  const eye3d = document.getElementById('eye3d');
  const stage = document.getElementById('stage');
  let animating = true;

  stage.addEventListener('mousemove', e=>{
    animating = false;
    eye3d.style.animation = 'none';
    const rect=stage.getBoundingClientRect();
    const cx=rect.left+rect.width/2;
    const cy=rect.top+rect.height/2;
    const dx=(e.clientX-cx)/rect.width;
    const dy=(e.clientY-cy)/rect.height;
    eye3d.style.transform=`rotateX(${-dy*22}deg) rotateY(${dx*26}deg)`;
  });
  stage.addEventListener('mouseleave', ()=>{
    eye3d.style.animation = 'eye-float 7s ease-in-out infinite, eye-tilt 10s ease-in-out infinite';
    eye3d.style.transform = '';
    animating = true;
  });
})();
</script>
</body>
</html>