/* Slovra V6 — PART 1.9 Hero controls + motion polish
   Compact CTA, dot navigation and non-interactive ambient motion layers. */

/* Give every slide a protected content zone so CTA and navigation never collide. */
#screen-home.slovra-home-simple .hero-banner,
#screen-home .slovra-hero-slider,
#screen-home .slovra-hero-slides,
#screen-home .slovra-hero-slide{
  min-height:258px!important;
}
#screen-home .slovra-hero-slides,
#screen-home .slovra-hero-slide{
  height:258px!important;
}
#screen-home .slovra-hero-slide{
  position:relative!important;
  overflow:hidden!important;
  padding-top:26px!important;
  padding-bottom:34px!important;
}
#screen-home .slovra-hero-copy,
#screen-home .slovra-hero-visual{
  position:relative!important;
  z-index:3!important;
}

/* CTA is a compact chip, never a wide slab. */
#screen-home .slovra-hero-cta{
  width:max-content!important;
  max-width:calc(100% - 12px)!important;
  min-height:34px!important;
  padding:0 12px!important;
  margin:13px 0 8px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  font:800 10.5px/1 'Nunito',system-ui,sans-serif!important;
  box-shadow:0 8px 20px rgba(0,0,0,.14)!important;
  position:relative!important;
  z-index:8!important;
}
#screen-home .slovra-hero-cta .slovra-icon{
  width:13px!important;
  height:13px!important;
  flex:0 0 13px!important;
}

/* Dot navigation: centered, tiny and detached from CTA/content. */
#screen-home .slovra-hero-nav{
  left:50%!important;
  right:auto!important;
  bottom:13px!important;
  width:auto!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  grid-template-columns:none!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:5px 8px!important;
  border-radius:999px!important;
  background:rgba(17,17,20,.16)!important;
  backdrop-filter:blur(8px)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)!important;
}
#screen-home .slovra-hero-nav button{
  width:7px!important;
  min-width:7px!important;
  height:7px!important;
  flex:0 0 7px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.42)!important;
  box-shadow:none!important;
  overflow:visible!important;
  transition:width .25s ease,background .25s ease,transform .25s ease,box-shadow .25s ease!important;
}
#screen-home .slovra-hero-nav button::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}
#screen-home .slovra-hero-nav button.is-active{
  width:20px!important;
  flex-basis:20px!important;
  background:#fff!important;
  box-shadow:0 0 14px rgba(255,255,255,.34)!important;
}
#screen-home .slovra-hero-nav button:hover{
  transform:scale(1.14)!important;
  background:rgba(255,255,255,.78)!important;
}

/* Video-like ambient layer: soft rising lights and a moving light grid.
   Purely decorative and pointer-events:none. */
#screen-home .slovra-hero-slide::before,
#screen-home .slovra-hero-slide::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:1;
}
#screen-home .slovra-hero-slide::before{
  inset:-34% -12% -26%;
  opacity:.34;
  background:
    radial-gradient(circle at 12% 80%,rgba(255,255,255,.30) 0 3px,transparent 4px),
    radial-gradient(circle at 29% 64%,rgba(255,255,255,.16) 0 5px,transparent 6px),
    radial-gradient(circle at 48% 88%,rgba(255,255,255,.20) 0 2px,transparent 3px),
    radial-gradient(circle at 69% 68%,rgba(255,255,255,.18) 0 4px,transparent 5px),
    radial-gradient(circle at 86% 84%,rgba(255,255,255,.24) 0 3px,transparent 4px),
    radial-gradient(ellipse at 58% 92%,rgba(255,255,255,.10),transparent 34%);
  filter:blur(.2px);
  animation:slovraHeroRise 8.5s linear infinite;
}
#screen-home .slovra-hero-slide::after{
  left:-10%;right:-10%;bottom:-48%;height:78%;
  opacity:.13;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.38) 0 1px,transparent 1px 54px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.26) 0 1px,transparent 1px 38px);
  transform:perspective(300px) rotateX(64deg) translateY(16px);
  transform-origin:center bottom;
  mask-image:linear-gradient(to top,#000,transparent 92%);
  animation:slovraHeroGridRise 6.8s linear infinite;
}
@keyframes slovraHeroRise{
  0%{transform:translate3d(0,38px,0);opacity:.12}
  22%{opacity:.34}
  100%{transform:translate3d(0,-78px,0);opacity:.04}
}
@keyframes slovraHeroGridRise{
  0%{background-position:0 0,0 0;transform:perspective(300px) rotateX(64deg) translateY(20px)}
  100%{background-position:54px -76px,0 -76px;transform:perspective(300px) rotateX(64deg) translateY(-8px)}
}

