/* PROJECT 0 v5.1 — Interactive Rhythm Layer
   Reference principle: continuous, tactile feedback at the entry and protocol only.
   Puzzle pages intentionally remain quiet. */
:root{
  --gimmick-x:50vw;
  --gimmick-y:50vh;
}
body.entry-revised,
body.protocol-interactive{
  cursor:crosshair;
}
.kinetic-field{
  position:fixed;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.72;
}
.pointer-aura{
  position:fixed;
  left:var(--gimmick-x);
  top:var(--gimmick-y);
  width:320px;
  height:320px;
  z-index:1;
  pointer-events:none;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(197,255,74,.055),rgba(197,255,74,.018) 28%,transparent 68%);
  opacity:0;
  transition:opacity .4s;
}
body.pointer-awake .pointer-aura{opacity:1}
.entry-revised .observation-entry{z-index:2}
.entry-revised .law-field{perspective:1000px}
.entry-revised .law-fragment{
  will-change:transform;
  transform:translate3d(var(--shift-x,0),var(--shift-y,0),0);
}
.entry-revised .law-fragment::after{
  content:"";
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  opacity:.22;
  box-shadow:0 0 18px currentColor;
  transform:translate(10px,-2px);
}
.entry-revised .entry-threshold::before,
.entry-revised .entry-threshold::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(197,255,74,.16);
  border-radius:50%;
  transform:scale(.4);
  opacity:0;
  transition:transform .8s var(--ease-liminal),opacity .45s;
}
.entry-revised .entry-threshold::after{transition-delay:.08s}
.entry-revised .entry-threshold:hover::before,
.entry-revised .entry-threshold.active::before{transform:scale(.88);opacity:.8}
.entry-revised .entry-threshold:hover::after,
.entry-revised .entry-threshold.active::after{transform:scale(1.22);opacity:.28}
.entry-revised .entry-observe{z-index:2}
.entry-revised .entry-observe::before{
  content:"";
  position:absolute;
  inset:-20px;
  border-radius:50%;
  background:conic-gradient(from var(--ring-angle,0deg),transparent 0 72%,rgba(197,255,74,.75) 82%,transparent 92%);
  mask:radial-gradient(circle,transparent 61%,#000 63% 67%,transparent 69%);
  opacity:0;
  transition:opacity .3s;
  animation:orbitRing 7s linear infinite;
}
.entry-revised .entry-threshold:hover .entry-observe::before,
.entry-revised .entry-threshold.active .entry-observe::before{opacity:1}
@keyframes orbitRing{to{transform:rotate(360deg)}}
.entry-revised.is-entering .law-fragment{
  transition:transform .72s var(--ease-liminal),opacity .55s!important;
  transform:translate3d(calc(50vw - var(--self-x,50vw)),calc(50vh - var(--self-y,50vh)),0) scale(.15)!important;
  opacity:0!important;
}
.entry-revised.is-entering .observation-sequence,
.entry-revised.is-entering .entry-false-actions,
.entry-revised.is-entering .entry-footnote{opacity:0;transition:opacity .35s}
.entry-revised.is-entering .entry-threshold{transform:translate(-50%,-50%) scale(3);opacity:0;transition:transform .75s var(--ease-liminal),opacity .55s}

/* Protocol: dense interactivity only in navigation/selection space */
.protocol-interactive::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(520px circle at var(--gimmick-x) var(--gimmick-y),rgba(197,255,74,.045),transparent 72%),
    linear-gradient(90deg,transparent 49.95%,rgba(135,147,159,.04) 50%,transparent 50.05%);
}
.protocol-interactive .wrap{z-index:2}
.protocol-interactive .protocol-babel-grid{
  counter-reset:observations;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  border:1px solid rgba(135,147,159,.16);
  background:rgba(135,147,159,.16);
}
.protocol-interactive .protocol-babel-grid .card{
  counter-increment:observations;
  border:0;
  border-radius:0;
  min-height:310px;
  background:rgba(5,6,8,.94);
  transform:none!important;
  transition:background .3s,border-color .3s;
  transform-style:preserve-3d;
}
.protocol-interactive .protocol-babel-grid .card::after{
  content:"0" counter(observations);
  position:absolute;
  right:24px;
  top:22px;
  color:rgba(230,237,242,.16);
  font:500 clamp(42px,7vw,84px)/1 ui-monospace,monospace;
  letter-spacing:-.08em;
  transition:color .3s,transform .45s var(--ease-liminal);
}
.protocol-interactive .protocol-babel-grid .card:hover,
.protocol-interactive .protocol-babel-grid .card:focus-visible{
  background:linear-gradient(145deg,rgba(15,20,26,.98),rgba(5,6,8,.98));
}
.protocol-interactive .protocol-babel-grid .card:hover::after{color:rgba(197,255,74,.68);transform:translateY(-5px)}
.protocol-interactive .protocol-babel-grid .card h2,
.protocol-interactive .protocol-babel-grid .card p,
.protocol-interactive .protocol-babel-grid .card span{position:relative;z-index:2;transform:translateZ(18px)}
.protocol-interactive .protocol-babel-grid .card .card-signal{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  transform:scaleX(0);
  transform-origin:left;
  background:var(--signal);
  transition:transform .55s var(--ease-liminal);
}
.protocol-interactive .protocol-babel-grid .card:hover .card-signal{transform:scaleX(1)}
.protocol-interactive .protocol-babel-grid .card .card-coordinates{
  position:absolute;
  right:24px;
  bottom:22px;
  color:#64707a;
  font:9px ui-monospace,monospace;
  letter-spacing:.12em;
  opacity:0;
  transition:opacity .2s;
}
.protocol-interactive .protocol-babel-grid .card:hover .card-coordinates{opacity:1}
.route-transition{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  display:grid;
  place-items:center;
  background:#050608;
  clip-path:circle(0 at var(--route-x,50%) var(--route-y,50%));
  transition:clip-path .72s var(--ease-liminal);
}
.route-transition.open{clip-path:circle(150% at var(--route-x,50%) var(--route-y,50%))}
.route-transition span{color:var(--signal);font:10px ui-monospace,monospace;letter-spacing:.28em;opacity:0;transition:opacity .25s .28s}
.route-transition.open span{opacity:1}

@media(max-width:760px){
  .kinetic-field{opacity:.46}
  .pointer-aura{display:none}
  .entry-revised .law-fragment{transform:none!important}
  .protocol-interactive .protocol-babel-grid{grid-template-columns:1fr}
  .protocol-interactive .protocol-babel-grid .card{min-height:230px}
  .protocol-interactive .protocol-babel-grid .card::after{font-size:52px}
}
@media(prefers-reduced-motion:reduce){
  .kinetic-field,.pointer-aura{display:none}
  .entry-revised .law-fragment{transform:none!important}
  .entry-revised .entry-observe::before{animation:none}
  .route-transition{transition:none}
}