#portal{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    pointer-events:none;
    opacity:0;
    transition:opacity .35s ease;
    z-index:999;
}

#portal::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 54% 48%,
      rgba(0,0,0,.06) 0%,
      rgba(0,0,0,.18) 38%,
      rgba(0,0,0,.48) 100%
    );
  opacity: 0;
  transition: opacity 900ms var(--ease-gallery, ease);
}

#portal-image{

   position: fixed;
  object-fit: contain;
  image-rendering: auto;
  object-position: center;
  opacity: 0.015;

  filter:
        blur(24px)
        brightness(.45);

    transform:
        scale(.985);

  transition:
    left 1400ms var(--ease-gallery),

        top 1400ms var(--ease-gallery),

        width 1400ms var(--ease-gallery),

        height 1400ms var(--ease-gallery),

        opacity 700ms ease,

        filter 1400ms var(--ease-gallery),

        transform 1400ms var(--ease-gallery);
}

body.portal-preview #portal::before
body.portal-opening #portal::before{
    opacity:1;

}

body.portal-awakening #portal-image {
  object-fit: contain;
  padding: 36vh 36vw;
  filter: brightness(1.25) contrast(1.08);
}

body.portal-preview #portal::before{

    opacity:1;

}

body.portal-preview #portal-image{

    opacity:.82;
    filter:
        blur(0px)
        brightness(.92);

    transform:
        scale(1.008);

}

body.portal-opening #portal{

    opacity:1;

}

body.portal-opening #portal-image{

    width:100vw;

    height:100vh;

    aspect-ratio:auto;


}
#portal-image.portal-held {
  filter: brightness(0.58);
}
.room-layer,
.light-layer,
.grain-layer,
.vignette-layer {
  transition:
    opacity 1800ms cubic-bezier(.22,.61,.36,1),
    filter 1800ms cubic-bezier(.22,.61,.36,1);
}

body.portal-preview .room-layer,
body.portal-opening .room-layer {
  opacity: 0.30;
  filter: saturate(0.62) contrast(1.04) brightness(0.48);
}

body.portal-preview .light-layer,
body.portal-opening .light-layer {
  opacity: 0.035;
}

body.portal-preview .grain-layer,
body.portal-opening .grain-layer {
  opacity: 0.055;
}

body.portal-preview .vignette-layer,
body.portal-opening .vignette-layer {
  opacity: 1;
}
.portal-link{

    transition:

        color 900ms var(--ease-gallery),

        letter-spacing 900ms var(--ease-gallery),

        text-shadow 900ms var(--ease-gallery);

}

body.portal-preview .portal-link:hover{
    opacity:0.92;
    blur:0;
    color:

        rgba(255,255,255,.98);

    text-shadow:

        0 0 22px rgba(255,255,255,.18);

}
body.portal-film #portal-image {
  filter: blur(2px) brightness(.92) sepia(.08) saturate(.9);
}

body.portal-photography #portal-image {
  filter: blur(0) brightness(.98) contrast(1.08) saturate(.9);
}

body.portal-objects #portal-image {
  filter: blur(1px) brightness(.82) contrast(1.12) saturate(.78);
}

body.portal-studio #portal-image {
  filter: blur(5px) brightness(.86) contrast(.96) saturate(.72);
}
#portal-image {
  animation: portalRest 9s var(--ease-gallery, ease) infinite alternate;
}

body.portal-preview #portal-image,
body.portal-opening #portal-image {
  animation: none;
}

body.portal-opening-awakening #portal-image {
  opacity: 0 !important;
}

body.portal-opening-awakening #portal-logo {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

@keyframes portalRest {
  from {
    transform: scale(0.992);
  }

  to {
    transform: scale(1.01);
  }
}