:root
{
	--printer_screen_textsize: clamp(2vw, 1.25rem, 40px);
}
body{
background-color: #4F80DA;
max-width: 100%;
width: 100%;
display: flex;
    margin: 0;
    padding: 0;
}
*{
    box-sizing: border-box;
}
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100%;
    position: relative;
}

#printer_container {
    position: relative;
    width: 80%;
    max-width: 800px;
    z-index: 10;
    margin-top: 10rem;
    margin-bottom: 10rem;
}

.printer-img {
    width: 100%;
    height: auto;
}

.power-btn {
    position: absolute;
    width: 5%;
    left: 5%;
    top: 34%;
}
.screen-text
{
    opacity: 0;
    transition: all 1s;
    font-size: var(--printer_screen_textsize);
    font-family:"Turret Road";
    color: white;
    font-weight:700;
    line-height: 85%;
}

.screen-text span
{
    line-height: 70%;
	font-weight:400;
	font-size:calc(var(--printer_screen_textsize) * .7);
}
.power-on .screen-text
{
    opacity: 1;
}

.screen {
    position: absolute;
    left: 25%;
    top: 35%;
    width: 50%;
    border-radius: .25rem;
    height: 13%;
    background: #323232;
    overflow: hidden;
    border: 2px solid #333;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
    color: #00ff00;
    padding: .4rem 1rem;
    box-sizing: border-box; 

      }

       .power-on .screen{
        background: #384936; 

       }

      .power-on .screen::before {
	   display:none;
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 200%; /* Doble altura para permitir movimiento */
           background: repeating-linear-gradient(
               to bottom,
               rgba(0, 0, 0, 0.3),
               rgba(0, 0, 0, 0.3) 2px,
               transparent 2px,
               transparent 4px
           );
           animation: move-scanlines 8s linear infinite;
           pointer-events: none;
       }

       @keyframes move-scanlines {
           0% { transform: translateY(-50%); }
           100% { transform: translateY(0); }
       }

       .power-on .screen::after {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: repeating-linear-gradient(
               to right,
               rgba(0, 0, 0, 0.2),
               rgba(0, 0, 0, 0.2) 2px,
               transparent 2px,
               transparent 8px
           );
           animation: move-vertical-lines 20s linear infinite;
           pointer-events: none;
       }

       @keyframes move-vertical-lines {
           0% { transform: translateX(0); }
           100% { transform: translateX(10px); }
       }


       @keyframes paper-slide {
           0% { transform: translateY(100%); }
           100% { transform: translateY(0%); }
       }

        @keyframes paper-output-slide {
           0% { transform: translateY(-100%) rotateX(0deg); }
           100% { transform: translateY(0%) rotateX(18deg); }
       }
       
    
     .printer-paper{
        width:100%;
        background-color: white;
        transform: translateY(105%);        
        display: grid;
        grid-template-columns: 1fr 1fr;
	box-shadow: 0 0 .25rem .25rem rgba(0,0,0,.25);        
       }

       .power-on .printer-paper,
       .has-powered-on .printer-paper
       {
        animation: paper-slide 1.5s forwards;
       }

       .printer-paper-holder
       {
        width:74%;
        position: absolute;
        left:13%;
        bottom:79.3%;
        background-color: transparent;
        clip-path: inset(-200% -20% 0% -20%);
       }

       .printer-paper-txt
       {
    	padding: 20% 0% 0% 20%;
   	font-family: "Turret Road";
    	font-size: .8rem;
	line-height:140%;
       }
       .printer-paper-output-txt
       {
    	padding: 10%;
   	font-family: "Turret Road";
    	font-size: 1.2rem;
       }

        .printer-paper-img
       {
        width:100%;
        height:auto;
        padding: 5% 20%;
       }

       .printer-paper-output-holder
       {
        /*border-top: solid 1px black*/;
        width:45%;
        position: absolute;
        left:27.5%;
        top:66.75%;
        clip-path: inset(0% -100% -1000px -100%);
        perspective: 300px;
       }
	.printer-paper-output
	{
	box-shadow:0 0 .25rem .25rem rgba(0,0,0,.15);
	} 
       .printer-paper-output-infinite,
        .printer-paper-output{
	border: solid thin rgba(0,0,0,.5);
	border-top: none;
        width:100%;
        background-color: white;
        transform: translateY(-101%);
        display: grid;
        grid-template-columns: 1fr;
        transform-origin: top;
        padding:4rem 2rem;
        font-size:2rem;
        text-align: center;
	position: absolute;
    	left: 0px;
   	top: 0px;
       }
       
	/*.has-powered-on .printer-paper-output-infinite,*/
       .has-powered-on .printer-paper-output,
       .power-on .printer-paper-output
       {
         animation: paper-output-slide 1.5s forwards ease-out;
       }
	
	 .printer-paper-output-infinite.animate
	{
         animation: paper-output-slide 1.5s forwards ease-out !important;
	}