/* Light belongs to the existing glass and room, rather than a floating backdrop. */
.em-stage-light {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  --em-stage-x: 0px;
  --em-stage-y: 0px;
}
.em-stage-light::before {
  content: '';
  position: absolute;
  inset: 0 0 0 64%;
  background: linear-gradient(108deg, transparent 5%, #e3ecff0b 33%, #d9e8ff24 66%, transparent 96%);
  transform: translate(var(--em-stage-x), var(--em-stage-y));
  opacity: .35;
  animation: em-room-breath 13s ease-in-out infinite;
  animation-play-state: paused;
}
.em-glass-light {
  position: absolute;
  left: 69.9%;
  top: 5.5%;
  width: 19.6%;
  height: 68.9%;
  overflow: hidden;
  clip-path: polygon(0 14.2%,96% 0,100% 100%,1.5% 96%);
}
.em-glass-light::after {
  content: '';
  position: absolute;
  inset: -20% -45%;
  background: linear-gradient(100deg, transparent 24%, #dce8ff05 38%, #eaf2ff27 49%, #ecf4ff0d 57%, transparent 71%);
  transform: translateX(-72%) skewX(-9deg);
  animation: em-glass-passage 11s cubic-bezier(.4,0,.4,1) infinite;
  animation-play-state: paused;
}
.em-glass-edge {
  position: absolute;
  left: 69.9%;
  top: 15.3%;
  width: 1px;
  height: 59.1%;
  background: linear-gradient(transparent, #d9e7ff8c 24%, #edf5ffa3 53%, transparent 96%);
  opacity: .42;
  animation: em-edge-breath 6.8s ease-in-out infinite;
  animation-play-state: paused;
}
.em-stage-live .em-stage-light::before,
.em-stage-live .em-glass-light::after,
.em-stage-live .em-glass-edge { animation-play-state: running; }

@keyframes em-room-breath {
  0%,100% { opacity: .2; }
  50% { opacity: .74; }
}
@keyframes em-glass-passage {
  0%,8% { transform: translateX(-72%) skewX(-9deg); opacity: 0; }
  24% { opacity: .8; }
  60% { opacity: .7; }
  80%,100% { transform: translateX(70%) skewX(-9deg); opacity: 0; }
}
@keyframes em-edge-breath {
  0%,100% { opacity: .22; }
  50% { opacity: .72; }
}

/* A single material pass reveals a work; the image itself is never distorted. */
.em-image .em-image-treatment > .em-work-sweep {
  display: block;
  position: absolute;
  inset: -10% -10%;
  width: auto;
  height: auto;
  background: linear-gradient(102deg, transparent 14%, #ffffff05 32%, #ffffff38 46%, #ffffff10 55%, transparent 73%);
  transform: translateX(-125%) skewX(-13deg);
  opacity: 0;
  pointer-events: none;
}
.em-image.em-card-current .em-work-sweep {
  animation: em-work-reflection 13s cubic-bezier(.4,0,.4,1) infinite;
  animation-play-state: paused;
}
.em-motion-running .em-image.em-card-current .em-work-sweep { animation-play-state: running; }
.archive-sheet:nth-child(2) .em-work-sweep { animation-delay: 1.1s; }
.archive-sheet:nth-child(3) .em-work-sweep { animation-delay: 2.2s; }
@keyframes em-work-reflection {
  0%,31% { transform: translateX(-125%) skewX(-13deg); opacity: 0; }
  43% { opacity: .6; }
  61%,100% { transform: translateX(145%) skewX(-13deg); opacity: 0; }
}
.feature-index { position: relative; }
.feature-index > .em-chapter-rule {
  position: absolute;
  display: block;
  left: 0;
  bottom: -17px;
  width: min(128px, 44%);
  height: 1px;
  background: linear-gradient(90deg, #4264f5 0 22%, #10121623 22% 100%);
  transform-origin: left;
  pointer-events: none;
}

/* Small directional responses are confined to the icon and surface of an action. */
.em-action { position: relative; }
.em-action::after {
  content: '';
  position: absolute;
  inset: -3px -8px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at var(--em-action-x,50%) var(--em-action-y,50%), #a8c5ff26, transparent 72%);
  transition: opacity 350ms ease;
}
.em-action.em-action-active::after { opacity: 1; }
.em-action.text-link > span:last-child,
.em-action.menu-button > .menu-symbol {
  translate: var(--em-pull-x,0px) var(--em-pull-y,0px);
  transition: translate 350ms cubic-bezier(.18,.75,.18,1), transform 400ms;
}
.em-action.text-link::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 600ms cubic-bezier(.18,.75,.18,1);
  pointer-events: none;
}
.em-action.text-link.em-action-active::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* The final scene signs off with the author's own lettering, then settles. */
.em-contact-signature {
  position: absolute;
  right: 14%;
  bottom: 10px;
  width: 122px;
  height: 67px;
  pointer-events: none;
  color: #b4c3d7;
}
.em-contact-signature img {
  display: block;
  width: 98px;
  height: 44px;
  object-fit: contain;
  opacity: .88;
}
.em-contact-signature svg {
  display: block;
  width: 122px;
  height: 18px;
  margin-top: -5px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  opacity: .6;
  animation: em-signature-breath 7s ease-in-out infinite;
  animation-play-state: paused;
}
.em-contact-signature path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.em-motion-running .em-contact-signature.em-contact-visible svg { animation-play-state: running; }
@keyframes em-signature-breath { 0%,100% { opacity: .35; } 50% { opacity: .8; } }

@media(max-width:600px) {
  .em-glass-light::after { animation-duration: 14s; }
  .em-stage-light::before { display: none; }
  .feature-index > .em-chapter-rule { bottom: -9px; width: 82px; }
  .em-contact-signature { right: 3%; bottom: 4px; width: 96px; height: 56px; }
  .em-contact-signature img { width: 80px; height: 36px; }
  .em-contact-signature svg { width: 96px; height: 15px; }
}
@media(max-height:500px) and (min-aspect-ratio:4/3) {
  .em-contact-signature { width: 88px; height: 48px; right: 2%; bottom: 5px; }
  .em-contact-signature img { width: 74px; height: 33px; }
  .em-contact-signature svg { width: 88px; height: 13px; }
  .feature-index > .em-chapter-rule { bottom: -8px; }
}
@media(hover:none),(pointer:coarse) {
  .em-action::before,.em-action::after { display: none; }
  .em-action.text-link > span:last-child,.em-action.menu-button > .menu-symbol { translate: none; }
  /* Work entry still has a material pass on touch, without the hover cursor. */
  .em-image > .em-image-treatment { display: block !important; }
  .em-image-treatment > .em-image-sheen,.em-image-treatment > .em-view-cursor { display: none !important; }
}
body.reduce-motion .em-stage-light,
body.reduce-motion .em-contact-signature,
body.reduce-motion .em-chapter-rule,
body.reduce-motion .em-image > .em-image-treatment,
body.reduce-motion .em-action::before,
body.reduce-motion .em-action::after { display: none !important; }
@media(prefers-reduced-motion:reduce) {
  .em-stage-light,.em-contact-signature,.em-chapter-rule,
  .em-image > .em-image-treatment,.em-action::before,.em-action::after { display: none !important; }
}