:root {
  --forge-motion-fast: 110ms;
  --forge-motion-base: 220ms;
  --forge-motion-panel: 280ms;
  --forge-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Motion is enabled only after initForgeMotion() runs. Content stays visible if JS fails. */
html.forge-motion-ready:not(.forge-reduce-motion) .forge-reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity var(--forge-motion-base) var(--forge-motion-ease),
    transform var(--forge-motion-base) var(--forge-motion-ease);
}

html.forge-motion-ready:not(.forge-reduce-motion) .forge-reveal.forge-reveal-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.forge-motion-ready:not(.forge-reduce-motion) .forge-reveal[data-forge-reveal="card"] {
  transform: translate3d(0, 10px, 0) scale(.992);
}

html.forge-motion-ready:not(.forge-reduce-motion) .forge-reveal-visible[data-forge-reveal="card"] {
  transform: translate3d(0, 0, 0) scale(1);
}

.forge-pressable {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform var(--forge-motion-fast) ease,
    filter var(--forge-motion-fast) ease,
    box-shadow var(--forge-motion-base) ease;
}

.forge-pressable.forge-pressing {
  transform: scale(.975);
  filter: brightness(1.045);
}

.forge-motion-focus {
  box-shadow: 0 0 0 1px rgb(216 255 62 / 24%), 0 12px 34px rgb(216 255 62 / 12%);
}

#lightboxImg {
  backface-visibility: hidden;
  contain: layout paint style;
  transform-origin: center;
  will-change: transform, opacity;
}

#lightboxImg.forge-media-loading {
  opacity: .76;
}

#lightboxImg.forge-pointer-dragging {
  cursor: grabbing;
  transition: none !important;
  user-select: none;
}

#lightboxImg.forge-media-ready:not(.forge-pointer-dragging) {
  transition: opacity 180ms var(--forge-motion-ease);
}

.sheet:not(.hidden) > .sheet-card,
.side-panel:not(.hidden) > aside,
.modal:not(.hidden) > .modal-card,
.modal:not(.hidden) > .modal-content,
.pwa-install-backdrop .pwa-install-sheet {
  transform: translateZ(0);
}

html:not(.forge-reduce-motion) .sheet:not(.hidden) > .sheet-card,
html:not(.forge-reduce-motion) .pwa-install-backdrop .pwa-install-sheet {
  animation: forge-panel-enter var(--forge-motion-panel) var(--forge-motion-ease) both;
}

@keyframes forge-panel-enter {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.992);
  }
}

@media (hover: hover) and (pointer: fine) {
  .professional-album-card,
  .album-folder,
  .event-card,
  .photo {
    transition:
      transform var(--forge-motion-base) var(--forge-motion-ease),
      border-color var(--forge-motion-base) ease,
      box-shadow var(--forge-motion-base) ease;
  }

  .professional-album-card:hover,
  .album-folder:hover,
  .event-card:hover,
  .photo:hover {
    transform: translate3d(0, -2px, 0);
    border-color: rgb(216 255 62 / 25%);
    box-shadow: 0 18px 46px rgb(0 0 0 / 48%), 0 0 24px rgb(216 255 62 / 7%);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --forge-motion-fast: .01ms;
    --forge-motion-base: .01ms;
    --forge-motion-panel: .01ms;
  }

  .forge-reveal,
  .forge-pressable,
  #lightboxImg,
  .sheet:not(.hidden) > .sheet-card,
  .pwa-install-backdrop .pwa-install-sheet {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}