/* DEV DOMAIN — AI Sentinel production layer v5 performance
   Additive visual layer. Centered cinematic composition, responsive and non-blocking. */
.dd-sentinel-host{position:relative!important;isolation:isolate;overflow:hidden}
.dd-sentinel-host .container,.dd-sentinel-host .hero-inner,.dd-sentinel-host .hero-content{position:relative;z-index:3}
.dd-sentinel-host::after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  left:50%;top:50%;width:min(930px,78vw);height:min(430px,58vh);transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(7,13,19,.12) 0 28%,rgba(7,13,19,.30) 56%,rgba(7,13,19,.08) 72%,transparent 86%);
  filter:blur(4px);
}
.dd-sentinel-layer{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;contain:layout paint style}
.dd-sentinel{
  --dd-follow-x:0px;--dd-follow-y:0px;--dd-tilt-x:0deg;--dd-tilt-y:0deg;--dd-light-x:50%;--dd-light-y:50%;
  position:absolute;left:50%;top:52%;right:auto;bottom:auto;
  width:clamp(620px,57vw,880px);aspect-ratio:760/620;
  transform:translate3d(calc(-50% + var(--dd-follow-x)),calc(-50% + var(--dd-follow-y)),0)
            perspective(1300px) rotateX(var(--dd-tilt-x)) rotateY(var(--dd-tilt-y));
  transform-style:preserve-3d;will-change:transform;opacity:.32;
  filter:saturate(1.12) contrast(1.045);
}
.dd-sentinel::before{
  content:"";position:absolute;inset:10% 13%;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle at var(--dd-light-x) var(--dd-light-y),rgba(128,241,255,.20),rgba(55,174,255,.07) 30%,rgba(107,94,255,.04) 48%,transparent 72%);
  filter:blur(12px);transform:translateZ(-60px) scale(1.08);
}
.dd-sentinel-svg{display:block;width:100%;height:auto;overflow:visible;transform:translateZ(0)}
.dd-sentinel-halo{animation:ddSentinelHalo 4.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.dd-sentinel-frame{animation:ddSentinelFrame 4.2s ease-in-out infinite}
.dd-sentinel-lid-top,.dd-sentinel-lid-bottom{transform-box:fill-box;transform-origin:center;will-change:transform}
.dd-sentinel-lid-top{animation:ddSentinelLidTop 5.4s ease-in-out infinite}
.dd-sentinel-lid-bottom{animation:ddSentinelLidBottom 5.4s ease-in-out infinite}
.dd-sentinel-iris-shell{filter:none}
.dd-sentinel-iris{transform-box:fill-box;transform-origin:center;animation:ddSentinelIrisBreath 4.8s ease-in-out infinite}
.dd-sentinel-rings{transform-box:fill-box;transform-origin:center;animation:ddSentinelIrisRotate 19s linear infinite}
.dd-sentinel-pupil{will-change:transform;filter:drop-shadow(0 0 6px rgba(114,232,255,.55)) drop-shadow(0 0 3px rgba(240,255,255,.6))}
.dd-sentinel-scanner{transform-box:fill-box;transform-origin:center;animation:ddSentinelScanner 3.55s cubic-bezier(.45,.05,.55,.95) infinite;filter:drop-shadow(0 0 8px rgba(130,242,255,.72))}
.dd-sentinel-scanner-soft{transform-box:fill-box;transform-origin:center;animation:ddSentinelScanner 3.35s cubic-bezier(.45,.05,.55,.95) infinite;opacity:.32}
.dd-sentinel-shield{animation:ddSentinelShield 2.9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.dd-sentinel-lock{animation:ddSentinelLock 2.9s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.dd-sentinel-node{animation:ddSentinelNode 2.5s ease-in-out infinite}.dd-sentinel-node.n2{animation-delay:-.7s}.dd-sentinel-node.n3{animation-delay:-1.3s}.dd-sentinel-node.n4{animation-delay:-1.9s}
.dd-sentinel-micro{stroke-dasharray:8 11;animation:ddSentinelDash 6.4s linear infinite}
.dd-sentinel-cursor-aura{will-change:transform}
.dd-sentinel-host:hover .dd-sentinel{opacity:.37}

/* Service pages often have shorter/denser hero copy. */
.svc-hero.dd-sentinel-host .dd-sentinel{top:54%;width:clamp(560px,53vw,800px);opacity:.28}
body.dd-sentinel-compact .dd-sentinel{width:clamp(480px,48vw,700px);opacity:.19}

@keyframes ddSentinelHalo{0%,100%{opacity:.72;transform:scale(1)}50%{opacity:1;transform:scale(1.045)}}
@keyframes ddSentinelFrame{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes ddSentinelLidTop{0%,100%{transform:rotate(-.35deg) translateY(0)}50%{transform:rotate(1.45deg) translateY(-3px)}}
@keyframes ddSentinelLidBottom{0%,100%{transform:rotate(.25deg) translateY(0)}50%{transform:rotate(-1.05deg) translateY(2px)}}
@keyframes ddSentinelIrisBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes ddSentinelIrisRotate{to{transform:rotate(360deg)}}
@keyframes ddSentinelScanner{0%{transform:translateY(-126px);opacity:.10}12%{opacity:.72}44%{opacity:1}50%{transform:translateY(0);opacity:1}84%{opacity:.82}100%{transform:translateY(126px);opacity:.08}}
@keyframes ddSentinelShield{0%,100%{transform:scale(.98);filter:brightness(1)}50%{transform:scale(1.09);filter:brightness(1.16)}}
@keyframes ddSentinelLock{0%,100%{transform:scale(.99);filter:brightness(1)}50%{transform:scale(1.06);filter:brightness(1.22)}}
@keyframes ddSentinelNode{0%,100%{opacity:.24;transform:scale(.8)}50%{opacity:1;transform:scale(1.35)}}
@keyframes ddSentinelDash{to{stroke-dashoffset:-76}}

/* Notebook: keep cinematic center, slightly smaller and lower. */
@media (max-width:1280px){
  .dd-sentinel{top:54%;width:clamp(550px,60vw,750px);opacity:.29}
  .svc-hero.dd-sentinel-host .dd-sentinel{top:56%;width:clamp(510px,58vw,700px);opacity:.25}
  .dd-sentinel-host::after{width:min(820px,82vw);height:390px}
}

/* Tablet landscape: eye becomes a wide background signature behind the lower copy. */
@media (max-width:980px){
  .dd-sentinel,.svc-hero.dd-sentinel-host .dd-sentinel,body.dd-sentinel-compact .dd-sentinel{
    left:50%;top:63%;width:min(84vw,650px);opacity:.24;
  }
  .svc-hero.dd-sentinel-host .dd-sentinel{top:64%;opacity:.22}
  .dd-sentinel-host::after{top:58%;width:88vw;height:350px;background:radial-gradient(ellipse at center,rgba(7,13,19,.20),rgba(7,13,19,.42) 62%,transparent 84%)}
}

  body.dd-sentinel-compact .dd-sentinel{bottom:-50px;width:104vw;opacity:.16}
  .dd-sentinel-node.n1,.dd-sentinel-node.n4,.dd-sentinel-micro{display:none}
  .dd-sentinel-shield,.dd-sentinel-lock{filter:none}
}


/* Extra breakpoint polish for very large and very small displays. */
@media (min-width:1600px){
  .dd-sentinel{width:min(54vw,900px);top:51%;opacity:.33}
  .svc-hero.dd-sentinel-host .dd-sentinel{width:min(50vw,810px);top:53%;opacity:.29}
}
  .dd-sentinel-node,.dd-sentinel-network{opacity:.22}
}

/* Reduced motion keeps cursor/touch gaze available; only ambient cycles are slowed. */
@media (prefers-reduced-motion:reduce){
  .dd-sentinel-halo,.dd-sentinel-frame,.dd-sentinel-lid-top,.dd-sentinel-lid-bottom,.dd-sentinel-iris,.dd-sentinel-rings,.dd-sentinel-scanner,.dd-sentinel-scanner-soft,.dd-sentinel-shield,.dd-sentinel-lock,.dd-sentinel-node,.dd-sentinel-micro{animation-duration:12s!important}
}

/* Performance controls */
.dd-sentinel-layer.dd-sentinel-paused *{animation-play-state:paused!important}
.dd-sentinel-layer.dd-sentinel-paused{visibility:hidden}

/* Mobile policy: the approved Sentinel is intentionally disabled on phones.
   It is not rendered by JS below this breakpoint; this CSS is a safety fallback. */
@media (max-width:900px), (hover:none) and (pointer:coarse){
  .dd-sentinel-layer,.dd-sentinel-host::after{display:none!important}
}