:root {    
    --left-light-x: -100px;
    --left-light-y: 100px;
    --left-light-width: 300;
    --left-light-height: 400;
    --lamp-width: 80;
    --left-rotate: 25;    
    --right-rotate: -25;
}

@keyframes myAnimation {
  0%   { --left-rotate: 0;}
  5%   { --left-rotate: 2.5;}
  10%  { --left-rotate: 5;}
  15%  { --left-rotate: 7.5;}
  20%  { --left-rotate: 10;}
  25%  { --left-rotate: 12.5;}
  30%  { --left-rotate: 15;}
  35%  { --left-rotate: 17.5;}
  40%  { --left-rotate: 20;}
  45%  { --left-rotate: 22.5;}
  50%  {--left-rotate: 25;}
  55%  {--left-rotate: 27.5;}    
  60%  {--left-rotate: 30;}
  65%  {--left-rotate: 32.5;}
  70%  {--left-rotate: 35;}
  75%  {--left-rotate: 37.5;}
  80%  {--left-rotate: 40;}
  85%  {--left-rotate: 42.5;}
  90%  {--left-rotate: 45;}  
  95%  {--left-rotate: 47.5;}
  100% {--left-rotate: 50;}
}

.svetlo-1-wrapper{
	position: absolute;
	bottom: 50px;
    left: 70px;
    z-index: 1;
	/*width: calc(var(--left-light-width)*1px - 50px);*/
	width: 180px;
	height: calc(var(--left-light-height)*1.5px + 40px);			
	overflow: hidden;
}

.svetlo-2-wrapper{
	position:absolute;
	bottom: 50px;
    right: 70px;
	z-index: 1;
	/*width: calc(var(--left-light-width)*1px);*/
	width: 180px;	
	height: calc(var(--left-light-height)*1.5px + 40px);	
	overflow: hidden; 
}

.svetlo-1{		
    	position: absolute;
		left: -130px;
	    z-index: 1;		
		width: calc(var(--left-light-width)*1px + 10px);
		height: calc(var(--left-light-height)*1.5px + 30px);				
		transform-origin: bottom center;
		rotate: calc(var(--left-rotate)*1deg);

		/*
		animation-name: myAnimation;
  		animation-duration: 300ms;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
		*/		
	}

.svetlo-2{		
    position: absolute;
	z-index: 1;		
	width: calc(var(--left-light-width)*1px + 10px);
	height: calc(var(--left-light-height)*1.5px + 30px);		
	transform-origin: bottom center;
	rotate: calc(var(--right-rotate)*1deg);	
	}

.lampa-1{
		position: absolute;
		left: calc((var(--left-light-width)/2)*1px - 40px);
		bottom: 0;
		/*width: 116px;
		height: 84px;*/
        width: 80px;
		height: 60px;
        background-image: url('../pic/r3.png');
		background-repeat: no-repeat;				
        background-size: 80px 60px;
		z-index: 2;
	}

.light-1{    
	background: linear-gradient(calc(var(--left-rotate)*1deg), #FFEE0080, #FFEE0020 40%, #fff0 100%);	  	
	width: calc(var(--left-light-width)*1px);
	height: calc(var(--left-light-height)*1px);
	position: absolute;
	/*left: calc((var(--left-light-width)/2)*1px - 58px);*/
	bottom: 0;
	--la: calc( (var(--left-light-width) - var(--lamp-width) ) / 2  / var(--left-light-width) * 100% + 5% );
	--lb: calc( 100% - (var(--left-light-width) - var(--lamp-width) ) / 2  / var(--left-light-width) * 100% - 5%);
	clip-path: polygon(0% 0%, 100% 0%, var(--lb) 100%, var(--la) 100% );
	filter: blur(50px);
  	z-index: 1;
}

.light-1-round{  
  	background: linear-gradient(calc(180deg ), #FFEE0080, #FFEE0080 60%, #fff0 100%);	
	filter: blur(10px);
	width: calc(var(--left-light-width)*1px);
  	height: calc(var(--left-light-width)*1px);
	left: 0;
  	top: 0;
	position: absolute;
	border-radius: 100%;	
	z-index: 3;
}


/* přístupnost */

@media (prefers-reduced-motion: reduce) {
  .svetlo-1, .svetlo-2, .svetlo-1-wrapper, .svetlo-2-wrapper,
  .lampa-1, .light-1 {
    animation: none !important;
    transition: none !important;
  }
}