/* SUUSSTUDIO™ CINEMATIC V4.4 · VISUAL RELEASE POLISH
   Evidence-driven repair after mobile + desktop browser QA. */

/* Never let a scene read as disabled just because its observer threshold is between states. */
.v4-scene:not(.is-active) .v4-scene-head,
.v4-scene:not(.is-active) .v4-work-title{
  opacity:.94!important;
  filter:none!important;
  transform:translateY(4px)!important;
}

/* Content audit stays available without becoming a floating control over every scene. */
.v4-audit-trigger{
  position:absolute!important;
  top:78px!important;
  right:20px!important;
  bottom:auto!important;
  z-index:62!important;
}

/* DRONE: make the actual aircraft visible before the user reaches the lower half of the stage. */
.v4-drone .v4-scene-head{position:relative!important;isolation:isolate}
.v4-drone .v4-scene-head::after{
  content:"";
  position:absolute;
  right:0;
  bottom:-24px;
  width:min(31vw,460px);
  aspect-ratio:16/9;
  z-index:-1;
  background-image:
    linear-gradient(180deg,rgba(2,3,5,.04),rgba(2,3,5,.26)),
    url('/assets/v4/drone-team.webp');
  background-repeat:no-repeat;
  background-size:100% 100%,175% auto;
  background-position:center,50% 100%;
  border:1px solid rgba(96,211,219,.22);
  clip-path:polygon(8% 0,100% 0,100% 82%,92% 100%,0 100%,0 18%);
  box-shadow:0 34px 100px rgba(0,0,0,.55),0 0 60px rgba(122,16,47,.09);
  opacity:.92;
}
.v4-drone .v4-scene-head::before{
  content:"DRONE / MULTI-SENSOR PLATFORM";
  position:absolute;
  right:18px;
  bottom:-10px;
  z-index:2;
  font-size:.47rem;
  letter-spacing:.18em;
  color:rgba(209,246,248,.74);
  text-shadow:0 0 14px rgba(99,215,224,.24);
}
.v4-drone-stage{margin-top:3vh!important}
.v4-drone-stage::after{box-shadow:inset 0 0 120px rgba(0,0,0,.24)}

/* SELECTED WORK: preserve interactive WebGL photography but give portrait work a portrait-minded canvas. */
@media(min-width:761px){
  .v4-hero-copy{grid-column:1/7!important}
  .v4-founder{grid-column:8/13!important;width:min(88%,560px)!important;justify-self:end!important}
  .v4-founder img{aspect-ratio:3/4!important;object-position:center 31%!important}
  .v4-founder::after{content:"";position:absolute;inset:8% -5% -5% 12%;z-index:-2;background:radial-gradient(circle at 72% 38%,rgba(122,16,47,.22),transparent 42%);filter:blur(28px)}

  .v4-work-scene{height:min(88svh,880px)!important;margin-bottom:16vh!important;overflow:visible!important}
  .v4-work-scene>.v4-photo{
    left:auto!important;
    right:5vw!important;
    top:4vh!important;
    bottom:4vh!important;
    width:min(43vw,650px)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 45px 130px rgba(0,0,0,.62),-22px 26px 80px rgba(122,16,47,.09)!important;
    clip-path:polygon(8% 0,100% 0,100% 88%,91% 100%,0 100%,0 12%)!important;
  }
  .v4-work-title{left:5vw!important;right:auto!important;bottom:12vh!important;width:min(39vw,570px)!important;max-width:none!important}
  .v4-work-title h3{font-size:clamp(3rem,5.3vw,6.7rem)!important}
  .v4-work-depth{right:calc(5vw + min(43vw,650px) - 20px)!important;top:2vh!important}
}

/* Keep every information scene premium and readable even outside its exact observer sweet spot. */
.v4-worlds .v4-scene-head,
.v4-systems .v4-scene-head{opacity:1!important;color:#f5f0e9!important}
.v4-worlds .v4-scene-head h2,
.v4-systems .v4-scene-head h2{text-shadow:0 0 42px rgba(122,16,47,.075)}

/* Final scene needs authority, not a barely-visible outline. */
.v4-contact>h3{-webkit-text-stroke:1px rgba(245,240,233,.72)!important;text-shadow:0 0 32px rgba(122,16,47,.09)}
.v4-contact>div a:first-child{color:#f5f0e9!important;border-bottom-color:rgba(104,218,225,.68)!important}

@media(max-width:760px){
  /* Prevent hero-sized display words from escaping the mobile viewport. */
  .v4-scene-head h2{
    font-size:clamp(2.7rem,12.2vw,4.45rem)!important;
    line-height:.88!important;
    max-width:100%!important;
    letter-spacing:-.05em!important;
  }
  .v4-work .v4-scene-head h2,
  .v4-worlds .v4-scene-head h2{
    font-size:clamp(2.6rem,11.65vw,4.25rem)!important;
  }

  .v4-audit-trigger{
    top:66px!important;
    right:12px!important;
    font-size:.43rem!important;
    opacity:.72!important;
  }

  .v4-drone .v4-scene-head{padding-bottom:230px!important}
  .v4-drone .v4-scene-head::after{
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:205px!important;
    aspect-ratio:auto!important;
    background-size:100% 100%,170% auto!important;
    background-position:center,50% 100%!important;
    opacity:1!important;
    z-index:0!important;
  }
  .v4-drone .v4-scene-head::before{right:12px!important;bottom:12px!important;z-index:3!important}
  .v4-drone .v4-scene-head>p,.v4-drone .v4-scene-head>h2,.v4-drone .v4-scene-head>span{position:relative;z-index:2}
  .v4-drone-stage{margin-top:18px!important}

  .v4-work-title h3{font-size:clamp(3rem,14vw,5rem)!important}
  .v4-work-scene>.v4-photo img{object-position:center 28%!important}
  .v4-worlds .v4-scene-head,.v4-systems .v4-scene-head{opacity:1!important}
  .v4-contact>h3{-webkit-text-stroke:1px rgba(245,240,233,.78)!important}
}