.video-hero {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
border-radius: 15px;
margin-bottom: 20px;
}
.video-hero video {
width: 100%;
height: 100%;
object-fit: cover;
}
.video-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: rgba(0,0,0,0.3);
pointer-events: none;
}
.video-hero h1 {
font-size: 42px;
color: #FFD700;
text-shadow: 0 0 20px #FFD700, 0 0 40px #FFA500;
margin: 0;
}
.video-hero .subtitle {
color: #fff;
font-size: 16px;
margin-top: 10px;
}
.video-effects-bar {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 100;
pointer-events: all;
}
.effect-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #0ff;
background: rgba(0,0,0,0.7);
color: #0ff;
font-size: 20px;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 0 15px rgba(0,255,255,0.5);
}
.effect-btn:active {
transform: scale(1.2);
box-shadow: 0 0 30px rgba(0,255,255,1);
}
.effect-btn.glitch { border-color: #f0f; color: #f0f; box-shadow: 0 0 15px rgba(255,0,255,0.5); }
.effect-btn.rgb { border-color: #0f0; color: #0f0; box-shadow: 0 0 15px rgba(0,255,0,0.5); }
.effect-btn.warp { border-color: #ff0; color: #ff0; box-shadow: 0 0 15px rgba(255,255,0,0.5); }
.effect-btn.pixel { border-color: #f00; color: #f00; box-shadow: 0 0 15px rgba(255,0,0,0.5); }
/* Effects */
.video-hero.effect-glitch video {
animation: glitch 0.1s infinite;
}
.video-hero.effect-rgb video {
filter: saturate(2) contrast(1.5);
animation: rgbSplit 0.2s infinite;
}
.video-hero.effect-warp video {
animation: warp 0.3s infinite;
}
.video-hero.effect-pixel video {
filter: contrast(2) brightness(1.2);
image-rendering: pixelated;
}
@keyframes glitch {
0% { transform: translate(0); filter: hue-rotate(0deg); }
25% { transform: translate(-5px, 5px); filter: hue-rotate(90deg); }
50% { transform: translate(5px, -5px); filter: hue-rotate(180deg); }
75% { transform: translate(-5px, -5px); filter: hue-rotate(270deg); }
100% { transform: translate(0); filter: hue-rotate(360deg); }
}
@keyframes rgbSplit {
0% { filter: saturate(2) hue-rotate(0deg); }
50% { filter: saturate(3) hue-rotate(30deg); }
100% { filter: saturate(2) hue-rotate(0deg); }
}
@keyframes warp {
0% { transform: scale(1) skewX(0deg); }
25% { transform: scale(1.05) skewX(2deg); }
50% { transform: scale(0.95) skewX(-2deg); }
75% { transform: scale(1.02) skewX(1deg); }
100% { transform: scale(1) skewX(0deg); }
}