/* Wandering memory portal — deliberately separate from the main space artwork. */
body:not(.archive-page) .time-portal{
  position:fixed;
  top:0;
  left:0;
  width:auto;
  max-width:min(360px,82vw);
  margin:0;
  padding:10px 14px;
  gap:10px;
  z-index:20;
  background:transparent;
  border:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  animation:memoryWander 44s ease-in-out infinite alternate;
}
body:not(.archive-page) .time-portal .portal-orbit{width:44px;height:44px;flex-basis:44px}
body:not(.archive-page) .time-portal .portal-copy{
  opacity:0;
  visibility:hidden;
  transform:translateX(-8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}
body:not(.archive-page) .time-portal .portal-copy strong{font-size:9px;white-space:nowrap}
body:not(.archive-page) .time-portal .portal-copy span{font-size:12px;white-space:nowrap}
body:not(.archive-page) .time-portal:hover,
body:not(.archive-page) .time-portal:focus-visible{animation-play-state:paused;background:transparent}
body:not(.archive-page) .time-portal:hover .portal-copy,
body:not(.archive-page) .time-portal:focus-visible .portal-copy{opacity:1;visibility:visible;transform:translateX(0)}

@keyframes memoryWander{
  0%{transform:translate3d(5vw,12vh,0) rotate(-1deg)}
  16%{transform:translate3d(61vw,21vh,0) rotate(1deg)}
  33%{transform:translate3d(68vw,67vh,0) rotate(-1deg)}
  50%{transform:translate3d(12vw,73vh,0) rotate(1deg)}
  67%{transform:translate3d(32vw,43vh,0) rotate(-1deg)}
  84%{transform:translate3d(63vw,8vh,0) rotate(1deg)}
  100%{transform:translate3d(7vw,55vh,0) rotate(0)}
}

/* Elegant gravitational-lensing transition: bright lens, small horizon, no giant black disk. */
.wormhole-transition{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint style;
}
.space-veil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at var(--worm-x) var(--worm-y),rgba(231,223,245,.16),transparent 28%),
    linear-gradient(180deg,rgba(20,15,29,0),rgba(17,12,24,.70));
  opacity:0;
  animation:veilIn 1.18s ease forwards;
}
.warp-stars{
  position:absolute;
  inset:-12vmax;
  opacity:0;
  background:
    repeating-conic-gradient(
      from 0deg at var(--worm-x) var(--worm-y),
      transparent 0deg 7.5deg,
      rgba(244,239,250,.0) 7.5deg 8deg,
      rgba(229,218,241,.34) 8.15deg 8.45deg,
      transparent 8.8deg 17deg
    );
  -webkit-mask-image:radial-gradient(circle at var(--worm-x) var(--worm-y),transparent 0 7%,#000 18%,#000 62%,transparent 88%);
  mask-image:radial-gradient(circle at var(--worm-x) var(--worm-y),transparent 0 7%,#000 18%,#000 62%,transparent 88%);
  transform-origin:var(--worm-x) var(--worm-y);
  animation:starsRush 1.06s .08s cubic-bezier(.2,.68,.18,1) forwards;
}
.wormhole-glow,
.event-horizon,
.accretion-halo,
.accretion-line,
.wormhole-flash{
  position:absolute;
  left:var(--worm-x);
  top:var(--worm-y);
  transform:translate(-50%,-50%);
  will-change:transform,opacity;
}
.wormhole-glow{
  width:84px;
  height:84px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(255,255,255,.96) 0 3%,
    rgba(245,238,251,.88) 8%,
    rgba(183,156,204,.34) 30%,
    rgba(183,156,204,.08) 52%,
    transparent 70%);
  filter:blur(.2px);
  animation:glowBloom 1.1s cubic-bezier(.18,.74,.2,1) forwards;
}
.event-horizon{
  width:34px;
  height:34px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#0a0810 0 15%,#020204 58%,#000 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 16px rgba(183,156,204,.35),
    0 0 34px rgba(226,214,239,.18);
  animation:horizonLens 1.08s cubic-bezier(.16,.7,.2,1) forwards;
}
.accretion-halo{
  border-radius:50%;
  background:transparent;
}
.halo-back{
  width:104px;
  height:42px;
  border:2px solid rgba(223,209,238,.72);
  box-shadow:0 0 12px rgba(183,156,204,.45),inset 0 0 12px rgba(255,255,255,.12);
  transform:translate(-50%,-50%) rotate(-16deg);
  animation:haloBack 1.08s cubic-bezier(.18,.7,.18,1) forwards;
}
.halo-front{
  width:88px;
  height:24px;
  border-top:3px solid rgba(255,248,239,.98);
  border-bottom:1px solid rgba(183,156,204,.48);
  box-shadow:0 -2px 12px rgba(255,248,239,.64),0 3px 16px rgba(183,156,204,.28);
  transform:translate(-50%,-50%) rotate(8deg);
  animation:haloFront 1.04s cubic-bezier(.18,.72,.18,1) forwards;
}
.accretion-line{
  width:116px;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(222,207,237,.42),rgba(255,250,244,.98),rgba(222,207,237,.42),transparent);
  box-shadow:0 0 12px rgba(255,245,233,.56);
  transform:translate(-50%,-50%) rotate(-5deg);
  opacity:.8;
  animation:lineStretch 1s .04s ease-out forwards;
}
.wormhole-flash{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 22px #fff,0 0 54px rgba(231,223,245,.96),0 0 110px rgba(183,156,204,.56);
  opacity:0;
  animation:flashThrough .7s .48s ease-out forwards;
}

