/* Shared motion system. Respect reduced motion and native scrolling. */
:root { --motion-ease: cubic-bezier(.22,1,.36,1); }
.motion-heading.motion-prepared { transition: opacity .6s ease, transform .75s var(--motion-ease); }
.motion-heading.motion-prepared:not(.motion-visible) { opacity: 0; transform: translateY(10px); }
.motion-photography { overflow: hidden; }
.motion-photography.motion-prepared img { transition: opacity .8s ease, transform 1.2s var(--motion-ease); }
.motion-photography.motion-prepared:not(.motion-visible) img { opacity: 0; }
.teaser-image.motion-prepared:not(.motion-visible) img { transform: scale(1.025); }
.statement-images.motion-prepared img:last-child { transition-delay: .12s; }
.motion-card.motion-prepared { transition: opacity .7s ease; }
.motion-card.motion-prepared:not(.motion-visible) { opacity: 0; }
.motion-palette.motion-prepared i { transition: opacity .4s ease, transform .55s var(--motion-ease); }
.motion-palette.motion-prepared i:nth-child(2) { transition-delay: .09s; }
.motion-palette.motion-prepared i:nth-child(3) { transition-delay: .18s; }
.motion-palette.motion-prepared:not(.motion-visible) i { opacity: 0; transform: scale(.8); }
.motion-rule.motion-prepared { transition: border-color .8s ease; }
.motion-rule.motion-prepared:not(.motion-visible) { border-color: transparent; }
.gallery-incoming { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gallery-controls { z-index: 2; }
.thumbnails button { transition: opacity .25s ease, border-color .25s ease; }
/* Dialogs share an entrance and exit; photographs never fly across the page. */
dialog[open] { animation: none; }
dialog[open]::backdrop { animation: veil-in .32s ease both; backdrop-filter: blur(8px) saturate(.8); }
dialog[data-closing]::backdrop { animation: veil-out .22s ease both; }
dialog[data-closing] { pointer-events: none; }
@keyframes veil-in { from { background-color: #13221700; } to { background-color: #132217ae; } }
@keyframes veil-out { from { background-color: #132217ae; } to { background-color: #13221700; } }
.menu-dialog[open] nav a { animation: menu-item-in .42s var(--motion-ease) both; }
.menu-dialog[open] nav a:nth-child(2) { animation-delay: .035s; }
.menu-dialog[open] nav a:nth-child(3) { animation-delay: .07s; }
.menu-dialog[open] nav a:nth-child(4) { animation-delay: .105s; }
.menu-dialog[open] nav a:nth-child(5) { animation-delay: .14s; }
.menu-dialog[open] nav a:nth-child(6) { animation-delay: .175s; }
@keyframes menu-item-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Reserve a portrait-shaped space even when Instagram fails to initialise. */
.reel-frame { aspect-ratio: 9 / 17; }
.reel-frame.reel-ready { aspect-ratio: auto; }
.reel-frame > .reel-fallback { position: absolute; inset: 10px; aspect-ratio: auto; z-index: 2; }
.reel-frame > .reel-fallback[hidden] { display: none; }
.reel-player { position: relative; }
.reel-player blockquote { visibility: hidden; }
.reel-frame:not(.reel-ready) .reel-player { position: absolute; inset: 10px; pointer-events: none; }
.reel-frame.reel-ready iframe { visibility: visible !important; }
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .statement-images.motion-prepared:not(.motion-visible) img:last-child { transform: translateY(12px); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .tile-image:hover img { transform: scale(1.02); }
  .tile-image:hover .tile-open { transform: none; }
  .tile-open, .round, .contact-option, .close { transition: background-color .25s ease, color .25s ease; }
  .contact-option:hover { color: var(--moss); }
}
@media (hover: none) {
  .tile-image:hover img, .tile-image:hover .tile-open { transform: none; }
}
@media (max-width: 760px) {
  .album-prepared .album-image img { transition-duration: .55s, .85s; }
  .album-prepared:not(.album-open) .album-image img { transform: scale(1.02); }
  .motion-heading.motion-prepared:not(.motion-visible) { transform: translateY(6px); }
  .motion-heading.motion-prepared { transition-duration: .5s; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-prepared, .motion-prepared:not(.motion-visible),
  .motion-prepared img, .motion-prepared:not(.motion-visible) img,
  .motion-prepared i, .motion-prepared:not(.motion-visible) i {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .album-prepared:not(.album-open) .album-image img { transform: none; opacity: 1; }
  .tile-image:hover img, .tile-image:hover .tile-open { transform: none; }
  dialog[open]::backdrop { animation: none; }
}