/* SENTINEL — PRESENCE LAYER V2
 * Lineage: CoderWeb REWORK-2 (646f1b8b…) -> REWORK-3 delta (dbf87c60…)
 *
 * Rework-3 proved a materially cheaper construction of the same picture. The
 * geometry, accents and timing below are unchanged from Phase-5; what changed
 * is how the browser is asked to draw them:
 *   - three narrow transform channels (env / head / eye) instead of nine custom
 *     properties written on the stage root every frame
 *   - will-change:auto at rest; promotion only while an interaction runs
 *   - breathing is one compositor keyframe, not a term inside the pointer loop
 *   - gate plane is a 2D ellipse skew, not a rotateY perspective leaf
 *   - static foreground uses z-index for paint order, not translateZ
 *   - no preserve-3d around static children
 */

.sp-stage{
  position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
  contain:layout paint style;
  --sp-accent:#7fe7ff; --sp-accent-soft:rgba(127,231,255,.34);
}
[data-world="personal"]     .sp-stage{--sp-accent:#9b8cf0;--sp-accent-soft:rgba(155,140,240,.34)}
[data-world="family"]       .sp-stage{--sp-accent:#f0b45c;--sp-accent-soft:rgba(240,180,92,.32)}
[data-world="senior"]       .sp-stage{--sp-accent:#79d9b4;--sp-accent-soft:rgba(121,217,180,.32)}
[data-world="organization"] .sp-stage{--sp-accent:#6fb2e8;--sp-accent-soft:rgba(111,178,232,.34)}

.sp-field{position:absolute;inset:0 0 0 40%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.35) 82%,transparent 96%);
          mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.35) 82%,transparent 96%)}

/* ---------------------------------------------- channel 1 of 3: environment */
.sp-env{position:absolute;inset:0;transform-origin:55% 50%;will-change:auto}
.sp-portal{position:absolute;left:50%;top:50%;width:min(64vw,860px);aspect-ratio:1.08/1;opacity:.92;
  transform:translate(-47%,-49%) rotate(-4deg)}
.sp-ring{position:absolute;left:50%;top:50%;display:block;border-radius:50%;
  border:1px solid var(--sp-accent-soft);transform:translate(-50%,-50%)}
.sp-ring.r1{width:92%;height:78%}
.sp-ring.r2{width:70%;height:60%;border-style:dashed;opacity:.72}
.sp-axis{position:absolute;display:block;background:rgba(130,220,255,.16)}
.sp-axis.h{left:7%;right:7%;top:50%;height:1px}
.sp-axis.v{top:9%;bottom:9%;left:50%;width:1px}
.sp-core{position:absolute;left:50%;top:50%;width:min(42vw,590px);aspect-ratio:1.16/1;
  transform:translate(-45%,-49%);border-radius:50%;
  background:radial-gradient(ellipse at 55% 48%,rgba(229,253,255,.18),rgba(65,171,226,.07) 33%,rgba(4,18,28,.80) 64%,transparent 78%);
  box-shadow:inset 0 0 0 1px rgba(185,242,255,.07)}
.sp-plane{position:absolute;left:50%;top:50%;width:min(43vw,610px);aspect-ratio:1.17/1;
  transform:translate(-45%,-49%) rotate(-2deg) scaleX(.985);
  border:1px solid rgba(185,240,255,.11);border-radius:50%}

/* ----------------------------------------------------- channel 2 of 3: head */
.sp-head{position:absolute;left:50%;top:5%;width:min(66vw,860px);aspect-ratio:4096/3579;
  transform:translate3d(0,0,0);transform-origin:60% 48%;will-change:auto}
.sp-breath{position:absolute;inset:0;transform-origin:60% 56%;animation:sp-breath 4.8s ease-in-out infinite}
@keyframes sp-breath{0%,100%{transform:translate3d(0,-.5px,0) scale(1)}50%{transform:translate3d(0,1.2px,0) scale(1.0018)}}
.sp-rig{position:absolute;inset:0;transform:translate(-43%,0);contain:layout paint}
.sp-face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}