body.wormhole-traveling .wrap{
  transform-origin:var(--worm-x) var(--worm-y);
  animation:pageLensPull 1.16s cubic-bezier(.24,.02,.38,1) forwards;
  will-change:transform,opacity;
}

.to-present .space-veil{animation:veilOut 1s ease forwards}
.to-present .warp-stars{animation:starsReturn .9s ease-out forwards}
.to-present .wormhole-glow{animation:glowReturn .95s ease-out forwards}
.to-present .event-horizon{animation:horizonReturn .95s ease-out forwards}
.to-present .halo-back{animation:haloBackReturn .95s ease-out forwards}
.to-present .halo-front{animation:haloFrontReturn .95s ease-out forwards}
.to-present .accretion-line{animation:lineReturn .85s ease-out forwards}
.to-present .wormhole-flash{animation:flashReturn .6s .18s ease-out forwards}

@keyframes veilIn{0%{opacity:0}58%{opacity:.38}100%{opacity:.82}}
@keyframes starsRush{0%{opacity:0;transform:scale(.72) rotate(0)}35%{opacity:.32}100%{opacity:.72;transform:scale(1.28) rotate(7deg)}}
@keyframes glowBloom{0%{opacity:.25;transform:translate(-50%,-50%) scale(.45)}42%{opacity:1}100%{opacity:.62;transform:translate(-50%,-50%) scale(6.2)}}
@keyframes horizonLens{0%{transform:translate(-50%,-50%) scale(.5);opacity:.72}48%{opacity:1}100%{transform:translate(-50%,-50%) scale(4.2);opacity:.96}}
@keyframes haloBack{0%{transform:translate(-50%,-50%) rotate(-16deg) scale(.42);opacity:.2}34%{opacity:.96}100%{transform:translate(-50%,-50%) rotate(18deg) scale(5.8);opacity:0}}
@keyframes haloFront{0%{transform:translate(-50%,-50%) rotate(8deg) scale(.4);opacity:.2}38%{opacity:1}100%{transform:translate(-50%,-50%) rotate(-11deg) scale(6.3);opacity:0}}
@keyframes lineStretch{0%{transform:translate(-50%,-50%) rotate(-5deg) scaleX(.4);opacity:.2}45%{opacity:1}100%{transform:translate(-50%,-50%) rotate(3deg) scaleX(8);opacity:0}}
@keyframes flashThrough{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(34)}}
@keyframes pageLensPull{0%{transform:scale(1);opacity:1}46%{transform:scale(1.018);opacity:.96}100%{transform:scale(.90);opacity:0}}

