/* DVSTUDIO V128 — iOS scroll stability + real website previews
   This layer keeps the V127 visual system but removes compositor-heavy
   effects from the Home workflow on touch devices and replaces generic web
   imagery with real production-site screenshots supplied by DVSTUDIO. */

/* ---------------------------------------------------------
   1. REAL WEBSITE PREVIEWS
   --------------------------------------------------------- */
#web-world .browser-content.browser-live-preview{
  aspect-ratio:2.05/1!important;
  background:#061927!important;
}
#web-world .browser-content img.site-preview-screenshot{
  object-fit:cover!important;
  object-position:center top!important;
  filter:none!important;
}
#web-world .browser-dv-live img.site-preview-screenshot,
#web-world .browser-1150-live img.site-preview-screenshot,
#web-world .browser-1370-live img.site-preview-screenshot{
  object-position:center top!important;
}
#web-world .site-preview-shade{
  background:linear-gradient(180deg,rgba(6,25,39,.02),rgba(6,25,39,.10) 58%,rgba(6,25,39,.28))!important;
}
#web-world .site-preview-shade--light{
  background:linear-gradient(180deg,rgba(6,25,39,.01),rgba(6,25,39,.08) 62%,rgba(6,25,39,.25))!important;
}
#web-world .site-preview-cta{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(6,25,39,.90)!important;
}

/* Home Web world now previews the actual DVSTUDIO home page rather than an
   abstract split-color placeholder. */
.home-worlds-nav .world-web::before,
.visual-worlds-nav .world-web::before{
  background:
    linear-gradient(180deg,rgba(6,25,39,.18),rgba(6,25,39,.78)),
    url('../assets/images/web-live/dvstudio-home-960.webp') center top/cover no-repeat!important;
}

/* Client website case studies: actual home-page screenshots, not generic
   venue photography. Keep the complete top navigation visible. */
.client-web-feature-visual{
  min-height:clamp(360px,34vw,520px)!important;
}
.client-web-feature-visual img.client-web-feature-screenshot{
  object-fit:cover!important;
  object-position:center top!important;
}
.client-web-feature-shade{
  background:linear-gradient(180deg,rgba(3,22,16,.01),rgba(3,22,16,.06) 62%,rgba(3,22,16,.24))!important;
}
.client-web-live{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  background:rgba(6,25,39,.90)!important;
}

/* ---------------------------------------------------------
   2. HOME WORKFLOW — IOS / TOUCH COMPOSITOR HARDENING
   --------------------------------------------------------- */
@media (max-width:980px), (hover:none), (pointer:coarse){
  /* WebKit has historically produced artifacts with rounded elements using
     backdrop-filter while scrolling. The same glass appearance is reproduced
     with a translucent gradient, without requiring live backdrop sampling. */
  body[data-page="index.html"] #home-process .workflow-mini{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.038))!important;
    transform:none!important;
    filter:none!important;
    will-change:auto!important;
    transition:none!important;
    isolation:auto!important;
  }
  body[data-page="index.html"] #home-process .workflow-mini::before{
    opacity:0!important;
    display:none!important;
  }
  body[data-page="index.html"] #home-process .workflow-mini::after{
    filter:none!important;
    transform:none!important;
    transition:none!important;
    opacity:.38!important;
    background:linear-gradient(180deg,transparent,rgba(143,201,233,.055))!important;
  }
  body[data-page="index.html"] #home-process .workflow-node i{
    animation:none!important;
    transform:none!important;
    box-shadow:0 0 11px rgba(142,227,182,.35)!important;
  }
  /* Once this section exists on touch, it must never depend on a re-entry
     opacity/transform animation when Safari discards and repaints layers. */
  body[data-page="index.html"] #home-process .reveal,
  body[data-page="index.html"] #home-process .reveal.is-visible{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
    -webkit-clip-path:none!important;
    transition:none!important;
    animation:none!important;
  }
  body[data-page="index.html"] #home-process .workflow-mini *,
  body[data-page="index.html"] #home-process .section-head *{
    -webkit-backface-visibility:visible!important;
    backface-visibility:visible!important;
  }
}

@media (max-width:680px){
  #web-world .browser-content.browser-live-preview{aspect-ratio:1.72/1!important}
  #web-world .browser-content img.site-preview-screenshot{object-position:center top!important}
  .client-web-feature-visual{min-height:300px!important;aspect-ratio:1.55/1!important}
  .client-web-feature-visual img.client-web-feature-screenshot{object-position:center top!important}
}