/* ============================================================
   Cortex Laboratory — wormhole transition layer
   Nothing in this file renders while the page is at rest.
   ============================================================ */

/* ---------- full-viewport render surface ---------- */
.wormhole-canvas{
  display:none;
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:24;
  background:transparent;
}
.wormhole-canvas.active{display:block}

/* Visible only in the local inspection mode, for identifying recordings. */
.preview-status{
  position:fixed;left:10px;bottom:10px;z-index:40;pointer-events:none;
  padding:7px 10px;border-left:2px solid #ff149f;background:rgba(0,0,0,.82);
  color:#ffdf61;font:11px/1.4 ui-monospace,Consolas,monospace;
}
.preview-status[hidden]{display:none}

/* ---------- hold reaction: the page is drawn toward the portal ---------- */
body.warping .site-header,
body.warping main,
body.warping .footer{
  will-change:transform;
  transform:var(--warp-matrix,matrix(1,0,0,1,0,0));
  transform-style:flat;
}

/* Keep the button anchored while the surrounding page shakes under pressure.
   Individual translate preserves the approved button's hover/active styles. */
body.warping .portal-stage{
  z-index:9;
  translate:var(--warp-anchor-x,0px) var(--warp-anchor-y,0px);
}
body.warping .portal-help{opacity:calc(1 - var(--warp-veil,0))}

/* Once every viewport corner is inside the opaque mouth, the page no
   longer needs painting or increasingly large transformed raster layers. */
body.wormhole-occluded .site-header,
body.wormhole-occluded main,
body.wormhole-occluded .footer{visibility:hidden}
body.wormhole-occluded .portal-aura{animation-play-state:paused}

/* ---------- closing darkness around the forming aperture ---------- */
#wormholeVignette{
  position:fixed;
  inset:0;
  z-index:21;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  background:
    radial-gradient(circle at var(--warp-cx,50%) var(--warp-cy,50%),
      rgba(4,1,10,0) 0%,
      rgba(4,1,10,0) var(--warp-clear,120px),
      rgba(5,1,12,.94) var(--warp-shadow,340px),
      rgba(2,0,6,.99) 100%);
}
#wormholeVignette.on{visibility:visible}

/* ---------- destination surface (revealed through the exit aperture) ---------- */
#destinationLayer{
  position:fixed;
  inset:0;
  z-index:22;
  display:block;
  visibility:hidden;
  overflow:hidden;
  background:#04030a;
  contain:strict;
  pointer-events:none;
}
#destinationLayer.on{visibility:visible}
#destinationFrame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#04030a;
}
#destinationFallback{
  position:absolute;
  inset:0;
  display:none;
  place-content:center;
  text-align:center;
  color:#f5eef4;
  font:400 clamp(18px,3vw,30px)/1.5 Inter,ui-sans-serif,system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 45%,#150a1c,#04030a 70%);
}
#destinationFallback.on{display:grid}
#destinationFallback b{display:block;font-weight:500;letter-spacing:.02em}
#destinationFallback span{display:block;margin-top:10px;font-size:.55em;letter-spacing:.3em;color:#b9a6b8}

#destinationFlash{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 52%,
      rgba(255,244,252,.90) 0%,
      rgba(255,183,225,.62) 16%,
      rgba(255,64,173,.34) 34%,
      rgba(180,20,110,.14) 54%,
      rgba(60,4,40,0) 74%);
}

/* A sharp arrival impulse, then a quick physical settle. */
#destinationLayer.impact{
  animation:dest-impact var(--arrival-settle,.48s) cubic-bezier(.14,.92,.28,1) both;
}
#destinationLayer.impact #destinationFlash{
  animation:dest-flash .30s cubic-bezier(.1,.8,.3,1) both;
}
@keyframes dest-impact{
  0%   {transform:translate3d(0,0,0) scale(1.10)}
  14%  {transform:translate3d(-9px,6px,0) scale(1.055)}
  30%  {transform:translate3d(7px,-4px,0) scale(1.026)}
  48%  {transform:translate3d(-4px,3px,0) scale(1.012)}
  68%  {transform:translate3d(2px,-1px,0) scale(1.004)}
  100% {transform:translate3d(0,0,0) scale(1)}
}
@keyframes dest-flash{
  0%  {opacity:.78}
  38% {opacity:.24}
  100%{opacity:0}
}

/* Cancel follows the same geometry backwards in site.js; no separate CSS
   transform transition may lag behind the reversing WebGL mouth. */