/* The portal's shared pieces (see portal.js). Each page places the seal,
   the emerald logo and the rain itself; this is only what every page has
   in common: the breathing core, the burst layer, the flash. */
html.sealed{overflow:hidden}
.p-core{position:absolute;width:min(150px,22vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:0;background:none;cursor:pointer;padding:0;z-index:2}
.p-core span{position:absolute;inset:30%;border-radius:50%;background:radial-gradient(circle,#F2FFF6 0%,#7CFFAE 22%,rgba(95,224,142,.35) 48%,transparent 70%);
  mix-blend-mode:screen;animation:p-breathe 2.2s ease-in-out infinite}
.p-core::before,.p-core::after{content:"";position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(124,255,174,.55);animation:p-ring 2.2s ease-out infinite}
.p-core::after{animation-delay:1.1s}
.p-core:hover span{animation-duration:.9s}
@keyframes p-breathe{50%{transform:scale(1.35);opacity:.75}}
@keyframes p-ring{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.charging .p-core span{animation:p-charge .45s ease-in forwards}
@keyframes p-charge{to{transform:scale(3.2);opacity:1;filter:brightness(1.6)}}
@keyframes p-shake{20%{transform:translate(2px,-1px)}40%{transform:translate(-2px,1px)}60%{transform:translate(3px,1px)}80%{transform:translate(-1px,-2px)}}
/* open: the core is still there, quiet, as the way back */
.opened .p-core span,.opened .p-core::before,.opened .p-core::after{animation:none;opacity:0}
.p-burst{position:fixed;inset:0;width:100%;height:100%;z-index:40;pointer-events:none;display:none}
.p-flash{position:fixed;inset:0;z-index:39;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--fx,50%) var(--fy,40%),#fff 0%,rgba(190,255,215,.9) 12%,rgba(95,224,142,.45) 34%,rgba(4,8,5,0) 70%)}
.p-flash.go{animation:p-flash .9s ease-out}
.p-flash.soft{background:radial-gradient(circle at var(--fx,50%) var(--fy,40%),rgba(255,240,210,.9) 0%,rgba(217,174,114,.4) 14%,rgba(4,8,5,0) 46%)}
@keyframes p-flash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
/* the emerald logo coming in, and going back into the diamond */
@keyframes p-emerge{
  0%{opacity:0;transform:scale(.55);filter:blur(14px) brightness(3)}
  35%{opacity:1;transform:scale(1.04);filter:blur(0) brightness(1.6)}
  42%{transform:translateX(-6px) scale(1.02);filter:hue-rotate(40deg) brightness(1.8)}
  48%{transform:translateX(5px) scale(1.01);filter:none}
  54%{transform:translateX(-2px)}
  100%{opacity:1;transform:none}}
@keyframes p-hum{50%{filter:drop-shadow(0 0 30px rgba(95,224,142,.5)) brightness(1.1)}}
@media print{.p-burst,.p-flash{display:none!important}}