/* Living portraits, scoped to the photo atlas entrance. */
.ff-map-window {
  --portrait-ratio: 4 / 5;
  position: relative;
  display: block;
  aspect-ratio: var(--portrait-ratio);
  overflow: hidden;
  isolation: isolate;
  background: #d8d5c9;
  transform: perspective(650px) rotateX(var(--portrait-tilt-y, 0deg)) rotateY(var(--portrait-tilt-x, 0deg));
  transition: transform .45s ease, box-shadow .45s ease;
  box-shadow: inset 0 0 0 1px #4b493320;
}
.ff-map-photo.two .ff-map-window,
.ff-map-photo.three .ff-map-window { --portrait-ratio: 4 / 3; }
.ff-map-scene {
  position: absolute;
  inset: 0;
  transform-origin: var(--portrait-origin, 50% 60%);
  animation: ffLivingPortrait var(--portrait-duration, 6.8s) var(--portrait-phase, 0s) ease-in-out infinite;
}
.ff-map-photo .ff-map-window img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  opacity: 1;
  filter: saturate(.95) contrast(1.035);
  animation: none;
  transform: translate3d(var(--portrait-look-x, 0px), var(--portrait-look-y, 0px), 0) scale(1.08);
  transition: transform .45s ease-out;
}
.ff-map-window::before,
.ff-map-window::after,
.ff-map-light,
.ff-map-dust { position: absolute; pointer-events: none; }
.ff-map-window::before {
  content: '';
  inset: 0;
  z-index: 2;
  opacity: .22;
  background: repeating-linear-gradient(0deg, transparent 0 2px, #fff4db13 2px 3px),
    repeating-linear-gradient(90deg, transparent 0 3px, #4337140c 3px 4px);
  mix-blend-mode: soft-light;
}
.ff-map-window::after {
  content: '';
  inset: -1px;
  z-index: 3;
  background: radial-gradient(ellipse at 50% 38%, transparent 25%, #3b2d1630 100%);
  box-shadow: inset 0 0 14px #3028132e;
}
.ff-map-light {
  inset: -35%;
  z-index: 1;
  opacity: .35;
  mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 30%, #ffe1a14d 40%, #fff8e5a6 48%, #efbd6380 55%, transparent 68%);
  transform: translateX(-20%) rotate(-8deg);
  animation: ffPortraitLight var(--portrait-light-duration, 5.8s) var(--portrait-phase, 0s) ease-in-out infinite;
}
.ff-map-dust {
  inset: 0;
  z-index: 4;
  opacity: .5;
  background-image: radial-gradient(circle at 14% 27%, #fff8ded9 0 1.4px, transparent 2.6px),
    radial-gradient(circle at 73% 63%, #fff5d7d9 0 1.3px, transparent 2.4px),
    radial-gradient(circle at 38% 83%, #fff1c9c0 0 1.1px, transparent 2.1px),
    radial-gradient(circle at 89% 15%, #ffe8b9d0 0 1.2px, transparent 2.2px);
  animation: ffPortraitMotes 4.8s var(--portrait-phase, 0s) ease-in-out infinite;
}
.ff-map-photo.one { --portrait-duration: 6s; --portrait-phase: -1.4s; --portrait-origin: 52% 42%; }
.ff-map-photo.two { --portrait-duration: 7.2s; --portrait-phase: -4.4s; --portrait-origin: 50% 48%; --portrait-light-duration: 5.4s; }
.ff-map-photo.three { --portrait-duration: 6.6s; --portrait-phase: -2.8s; --portrait-origin: 48% 60%; --portrait-light-duration: 6.2s; }
.ff-map-photo.four { --portrait-duration: 7.6s; --portrait-phase: -5.2s; --portrait-origin: 50% 75%; --portrait-light-duration: 5.8s; }
.ff-welcome[data-portraits-paused] .ff-map-scene,
.ff-welcome[data-portraits-paused] .ff-map-light,
.ff-welcome[data-portraits-paused] .ff-map-dust,
.ff-welcome-leaving .ff-map-scene,
.ff-welcome-leaving .ff-map-light,
.ff-welcome-leaving .ff-map-dust { animation-play-state: paused; }
@keyframes ffLivingPortrait {
  0%, 100% { transform: translate3d(-4.5%, 2.5%, 0) scale(1.24) rotate(-1deg); }
  50% { transform: translate3d(4.5%, -2.5%, 0) scale(1.42) rotate(1deg); }
}
@keyframes ffPortraitLight {
  0%, 100% { transform: translateX(-45%) rotate(-12deg); opacity: .15; }
  50% { transform: translateX(45%) rotate(12deg); opacity: .68; }
}
@keyframes ffPortraitMotes {
  0%, 100% { transform: translate3d(-6px, 10px, 0); opacity: .2; }
  50% { transform: translate3d(7px, -13px, 0); opacity: .9; }
}
@media (max-width: 600px) {
  .ff-map-photo { opacity: .94; }
}

/* Individual portrait focus and one genuine moving memory. */
.ff-map-photos { z-index: 4; }
.ff-map-photo { pointer-events: auto; scale: 1; transition: scale .4s ease, box-shadow .4s ease, opacity .4s ease, transform 1.05s cubic-bezier(.3,.7,.2,1); }
.ff-map-photo.is-active { scale: 1.12; z-index: 5; box-shadow: 0 12px 32px #51472b35, 0 0 0 2px #a68e5566, 0 0 25px #d9c58c66; }
.ff-map-photos.has-active .ff-map-photo:not(.is-active) { opacity: .58; }
.ff-map-photos.has-active .ff-map-photo:not(.is-active) .ff-map-scene,
.ff-map-photos.has-active .ff-map-photo:not(.is-active) .ff-map-light,
.ff-map-photos.has-active .ff-map-photo:not(.is-active) .ff-map-dust { animation-play-state: paused; }
.ff-map-portrait-trigger { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 8; border: 0; padding: 0; margin: 0; background: transparent; color: inherit; cursor: pointer; appearance: none; -webkit-tap-highlight-color: transparent; border-radius: 0; }
.ff-map-portrait-trigger:focus-visible { outline: 2px solid #526a48; outline-offset: 4px; }
.ff-map-window video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; display: block; opacity: 0; transition: opacity .35s ease; z-index: 1; }
.ff-map-photo .ff-map-window video { opacity: 1; }
.ff-map-photo.is-live .ff-map-scene { animation-play-state: paused; }
.ff-map-photo.is-live .ff-map-light { animation: none; opacity: .16; }
.ff-map-live-label { position: absolute; top: 7px; left: 7px; z-index: 5; padding: 3px 5px; background: #213526b8; color: #fbf6e9; font: 6px/1.2 'DM Sans',sans-serif; letter-spacing: 1px; border-radius: 2px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.ff-map-photo.is-live .ff-map-live-label { opacity: 1; }
.ff-map-photo.needs-play .ff-map-live-label { opacity: 1; background: #202a23e6; }
@media (max-width: 600px) {
  .ff-map-photo { width: clamp(76px,22vw,96px); opacity: .94; }
  .ff-welcome-enter img { width: 68vw; max-height: 29vh; }
  .ff-map-photo.one { left: 20px; top: 12%; }
  .ff-map-photo.two { right: 20px; top: 13%; width: clamp(84px,25vw,110px); }
  .ff-map-photo.three { left: 20px; bottom: 15%; width: clamp(84px,25vw,110px); }
  .ff-map-photo.four { right: 20px; bottom: 13%; width: clamp(76px,22vw,96px); }
  .ff-map-photo.is-active { scale: 1.1; }
}
@media (max-width: 600px) and (max-height: 680px) {
  .ff-map-photo, .ff-map-photo.one, .ff-map-photo.four { width: 70px; }
  .ff-map-hint { display: none; }
  .ff-map-photo.two, .ff-map-photo.three { display: block; width: 80px; }
  .ff-map-photo.one, .ff-map-photo.two { top: 7%; }
  .ff-map-photo.three, .ff-map-photo.four { bottom: 13%; }
  .ff-map-photo figcaption { font-size: 5px; letter-spacing: .45px; }
  .ff-welcome-enter img { max-height: 24vh; }
  .ff-welcome-enter { gap: 20px; padding: 16px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ff-map-photo.is-active { scale: 1; }
  .ff-map-window video { display: none; }
  .ff-map-photo.is-requested .ff-map-window video { display: block; }
  .ff-map-scene { animation: none !important; transform: scale(1.08); }
  .ff-map-photo .ff-map-window img,
  .ff-map-window { transform: none !important; transition: none !important; }
  .ff-map-light, .ff-map-dust { animation: none !important; opacity: .15; }
}