*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#050505;color:#f2f2f2;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(255,255,255,.025) 50%,rgba(0,0,0,.08) 50%);background-size:100% 4px;pointer-events:none;z-index:50;animation:scan 6s linear infinite}
body:after{content:"";position:fixed;inset:0;background:radial-gradient(circle at center,transparent 35%,rgba(0,0,0,.78));pointer-events:none;z-index:49}
@keyframes scan{from{background-position:0 0}to{background-position:0 100px}}
.noise{position:fixed;inset:-50%;background:repeating-radial-gradient(circle,#fff 0,#fff 1px,transparent 1px,transparent 4px);opacity:.025;z-index:48;pointer-events:none;animation:noise 1s steps(4) infinite}
@keyframes noise{0%{transform:translate(0,0)}25%{transform:translate(3%,2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
nav{position:fixed;top:0;left:0;width:100%;z-index:60;padding:18px 8%;display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,.45);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.logo{font-weight:900;letter-spacing:2px;color:#ff2a2a;text-shadow:0 0 12px #800}
nav a{color:#ddd;text-decoration:none;margin-left:24px;font-size:14px;text-transform:uppercase;transition:.2s}
nav a:hover{color:#ff2a2a;text-shadow:0 0 10px #f00}
header{min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;background:radial-gradient(circle at 50% 30%,rgba(130,0,0,.45),transparent 35%),linear-gradient(180deg,#120000,#050505);position:relative;overflow:hidden}
.glow{position:absolute;width:420px;height:420px;border-radius:50%;background:#7a0000;filter:blur(110px);opacity:.45;animation:float 8s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(-120px,-80px)}50%{transform:translate(120px,70px)}}
.hero{position:relative;z-index:2;animation:fadeUp 1s ease forwards}
h1{font-size:clamp(45px,9vw,110px);letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 18px #b00000;animation:flicker 4s infinite}
@keyframes flicker{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.45}}
.hero p{margin-top:18px;color:#cfcfcf;font-size:20px;animation:type 3s steps(45) forwards;white-space:nowrap;overflow:hidden;border-right:2px solid #ff2a2a;max-width:max-content;margin-left:auto;margin-right:auto}
@keyframes type{from{width:0}to{width:100%}}
.btn{display:inline-block;margin-top:30px;padding:14px 24px;border:1px solid #ff2a2a;color:#fff;text-decoration:none;border-radius:10px;background:#180000;transition:.2s;box-shadow:0 0 20px rgba(255,0,0,.18)}
.btn:hover{background:#ff2a2a;color:#000;transform:translateY(-3px);box-shadow:0 0 35px rgba(255,0,0,.5)}
section{padding:100px 8%;position:relative}
.reveal{opacity:0;transform:translateY(45px);transition:1s}
.reveal.show{opacity:1;transform:translateY(0)}
h2{font-size:42px;text-transform:uppercase;margin-bottom:30px;color:#ff2a2a;text-shadow:0 0 14px #600}
.projects{display:flex;flex-wrap:wrap;gap:30px}
.card{background:linear-gradient(145deg,#141414,#080808);border:1px solid #2b2b2b;border-radius:18px;padding:25px;box-shadow:0 0 30px rgba(120,0,0,.25);transition:.3s;position:relative;overflow:hidden}
.card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,0,0,.13),transparent);transform:translateX(-100%);transition:.6s}
.card:hover:before{transform:translateX(100%)}
.card:hover{transform:translateY(-8px) scale(1.01);border-color:#ff2a2a;box-shadow:0 0 45px rgba(255,0,0,.25)}
.card iframe{max-width:100%;border-radius:10px;position:relative;z-index:1}
.trailer-wrapper{position:relative;width:560px;height:315px;max-width:100%;margin:auto;border-radius:20px;overflow:hidden;border:1px solid #2b2b2b;background:#000;box-shadow:0 0 40px rgba(255,0,0,.15);transition:.3s}
.trailer-wrapper:hover{transform:translateY(-6px);box-shadow:0 0 60px rgba(255,0,0,.3)}
.trailer-wrapper iframe{width:100%;height:100%;border:none;position:relative;z-index:2}
.trailer-glow{position:absolute;width:220px;height:220px;background:#8b0000;filter:blur(100px);opacity:.25;animation:trailerfloat 8s ease-in-out infinite;pointer-events:none;z-index:1}
.trailer-fallback{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:24px;color:#fff;text-align:center;text-decoration:none;background:linear-gradient(rgba(0,0,0,.16),rgba(0,0,0,.72)),url("https://i.ytimg.com/vi/OlaUi_KYAUw/hqdefault.jpg") center/cover}
.trailer-fallback span{padding:13px 18px;border:1px solid #ff2a2a;border-radius:10px;background:rgba(0,0,0,.76);box-shadow:0 0 20px rgba(255,0,0,.25)}
.trailer-wrapper.has-embed .trailer-fallback{display:none}
@keyframes trailerfloat{0%,100%{transform:translate(-40px,-40px)}50%{transform:translate(360px,100px)}}
.about{max-width:950px;line-height:1.8;font-size:19px;color:#ddd;display:grid;gap:18px}
.about p{background:rgba(255,255,255,.035);border-left:3px solid #ff2a2a;padding:18px;border-radius:12px;transition:.25s}
.about p:hover{transform:translateX(8px);background:rgba(255,0,0,.07)}
.marquee{overflow:hidden;background:#090909;border-top:1px solid #222;border-bottom:1px solid #222;padding:18px 0;color:#ff2a2a;text-transform:uppercase;font-weight:900;letter-spacing:3px}
.marquee span{display:inline-block;white-space:nowrap;animation:marquee 18s linear infinite}
@keyframes marquee{from{transform:translateX(100%)}to{transform:translateX(-100%)}}
footer{text-align:center;padding:35px;color:#888;background:#030303;border-top:1px solid #222}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){
nav{padding:15px 5%}
nav a{margin-left:12px;font-size:12px}
.hero p{font-size:15px;white-space:normal;border-right:0;animation:fadeUp 1s ease forwards}
section{padding:75px 5%}
h2{font-size:34px}
.trailer-wrapper{height:240px}
}