/* Subtle moving highlight on the visual tile; not on the CTA. */
#screen-home .slovra-hero-orb{
  overflow:hidden!important;
}
#screen-home .slovra-hero-orb::before{
  content:"";
  position:absolute;
  width:38%;height:150%;top:-25%;left:-65%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  transform:skewX(-16deg);
  animation:slovraHeroOrbShine 5.2s ease-in-out infinite;
}
@keyframes slovraHeroOrbShine{
  0%,24%{left:-65%;opacity:0}
  38%{opacity:.8}
  64%{left:130%;opacity:.16}
  65%,100%{left:130%;opacity:0}
}

/* Light mode: dots remain visible without turning into a detached white strip. */
body.light-mode #screen-home .slovra-hero-nav,
body.light #screen-home .slovra-hero-nav{
  background:rgba(26,22,34,.13)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important;
}

@media(max-width:920px){
  #screen-home.slovra-home-simple .hero-banner,
  #screen-home .slovra-hero-slider,
  #screen-home .slovra-hero-slides,
  #screen-home .slovra-hero-slide{min-height:270px!important}
  #screen-home .slovra-hero-slides,
  #screen-home .slovra-hero-slide{height:270px!important}
  #screen-home .slovra-hero-slide{padding-bottom:34px!important}
}

@media(max-width:720px){
  #screen-home.slovra-home-simple .hero-banner,
  #screen-home .slovra-hero-slider,
  #screen-home .slovra-hero-slides,
  #screen-home .slovra-hero-slide{
    min-height:292px!important;
  }
  #screen-home .slovra-hero-slides,
  #screen-home .slovra-hero-slide{
    height:292px!important;
  }
  #screen-home .slovra-hero-slide{
    padding:20px 16px 36px!important;
    align-content:center!important;
  }
  #screen-home .slovra-hero-copy{
    padding-right:58px!important;
  }
  #screen-home .slovra-hero-slide p{
    margin-top:8px!important;
    line-height:1.38!important;
  }
  #screen-home .slovra-hero-progress-wrap{
    margin-top:11px!important;
  }
  #screen-home .slovra-hero-cta{
    min-height:30px!important;
    padding:0 10px!important;
    margin:10px 0 5px!important;
    font-size:9.5px!important;
    box-shadow:0 6px 15px rgba(0,0,0,.12)!important;
  }
  #screen-home .slovra-hero-cta .slovra-icon{
    width:12px!important;height:12px!important;flex-basis:12px!important;
  }
  #screen-home .slovra-hero-nav{
    left:50%!important;right:auto!important;bottom:10px!important;
    gap:7px!important;padding:4px 7px!important;
  }
  #screen-home .slovra-hero-nav button{
    width:6px!important;min-width:6px!important;height:6px!important;flex-basis:6px!important;
  }
  #screen-home .slovra-hero-nav button.is-active{
    width:17px!important;flex-basis:17px!important;
  }
  #screen-home .slovra-hero-slide::after{
    opacity:.09;
  }
}

@media(max-width:420px){
  #screen-home .slovra-hero-copy{padding-right:48px!important}
  #screen-home .slovra-hero-cta{font-size:9px!important;min-height:29px!important}
}

@media(prefers-reduced-motion:reduce){
  #screen-home .slovra-hero-slide::before,
  #screen-home .slovra-hero-slide::after,
  #screen-home .slovra-hero-orb::before{
    animation:none!important;
  }
}
body.slovra-reduce-motion #screen-home .slovra-hero-slide::before,
body.slovra-reduce-motion #screen-home .slovra-hero-slide::after,
body.slovra-reduce-motion #screen-home .slovra-hero-orb::before{
  animation:none!important;
}