/* ------------------------------------------------------ channel 3 of 3: eye */
.sp-eye,.sp-mouth{position:absolute;height:auto;user-select:none;-webkit-user-drag:none;will-change:auto;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 42%,transparent 76%);
          mask-image:radial-gradient(ellipse at center,#000 42%,transparent 76%)}
.sp-eye{left:63.2%;top:33.7%;width:18.1%;z-index:4}
.sp-mouth{left:63.1%;top:71.8%;width:21.1%;z-index:5;transform-origin:50% 50%}
.sp-lid{position:absolute;z-index:6;left:64.6%;top:41%;width:15.7%;height:3.6%;border-radius:50%;
  opacity:0;transform:scaleY(.05);transform-origin:center;will-change:auto;
  background:linear-gradient(180deg,rgba(20,45,64,0),rgba(28,61,82,.88) 52%,rgba(90,148,178,0))}
.sp-lid[data-blink="true"]{animation:sp-blink .22s ease-in-out}
@keyframes sp-blink{0%,100%{opacity:0;transform:scaleY(.05)}40%,64%{opacity:.96;transform:scaleY(1)}}

/* -------------------------------------------- signal language (state-driven) */
.sp-signal{position:absolute;inset:0;z-index:7;pointer-events:none}
.sp-line{position:absolute;height:1px;transform-origin:left center;opacity:.5;
  background:linear-gradient(90deg,rgba(238,253,255,.10),rgba(222,252,255,.80),rgba(111,209,255,.14));
  transition:opacity .34s cubic-bezier(.22,.61,.36,1)}
.sp-line.s1{left:63%;top:31%;width:16%;transform:rotate(-22deg)}
.sp-line.s2{left:70%;top:47%;width:15%;transform:rotate(8deg)}
.sp-line.s3{left:67%;top:62%;width:15%;transform:rotate(28deg)}
.sp-dot{position:absolute;width:4px;height:4px;border-radius:50%;background:#efffff;opacity:.5;
  box-shadow:0 0 8px var(--sp-accent-soft);transition:opacity .3s ease,transform .3s ease}
.sp-dot.d1{left:74%;top:34%} .sp-dot.d2{left:80%;top:49%} .sp-dot.d3{left:84%;top:63%}
.sp-signal[data-signal-state="POINTER_PROXIMITY"] .sp-line{opacity:.78}
.sp-signal[data-signal-state="POINTER_PROXIMITY"] .sp-dot{opacity:.84;transform:scale(1.15)}
.sp-signal[data-signal-state="ACTIVATION"] .sp-dot{opacity:1;transform:scale(1.35)}
.sp-signal[data-signal-state="ACTIVATION"] .sp-line{opacity:.9}
.sp-signal[data-signal-state="SIGNAL_TRAVEL"] .sp-line{opacity:.95}
.sp-signal[data-signal-state="EVIDENCE_SEAL"] .sp-dot.d2{opacity:1;transform:scale(1.5);box-shadow:0 0 16px var(--sp-accent)}
.sp-signal[data-signal-state="MEMORY_PERSIST"] .sp-dot{opacity:.92}
.sp-signal[data-signal-state="WORLD_HANDOFF"] .sp-line{opacity:1}

/* ------------------------------------------- foreground (z-index, no depth) */
.sp-front{position:absolute;inset:0;z-index:9;pointer-events:none}
.sp-arcs{position:absolute;left:50%;top:50%;width:min(64vw,860px);aspect-ratio:1.11/1;
  transform:translate(-47%,-49%);overflow:visible}
.sp-arc{fill:none;stroke:rgba(216,250,255,.70);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.sp-arc.a1{stroke:rgba(226,253,255,.86)} .sp-arc.a2{stroke:var(--sp-accent-soft)}
.sp-spill{position:absolute;z-index:3;right:-10%;bottom:-8%;width:68%;height:46%;transform:rotate(-9deg);opacity:.74;
  background:radial-gradient(ellipse at 55% 42%,rgba(205,250,255,.17),rgba(102,204,255,.06) 30%,transparent 68%)}

/* ------------------------------------------------------------ welcome panel */
.sp-welcome{position:absolute;z-index:12;right:clamp(22px,5vw,82px);bottom:34%;
  width:min(330px,26vw);padding:16px 18px;opacity:.94;pointer-events:auto;
  border-left:2px solid var(--sp-accent);border-radius:0 10px 10px 0;
  background:linear-gradient(90deg,rgba(4,9,15,.93),rgba(4,9,15,.78) 62%,rgba(4,9,15,.55));
  box-shadow:0 18px 44px rgba(0,0,0,.34)}
.sp-welcome strong{display:block;font:700 .7rem/1 Sora,sans-serif;letter-spacing:.15em;color:var(--sp-accent);margin-bottom:7px}
.sp-welcome span{font-size:clamp(.86rem,.95vw,1rem);line-height:1.55;color:#eaf4fb}

/* --------------------------------------------------- scroll reveal + depth */
.sp-reveal{opacity:0;transform:translate(0,20px)}
.sp-reveal[data-revealed="true"]{opacity:1;transform:none;
  transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
.sp-tilt{transition:box-shadow .25s ease,border-color .25s ease}
.sp-tilt[data-active="true"]{will-change:transform}
.sp-mag[data-active="true"]{will-change:transform}

/* ------------------------------------------------------------ site cursor */
.sp-cursor{position:fixed;z-index:60;width:24px;height:24px;margin:-12px 0 0 -12px;
  border:1px solid rgba(216,250,255,.72);border-radius:50%;pointer-events:none;opacity:0;
  transform:translate3d(-40px,-40px,0);will-change:transform,opacity}
.sp-cursor:before,.sp-cursor:after{content:"";position:absolute;background:var(--sp-accent-soft)}
.sp-cursor:before{left:50%;top:7px;bottom:7px;width:1px}
.sp-cursor:after{top:50%;left:7px;right:7px;height:1px}
@media (pointer:coarse){ .sp-cursor{display:none} }

/* ------------------------------------------------------------- responsive */
@media (max-width:900px){
  .sp-field{inset:0;opacity:.34;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 32%,transparent 60%);
            mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 32%,transparent 60%)}
  .sp-head{width:150vw;left:52%;top:-4%}
  .sp-welcome{display:none}
}

/* ------------------------------------------------------------ safety nets */
html:not(.js) .sp-stage{opacity:.32}
html:not(.js) .sp-reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sp-env,.sp-head,.sp-eye,.sp-mouth{transform:none!important;will-change:auto!important}
  .sp-breath,.sp-lid{animation:none!important}
  .sp-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .sp-cursor{display:none!important}
  .sp-tilt{transform:none!important}
}
.sp-stage{display:block}
html[data-tier="low"] .sp-stage{display:block}
html[data-tier="low"] .sp-env,html[data-tier="low"] .sp-head,
html[data-tier="low"] .sp-eye,html[data-tier="low"] .sp-mouth{transform:none!important;will-change:auto!important}
html[data-tier="low"] .sp-head{left:50%;top:8%;transform:translate3d(0,0,0)!important}
html[data-tier="low"] .sp-breath{animation:none!important}
html[data-tier="low"] .sp-cursor{display:none!important}

/* ------------------------------------------------ world hero composition */
/* The four world routes inherit a hero foreground panel from the frozen world
   architecture. On Phase-5 the presence field started at 40% like the universal
   route, which put the panel directly over the face — "hero + woman layer on
   top" instead of one composed hero. The world variant therefore yields the
   middle band to the panel and seats the face in the far-right column, so the
   two read as foreground and depth rather than as a collision. */
body[data-world="personal"] .sp-field,
body[data-world="family"] .sp-field,
body[data-world="senior"] .sp-field,
body[data-world="organization"] .sp-field{inset:0 -6% 0 56%}
body[data-world="personal"] .sp-head,
body[data-world="family"] .sp-head,
body[data-world="senior"] .sp-head,
body[data-world="organization"] .sp-head{left:66%;top:2%;width:min(46vw,660px)}
body[data-world="personal"] .sp-portal,
body[data-world="family"] .sp-portal,
body[data-world="senior"] .sp-portal,
body[data-world="organization"] .sp-portal{width:min(44vw,620px);opacity:.7}
body[data-world="personal"] .sp-core,
body[data-world="family"] .sp-core,
body[data-world="senior"] .sp-core,
body[data-world="organization"] .sp-core{width:min(30vw,430px);opacity:.8}
body[data-world="personal"] .sp-plane,
body[data-world="family"] .sp-plane,
body[data-world="senior"] .sp-plane,
body[data-world="organization"] .sp-plane{width:min(31vw,450px)}
body[data-world="personal"] .sp-arcs,
body[data-world="family"] .sp-arcs,
body[data-world="senior"] .sp-arcs,
body[data-world="organization"] .sp-arcs{width:min(44vw,620px)}
/* the signal lane follows the face into the right column */
body[data-world="personal"] .sp-signal,
body[data-world="family"] .sp-signal,
body[data-world="senior"] .sp-signal,
body[data-world="organization"] .sp-signal{left:14%}

@media (max-width:900px){
  body[data-world="personal"] .sp-field,
  body[data-world="family"] .sp-field,
  body[data-world="senior"] .sp-field,
  body[data-world="organization"] .sp-field{inset:0}
  body[data-world="personal"] .sp-head,
  body[data-world="family"] .sp-head,
  body[data-world="senior"] .sp-head,
  body[data-world="organization"] .sp-head{width:150vw;left:52%;top:-4%}
}

/* ------------------------------------------- inherited Phase-3 promotions */
/* The presence layer contributes exactly one promoted node at rest (the
   cursor). The remaining permanent `will-change` declarations come from the
   Phase-3 stylesheet, which promotes seven structural containers for the whole
   life of the page whether or not anything is animating them. Rework-3's rule
   is "no permanent will-change without active interaction"; applying it here
   costs nothing visually because none of these containers animate at rest. */
/* The declaration is `html[data-motion="on"] [data-reveal]{will-change:transform}`
   — specificity (0,2,1), so it has to be answered at the same weight. Every
   [data-reveal] container in the document is promoted from first paint and
   stays promoted forever, even after its reveal has finished. */
html[data-motion="on"] [data-reveal]{will-change:auto}