@keyframes veilOut{0%{opacity:.80}100%{opacity:0}}
@keyframes starsReturn{0%{opacity:.58;transform:scale(1.22) rotate(6deg)}100%{opacity:0;transform:scale(.78) rotate(0)}}
@keyframes glowReturn{0%{opacity:.58;transform:translate(-50%,-50%) scale(5.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(.5)}}
@keyframes horizonReturn{0%{transform:translate(-50%,-50%) scale(4);opacity:.92}100%{transform:translate(-50%,-50%) scale(.45);opacity:0}}
@keyframes haloBackReturn{0%{transform:translate(-50%,-50%) rotate(18deg) scale(5.6);opacity:0}55%{opacity:.82}100%{transform:translate(-50%,-50%) rotate(-16deg) scale(.42);opacity:0}}
@keyframes haloFrontReturn{0%{transform:translate(-50%,-50%) rotate(-11deg) scale(6);opacity:0}58%{opacity:.92}100%{transform:translate(-50%,-50%) rotate(8deg) scale(.4);opacity:0}}
@keyframes lineReturn{0%{transform:translate(-50%,-50%) rotate(3deg) scaleX(7);opacity:0}48%{opacity:.92}100%{transform:translate(-50%,-50%) rotate(-5deg) scaleX(.4);opacity:0}}
@keyframes flashReturn{0%{opacity:0;transform:translate(-50%,-50%) scale(22)}48%{opacity:.9}100%{opacity:0;transform:translate(-50%,-50%) scale(.5)}}

@media(max-width:700px){
  body:not(.archive-page) .time-portal{
    max-width:230px;
    padding:8px 10px;
    background:transparent;
    border:0;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    animation-name:memoryWanderMobile;
    animation-duration:38s;
  }
  body:not(.archive-page) .time-portal .portal-orbit{width:36px;height:36px;flex-basis:36px}
  body:not(.archive-page) .time-portal .portal-copy{position:absolute;left:42px;top:50%;transform:translate(-8px,-50%);pointer-events:none}
  body:not(.archive-page) .time-portal .portal-copy strong{font-size:7.5px;letter-spacing:.12em}
  body:not(.archive-page) .time-portal .portal-copy span{font-size:10px}
  body:not(.archive-page) .time-portal:active .portal-copy,
  body:not(.archive-page) .time-portal:focus .portal-copy{opacity:1;visibility:visible;transform:translate(0,-50%)}

  /* Mobile keeps the lens compact so it never becomes a giant black circle. */
  .wormhole-glow{width:72px;height:72px}
  .event-horizon{width:28px;height:28px}
  .halo-back{width:88px;height:34px}
  .halo-front{width:72px;height:20px}
  .accretion-line{width:92px;height:3px}
  .warp-stars{inset:-8vmax}
  @keyframes horizonLens{0%{transform:translate(-50%,-50%) scale(.5);opacity:.72}48%{opacity:1}100%{transform:translate(-50%,-50%) scale(3.1);opacity:.9}}
  @keyframes glowBloom{0%{opacity:.25;transform:translate(-50%,-50%) scale(.45)}42%{opacity:1}100%{opacity:.58;transform:translate(-50%,-50%) scale(4.8)}}
  @keyframes haloBack{0%{transform:translate(-50%,-50%) rotate(-16deg) scale(.42);opacity:.2}34%{opacity:.96}100%{transform:translate(-50%,-50%) rotate(16deg) scale(4.6);opacity:0}}
  @keyframes haloFront{0%{transform:translate(-50%,-50%) rotate(8deg) scale(.4);opacity:.2}38%{opacity:1}100%{transform:translate(-50%,-50%) rotate(-9deg) scale(5);opacity:0}}
  @keyframes lineStretch{0%{transform:translate(-50%,-50%) rotate(-5deg) scaleX(.4);opacity:.2}45%{opacity:1}100%{transform:translate(-50%,-50%) rotate(2deg) scaleX(5.6);opacity:0}}

  @keyframes memoryWanderMobile{
    0%{transform:translate3d(4vw,10vh,0)}
    18%{transform:translate3d(39vw,24vh,0)}
    36%{transform:translate3d(31vw,70vh,0)}
    54%{transform:translate3d(3vw,61vh,0)}
    72%{transform:translate3d(34vw,42vh,0)}
    88%{transform:translate3d(38vw,8vh,0)}
    100%{transform:translate3d(5vw,45vh,0)}
  }
}

@media(prefers-reduced-motion:reduce){
  body:not(.archive-page) .time-portal{animation:none;transform:translate3d(5vw,14vh,0)}
  .wormhole-transition{display:none}
  body.wormhole-traveling .wrap{animation:none}
}