/* Lui Designs parallax scroll hero.
   Adds the new picture layers and overrides on top of the theme's existing sh- hero styles.
   Loaded only when the hero rewrite in novamira-sandbox/inc-parallax-hero.php is active. */

.sh-hero.nh-hero{display:block;height:520vh}
.sh-hero.nh-hero .sh-stage{height:100vh;height:100svh}

/* One 16:9 plate sized to cover the stage, so every layer shares the same coordinates */
.nh-world{position:absolute;inset:0;will-change:transform;transform-origin:76% 34%}
.nh-plate{position:absolute;left:50%;top:50%;width:max(112vw,calc(112svh * 16 / 9));aspect-ratio:16/9;translate:-50% -50%}
.nh-plate img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;max-width:none}
.nh-after{opacity:0;will-change:opacity}

/* power-on bloom, sitting on the screen inside the plate */
.nh-flare{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;will-change:opacity;
  background:radial-gradient(ellipse 15% 26% at 75.7% 35.4%,rgba(255,190,220,.9),rgba(255,150,190,.45) 42%,rgba(255,150,190,0) 74%)}

/* window light drifting the other way */
.nh-leak{position:absolute;inset:-10% -20%;pointer-events:none;mix-blend-mode:screen;will-change:transform,opacity;
  background:radial-gradient(ellipse 28% 70% at 18% 42%,rgba(255,196,120,.42),rgba(255,196,120,0) 70%)}

.nh-dust{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.nh-dust i{position:absolute;border-radius:50%;background:#ffe9c7;will-change:transform;animation:nh-twinkle 5s ease-in-out infinite}
@keyframes nh-twinkle{0%,100%{opacity:var(--o,.3)}50%{opacity:calc(var(--o,.3)*.35)}}

/* scroll cue and progress line */
.nh-cue{position:absolute;left:28px;bottom:28px;display:flex;align-items:center;gap:12px;color:#fff;font-size:.78rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;text-shadow:var(--sh-tshadow);transition:opacity .4s var(--ease)}
.nh-cue b{display:block;width:1px;height:38px;background:linear-gradient(#fff,rgba(255,255,255,0));animation:nh-cue 1.8s var(--ease) infinite;transform-origin:top}
@keyframes nh-cue{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.nh-prog{position:absolute;right:28px;top:50%;width:2px;height:120px;transform:translateY(-50%);background:rgba(255,255,255,.2);border-radius:2px;overflow:hidden}
.nh-prog i{display:block;width:100%;height:100%;background:#fff;transform-origin:top;transform:scaleY(var(--p,0))}

/* headline weight and button colour that read well on the photo */
.nh-hero .sh-split{font-weight:700;letter-spacing:-.02em}
.nh-hero .sh-band .btn-primary{background:var(--paper);color:var(--ink)}
.nh-hero .sh-band .btn-primary:hover{box-shadow:0 10px 24px rgba(0,0,0,.35)}

/* phones, portrait tablets and reduced motion keep the static hero (same gates as the old scroll engine) */
.sh-static.nh-static{display:none}
.sh-static.nh-static .sh-shot{background-position:78% 38%}
@media (max-width:720px),(orientation:portrait) and (max-width:1024px),(orientation:portrait) and (pointer:coarse),(orientation:landscape) and (pointer:coarse) and (max-height:560px),(prefers-reduced-motion:reduce){
  .sh-hero.nh-hero{display:none}
  .sh-static.nh-static{display:flex}
}
/* on a tall phone screen the picture takes the top part only, so the logo on the monitor stays clear of the text */
@media (orientation:portrait) and (max-width:1024px){
  .sh-static.nh-static .sh-shot{inset:0 0 auto 0;height:60%;background-position:80% 50%;
    -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
}
.sh-static.nh-static .btn{text-shadow:none}
.sh-static.nh-static .btn-primary{background:var(--paper);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.nh-dust i,.nh-cue b{animation:none}}