/* Casa Luna v52 — fluid cinematic hero */
:root{
  --hero-x: 0px;
  --hero-y: 0px;
  --hero-scroll: 0px;
}

/* Keep the first screen cinematic, responsive and stable on mobile browser chrome */
.home-cinematic .lux-hero{
  min-height:100vh!important;
  min-height:100svh!important;
  height:100svh;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#0f1712;
}

.home-cinematic .lux-hero__media{
  position:absolute;
  inset:-3.5%;
  z-index:0;
  overflow:hidden;
  transform:translate3d(var(--hero-x),calc(var(--hero-y) + var(--hero-scroll)),0);
  transition:transform .18s linear;
  will-change:transform;
}

.home-cinematic .lux-hero__media video,
.home-cinematic .lux-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 53%;
  display:block;
}

.home-cinematic .lux-hero__media video{
  transform:scale(1.035);
  filter:saturate(.94) contrast(1.03);
}

.home-cinematic .lux-hero__fallback{
  position:absolute;
  inset:0;
  z-index:-1;
  transform:scale(1.04);
  animation:heroDrift 18s ease-in-out infinite alternate;
}

.home-cinematic .lux-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 50% 44%,rgba(0,0,0,.02) 0%,rgba(0,0,0,.10) 48%,rgba(0,0,0,.38) 100%),
    linear-gradient(180deg,rgba(5,10,7,.33) 0%,rgba(5,10,7,.04) 36%,rgba(5,10,7,.08) 62%,rgba(5,10,7,.48) 100%);
  pointer-events:none;
}

/* Soft moving light keeps the frame alive without looking like an effect */
.home-cinematic .lux-hero::before{
  content:"";
  position:absolute;
  z-index:1;
  width:56vw;
  height:56vw;
  min-width:520px;
  min-height:520px;
  left:-18vw;
  top:-26vw;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,238,205,.16) 0%,rgba(255,238,205,.04) 34%,transparent 70%);
  filter:blur(18px);
  animation:ambientLight 14s ease-in-out infinite alternate;
  pointer-events:none;
}

.home-cinematic .lux-hero__content{
  position:relative;
  z-index:3;
  width:min(900px,90vw)!important;
  padding:clamp(86px,12vh,132px) 18px 88px!important;
  margin:auto;
  text-align:center;
  transform:translate3d(0,0,0);
}

.home-cinematic .hero-flourish,
.home-cinematic .lux-hero h1,
.home-cinematic .hero-kicker,
.home-cinematic .hero-subline,
.home-cinematic .btn-lux{
  opacity:0;
  transform:translateY(18px);
  animation:heroEnter .9s cubic-bezier(.2,.72,.25,1) forwards;
}
.home-cinematic .hero-flourish{animation-delay:.12s}
.home-cinematic .lux-hero h1{animation-delay:.24s}
.home-cinematic .hero-kicker{animation-delay:.38s}
.home-cinematic .hero-subline{animation-delay:.50s}
.home-cinematic .btn-lux{animation-delay:.62s}

.home-cinematic .lux-hero h1{
  font-size:clamp(62px,8.2vw,132px)!important;
  line-height:.88!important;
  margin:0 0 22px!important;
  text-wrap:balance;
  text-shadow:0 5px 30px rgba(0,0,0,.34)!important;
}

.home-cinematic .lux-hero .hero-kicker{
  font-size:clamp(22px,2vw,34px)!important;
  letter-spacing:.16em!important;
  margin:0 auto 11px!important;
  line-height:1.2!important;
}

.home-cinematic .lux-hero .hero-subline{
  max-width:650px!important;
  margin:0 auto 28px!important;
  font-size:clamp(11px,1.05vw,14px)!important;
  line-height:1.65!important;
  letter-spacing:.17em!important;
  color:rgba(255,255,255,.92)!important;
}

.home-cinematic .lux-hero .btn-lux{
  min-width:210px;
  backdrop-filter:blur(4px);
  box-shadow:0 16px 45px rgba(0,0,0,.18);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background .25s ease,box-shadow .35s ease!important;
}
.home-cinematic .lux-hero .btn-lux:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 22px 55px rgba(0,0,0,.28);
}

.home-cinematic .hero-bottom{
  z-index:4;
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:max(22px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  clip:auto!important;
  clip-path:none!important;
  opacity:1!important;
  pointer-events:auto!important;
}
.home-cinematic .hero-scroll{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  color:#fff!important;
  text-decoration:none;
  font-size:10px!important;
  letter-spacing:.22em!important;
  opacity:.84!important;
}
.home-cinematic .hero-scroll::after{
  content:"";
  width:1px;
  height:36px;
  background:linear-gradient(to bottom,rgba(255,255,255,.9),rgba(255,255,255,0));
  animation:scrollPulse 1.8s ease-in-out infinite;
}

@keyframes heroEnter{to{opacity:1;transform:translateY(0)}}
@keyframes heroDrift{from{transform:scale(1.04) translate3d(-.35%,0,0)}to{transform:scale(1.085) translate3d(.5%,-.5%,0)}}
@keyframes ambientLight{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(9vw,5vw,0) scale(1.12)}}
@keyframes scrollPulse{0%,100%{transform:scaleY(.35);transform-origin:top;opacity:.45}50%{transform:scaleY(1);transform-origin:top;opacity:1}}

@media(max-width:680px){
  .home-cinematic .lux-hero{
    min-height:100svh!important;
    height:100svh!important;
  }
  .home-cinematic .lux-hero__media{
    inset:-2%;
    transform:none!important;
  }
  .home-cinematic .lux-hero__media video,
  .home-cinematic .lux-hero__media img{
    object-position:50% 50%;
  }
  .home-cinematic .lux-hero__content{
    width:100%!important;
    padding:calc(92px + env(safe-area-inset-top)) 22px calc(96px + env(safe-area-inset-bottom))!important;
  }
  .home-cinematic .hero-flourish{margin-bottom:16px!important}
  .home-cinematic .hero-flourish:before,
  .home-cinematic .hero-flourish:after{width:42px!important}
  .home-cinematic .lux-hero h1{
    font-size:clamp(47px,15vw,67px)!important;
    line-height:.89!important;
    letter-spacing:.04em!important;
    margin-bottom:20px!important;
  }
  .home-cinematic .lux-hero .hero-kicker{
    font-size:clamp(18px,5.4vw,24px)!important;
    letter-spacing:.12em!important;
  }
  .home-cinematic .lux-hero .hero-subline{
    font-size:10.5px!important;
    line-height:1.7!important;
    letter-spacing:.12em!important;
    max-width:330px!important;
    margin-bottom:24px!important;
  }
  .home-cinematic .lux-hero .btn-lux{
    width:min(290px,82vw);
    min-height:52px;
  }
  .home-cinematic .hero-bottom{display:block!important;bottom:calc(12px + env(safe-area-inset-bottom))!important}
  .home-cinematic .hero-scroll{font-size:9px!important}
  .home-cinematic .hero-scroll::after{height:24px}
  .home-cinematic .lux-hero::before{opacity:.65}
}

@media(prefers-reduced-motion:reduce){
  .home-cinematic .lux-hero__media,
  .home-cinematic .lux-hero__fallback,
  .home-cinematic .lux-hero::before,
  .home-cinematic .hero-scroll::after{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
  .home-cinematic .hero-flourish,
  .home-cinematic .lux-hero h1,
  .home-cinematic .hero-kicker,
  .home-cinematic .hero-subline,
  .home-cinematic .btn-lux{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
}