:root{--brand-col: #d17842;--dark-col: #0c0f14;--card-bg: #52555a;--gray-col: #aeaeae}*{padding:0;margin:0;-webkit-tap-highlight-color:transparent;box-sizing:border-box}@font-face{font-family:Backso;src:url(/fonts/Backso.ttf)}body{min-height:100vh;background:linear-gradient(90deg,var(--dark-col),var(--card-bg))}.favorites{padding:2rem;width:100%;box-sizing:border-box}.favorites h1{margin-bottom:2rem;text-align:center;font-size:2.5rem;color:#fff}.favorites-empty{text-align:center;padding:4rem 2rem;background-color:#ffffff0d;border-radius:12px;margin:2rem auto;max-width:600px}.favorites-empty h1{margin-bottom:1rem;font-size:2rem;color:#e50914}.favorites-empty p{color:#999;font-size:1.2rem;line-height:1.6}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.movies-grid>*{animation:fadeIn .3s ease-out forwards}.movie-card{position:relative;border-radius:8px;overflow:hidden;background-color:#1a1a1a;transition:transform .2s;height:100%;display:flex;flex-direction:column;color:#fff}.movie-card:hover{transform:translateY(-5px)}.movie-poster{position:relative;aspect-ratio:2/3;width:100%}.movie-poster img{width:100%;height:100%;object-fit:cover}.movie-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(to bottom,#0000001a,#000c);opacity:0;transition:opacity .2s;display:flex;flex-direction:column;justify-content:flex-end;padding:1rem}.movie-card:hover .movie-overlay{opacity:1}.favorite-btn{position:absolute;top:1rem;right:1rem;color:#fff;font-size:1.5rem;padding:.5rem;background-color:#00000080;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:background-color .2s}.favorite-btn:hover{background-color:#000c}.favorite-btn.active{color:#ff4757}.rating-select{background-color:#000000b3;color:#fff;border:none;padding:.5rem;border-radius:4px;cursor:pointer;margin-top:.5rem}.movie-info{padding:1rem;flex:1;display:flex;flex-direction:column;gap:.5rem}.movie-info h3{font-size:1rem;margin:0;color:#fff}.movie-info p{color:#999;font-size:.9rem}.user-rating{color:gold;font-size:.9rem;margin-top:auto}@media (max-width: 768px){.movie-card{font-size:.9rem}.movie-info{padding:.75rem}.favorite-btn{width:32px;height:32px;font-size:1.2rem}}.container{position:absolute;width:100px;height:100px;top:0;bottom:0;left:0;right:0;margin:auto}.container .item{width:50px;height:50px;position:absolute}.container .item-1{background-color:var(--brand-col);top:0;left:0;z-index:1;animation:item-1_move 1.8s cubic-bezier(.6,.01,.4,1) infinite}.container .item-2{background-color:var(--gray-col);top:0;right:0;animation:item-2_move 1.8s cubic-bezier(.6,.01,.4,1) infinite}.container .item-3{background-color:var(--brand-col);bottom:0;right:0;z-index:1;animation:item-3_move 1.8s cubic-bezier(.6,.01,.4,1) infinite}.container .item-4{background-color:var(--gray-col);bottom:0;left:0;animation:item-4_move 1.8s cubic-bezier(.6,.01,.4,1) infinite}@keyframes item-1_move{0%,to{transform:translate(0)}25%{transform:translateY(50px)}50%{transform:translate(50px,50px)}75%{transform:translate(50px)}}@keyframes item-2_move{0%,to{transform:translate(0)}25%{transform:translate(-50px)}50%{transform:translate(-50px,50px)}75%{transform:translateY(50px)}}@keyframes item-3_move{0%,to{transform:translate(0)}25%{transform:translateY(-50px)}50%{transform:translate(-50px,-50px)}75%{transform:translate(-50px)}}@keyframes item-4_move{0%,to{transform:translate(0)}25%{transform:translate(50px)}50%{transform:translate(50px,-50px)}75%{transform:translateY(-50px)}}.hero-section{margin:50px 0 300px;display:flex;flex-direction:column;gap:10px;align-items:center;position:relative}.hero-section .txt-box{display:flex;flex-direction:column;gap:20px;align-items:center;background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:40px 0;border-radius:10px}.hero-section .txt-box p{color:var(--gray-col);text-align:center;width:90%}.hero-section .txt-box button{padding:10px 30px;background:var(--brand-col);border:none;border-radius:10px;color:#fff}.hero-section .txt-box .GradientText{font-size:40px;font-family:Backso}.hero-section .animated-gradient-text{position:relative;margin:0 auto;display:flex;max-width:fit-content;flex-direction:row;align-items:center;justify-content:center;border-radius:1.25 rem;font-weight:500;-webkit-backdrop-filter:blur(10 px);backdrop-filter:blur(10 px);transition:box-shadow .5 s ease-out;overflow:hidden;cursor:pointer}.hero-section .gradient-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-size:300 % 100 %;animation:gradient linear infinite;border-radius:inherit;z-index:0;pointer-events:none}.hero-section .gradient-overlay:before{content:"";position:absolute;left:0;top:0;border-radius:inherit;width:calc(100 % -2 px);height:calc(100 % -2 px);left:50 %;top:50 %;transform:translate(-50 %,-50 %);background-color:#060010;z-index:-1}.hero-section .text-content{display:inline-block;position:relative;z-index:2;background-size:300% 100%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:gradient linear infinite}@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@media screen and (min-width: 700px){.hero-section .txt-box{padding:40px 20px}.hero-section .GradientText{font-size:100px!important}.hero-section .macbook{top:160%}}.macbook{width:150px;height:96px;position:absolute;left:50%;top:180%;margin:-85px 0 0 -78px;perspective:500px}.macbook .shadow{position:absolute;width:60px;height:0px;left:40px;top:160px;transform:rotateX(80deg) rotateY(0) rotate(0);box-shadow:0 0 60px 40px #0000004d;animation:shadow infinite 7s ease}.macbook .inner{z-index:20;position:absolute;width:150px;height:96px;left:0;top:0;transform-style:preserve-3d;transform:rotateX(-20deg) rotateY(0) rotate(0);animation:rotate infinite 7s ease}.macbook .screen{width:150px;height:96px;position:absolute;left:0;bottom:0;border-radius:7px;background:#ddd;transform-style:preserve-3d;transform-origin:50% 93px;transform:rotateX(0) rotateY(0) rotate(0);animation:lid-screen infinite 7s ease;background-image:linear-gradient(45deg,#00000057,#0000);background-position:left bottom;background-size:300px 300px;box-shadow:inset 0 3px 7px #ffffff80}.macbook .screen .logo{position:absolute;width:20px;height:24px;left:50%;top:50%;margin:-12px 0 0 -10px;transform:rotateY(180deg) translateZ(.1px)}.macbook .screen .face-one{width:150px;height:96px;position:absolute;left:0;bottom:0;border-radius:7px;background:#d3d3d3;transform:translateZ(2px);background-image:linear-gradient(45deg,#0000003d,#0000)}.macbook .screen .face-one .camera{width:3px;height:3px;border-radius:100%;background:#000;position:absolute;left:50%;top:4px;margin-left:-1.5px}.macbook .screen .face-one .display{width:130px;height:74px;margin:10px;background-color:#000;background-size:100% 100%;border-radius:1px;position:relative;box-shadow:inset 0 0 2px #000}.macbook .screen .face-one .display .shade{position:absolute;left:0;top:0;width:130px;height:74px;background:linear-gradient(-135deg,#fff0,#ffffff1a 47%,#fff0 48%);animation:screen-shade infinite 7s ease;background-size:300px 200px;background-position:0px 0px}.macbook .screen .face-one span{position:absolute;top:85px;left:57px;font-size:6px;color:#666}.macbook .macbody{width:150px;height:96px;position:absolute;left:0;bottom:0;border-radius:7px;background:#cbcbcb;transform-style:preserve-3d;transform-origin:50% bottom;transform:rotateX(-90deg);animation:lid-macbody infinite 7s ease;background-image:linear-gradient(45deg,#0000003d,#0000)}.macbook .macbody .face-one{width:150px;height:96px;position:absolute;left:0;bottom:0;border-radius:7px;transform-style:preserve-3d;background:#dfdfdf;animation:lid-keyboard-area infinite 7s ease;transform:translateZ(-2px);background-image:linear-gradient(30deg,#0000003d,#0000)}.macbook .macbody .touchpad{width:40px;height:31px;position:absolute;left:50%;top:50%;border-radius:4px;margin:-44px 0 0 -18px;background:#cdcdcd;background-image:linear-gradient(30deg,#0000003d,#0000);box-shadow:inset 0 0 3px #888}.macbook .macbody .keyboard{width:130px;height:45px;position:absolute;left:7px;top:41px;border-radius:4px;transform-style:preserve-3d;background:#cdcdcd;background-image:linear-gradient(30deg,#0000003d,#0000);box-shadow:inset 0 0 3px #777;padding:0 0 0 2px}.macbook .keyboard .key{width:6px;height:6px;background:#444;float:left;margin:1px;transform:translateZ(-2px);border-radius:2px;box-shadow:0 -2px #222;animation:keys infinite 7s ease}.macbook .key.space{width:45px}.macbook .key.f{height:3px}.macbook .macbody .pad{width:5px;height:5px;background:#333;border-radius:100%;position:absolute}.macbook .pad.one{left:20px;top:20px}.macbook .pad.two{right:20px;top:20px}.macbook .pad.three{right:20px;bottom:20px}.macbook .pad.four{left:20px;bottom:20px}@keyframes rotate{0%{transform:rotateX(-20deg) rotateY(0) rotate(0)}5%{transform:rotateX(-20deg) rotateY(-20deg) rotate(0)}20%{transform:rotateX(30deg) rotateY(200deg) rotate(0)}25%{transform:rotateX(-60deg) rotateY(150deg) rotate(0)}60%{transform:rotateX(-20deg) rotateY(130deg) rotate(0)}65%{transform:rotateX(-20deg) rotateY(120deg) rotate(0)}80%{transform:rotateX(-20deg) rotateY(375deg) rotate(0)}85%{transform:rotateX(-20deg) rotateY(357deg) rotate(0)}87%{transform:rotateX(-20deg) rotateY(360deg) rotate(0)}to{transform:rotateX(-20deg) rotateY(360deg) rotate(0)}}@keyframes lid-screen{0%{transform:rotateX(0);background-position:left bottom}5%{transform:rotateX(50deg);background-position:left bottom}20%{transform:rotateX(-90deg);background-position:-150px top}25%{transform:rotateX(15deg);background-position:left bottom}30%{transform:rotateX(-5deg);background-position:right top}38%{transform:rotateX(5deg);background-position:right top}48%{transform:rotateX(0);background-position:right top}90%{transform:rotateX(0);background-position:right top}to{transform:rotateX(0);background-position:right center}}@keyframes lid-macbody{0%{transform:rotateX(-90deg)}50%{transform:rotateX(-90deg)}to{transform:rotateX(-90deg)}}@keyframes lid-keyboard-area{0%{background-color:#dfdfdf}50%{background-color:#bbb}to{background-color:#dfdfdf}}@keyframes screen-shade{0%{background-position:-20px 0px}5%{background-position:-40px 0px}20%{background-position:200px 0}50%{background-position:-200px 0}80%{background-position:0px 0px}85%{background-position:-30px 0}90%{background-position:-20px 0}to{background-position:-20px 0px}}@keyframes keys{0%{box-shadow:0 -2px #222}5%{box-shadow:1 -1px #222}20%{box-shadow:-1px 1px #222}25%{box-shadow:-1px 1px #222}60%{box-shadow:-1px 1px #222}80%{box-shadow:0 -2px #222}85%{box-shadow:0 -2px #222}87%{box-shadow:0 -2px #222}to{box-shadow:0 -2px #222}}@keyframes shadow{0%{transform:rotateX(80deg) rotateY(0) rotate(0);box-shadow:0 0 60px 40px #0000004d}5%{transform:rotateX(80deg) rotateY(10deg) rotate(0);box-shadow:0 0 60px 40px #0000004d}20%{transform:rotateX(30deg) rotateY(-20deg) rotate(-20deg);box-shadow:0 0 50px 30px #0000004d}25%{transform:rotateX(80deg) rotateY(-20deg) rotate(50deg);box-shadow:0 0 35px 15px #0000001a}60%{transform:rotateX(80deg) rotateY(0) rotate(-50deg) translate(30px);box-shadow:0 0 60px 40px #0000004d}to{box-shadow:0 0 60px 40px #0000004d}}form{display:flex;justify-content:center;margin:30px 0}form input{padding:10px 20px;border-radius:10px 0 0 10px;border:none;outline:none;width:80%}form input:focus{outline:3px solid var(--brand-col)}form input:focus+button{outline:3px solid var(--brand-col)}form button{padding:10px;border-radius:0 10px 10px 0;border:none;transition:all .3s ease-in-out}form button:active{background:var(--brand-col);color:#fff}.error-message{color:#e64343;text-align:center;font-family:Backso}.content{position:relative;top:100px}.movies-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:15px;justify-content:center}.loyer{position:fixed;top:0;right:0;bottom:0;left:0;height:100vh;width:100vw;background:transparent;-webkit-backdrop-filter:blur(50px);backdrop-filter:blur(50px);z-index:1001;display:flex;justify-content:center;align-items:center;color:#fff;flex-direction:column;gap:20px;transition:all 1s cubic-bezier(.165,.84,.44,1)}.loyer h1{text-align:center;font-family:Backso;animation:introani2 2s ease-in-out forwards}.loyer img{animation:introani 1s ease-in-out forwards}@keyframes introani{0%{transform:rotate(90deg) scale(.3)}to{transform:rotate(0) scale(1)}}@keyframes introani2{0%{transform:translateY(300%)}to{transform:translateY(0)}}nav{width:fit-content;display:flex;align-items:center;justify-content:space-evenly;background-color:var(--dark-col);border-radius:30px;position:fixed;width:95%;left:2.5%;right:2.5%;bottom:70px;height:50px;box-shadow:0 0 10px var(--card-bg);z-index:1000}nav .label{padding:8px 18px;transition:all .2s;display:inline-block}nav .label input[type=radio]{display:none}nav .label>i{transition:all .2s;color:var(--card-bg);font-size:20px}nav .label:hover:not(:has(input:checked))>i{color:#d17842;scale:1.2}nav .label:before{content:"";display:block;width:100%;height:2px;border-radius:5px;position:relative;left:5%;top:30px;background:var(--brand-col);transition:all .2s}nav .label>i{transition:.3s;color:var(--gray-col);margin-top:0}nav .label:has(input:checked)>i{color:var(--brand-col);scale:1.2;margin-top:-5px}nav .label:has(input:checked):before{width:100%;left:0;top:100px}