/* ============================================ MONLIS Website - Home Hero Section Full-screen hero with video background Figma node:21:5359 ============================================ *//* ========================================== HERO CONTAINER 95vh for immersive experience ========================================== */.home-hero {position:relative;width:100%;height:95vh;min-height:600px;overflow:hidden;background-color:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;}/* ========================================== HERO BACKGROUND Video or image container ========================================== */.home-hero__background {position:absolute;top:0;left:0;width:100%;height:100%;z-index:var(--z-background);}.home-hero__video,.home-hero__image,.home-hero__poster {position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;}/* Poster shows instantly,fades out when video plays */.home-hero__poster {z-index:1;transition:opacity 0.5s ease-out;}/* Hide poster once video is playing */.home-hero__video.is-playing ~.home-hero__poster,.home-hero--video-ready .home-hero__poster {opacity:0;pointer-events:none;}/* ========================================== HERO HEADING CONTAINER Blur overlay at bottom Figma specs:- Position:absolute bottom - Backdrop blur:1.5px - Width:100% (1920px) ========================================== */.home-hero__content {position:absolute;bottom:0;left:0;right:0;width:100%;z-index:var(--z-content);display:flex;flex-direction:column;align-items:center;/* Blur effect */ backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);}/* ========================================== HERO HEADING Figma specs:- Font:Josefin Sans SemiBold - Size:130px - Line-height:156px - Color:#FFFFFF - Text-align:center ========================================== */.home-hero__heading {font-family:var(--font-primary);font-weight:600;font-size:130px;line-height:156px;color:var(--color-white);text-align:center;text-transform:uppercase;white-space:pre-wrap;width:100%;margin:0;padding:0;/* Animation */ opacity:0;transform:translateY(40px);animation:heroHeadingReveal 1.2s cubic-bezier(0.16,1,0.3,1) 0.3s forwards;}/* Heading reveal animation */@keyframes heroHeadingReveal {0% {opacity:0;transform:translateY(40px);letter-spacing:0.3em;filter:blur(10px);}50% {filter:blur(0);}100% {opacity:1;transform:translateY(0);letter-spacing:0.05em;filter:blur(0);}}/* Optional:Glowing text effect */.home-hero__heading::after {content:attr(data-text);position:absolute;left:0;top:0;width:100%;opacity:0;filter:blur(20px);animation:heroGlow 2s ease-in-out 1s forwards;}@keyframes heroGlow {0% {opacity:0;}50% {opacity:0.5;}100% {opacity:0;}}/* ========================================== RESPONSIVE STYLES ========================================== *//* Reduce motion for accessibility */@media (prefers-reduced-motion:reduce) {.home-hero__heading {animation:none;opacity:1;transform:none;letter-spacing:0.05em;}}/* Large Desktop (1440px) */@media (max-width:1440px) {.home-hero__heading {font-size:100px;line-height:120px;}}/* Desktop (1200px) */@media (max-width:1200px) {.home-hero__heading {font-size:80px;line-height:96px;}}/* Tablet (1024px) */@media (max-width:1024px) {.home-hero {height:85vh;min-height:500px;}.home-hero__heading {font-size:60px;line-height:72px;}}/* Mobile (768px) */@media (max-width:768px) {.home-hero {height:80vh;min-height:450px;}.home-hero__heading {font-size:36px;line-height:44px;padding:0 20px;}}/* Small Mobile (480px) */@media (max-width:480px) {.home-hero {height:75vh;min-height:400px;}.home-hero__heading {font-size:28px;line-height:34px;padding:0 15px;}}