:root{
  --bg: #000;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: var(--bg);
  color:#fff;
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
}
  display:grid;
  place-items:center;        
}

.photo{
  width:min(66vmin, 720px);
  height:auto;
  display:block;
  border-radius:16px;         
  user-select:none;

  opacity:0;
  transform: translateY(8px) scale(0.995);
  animation:
    fadeUp 600ms ease-out forwards,
    kenburns 16s ease-in-out 400ms infinite alternate;
  will-change: transform, opacity;
}

@keyframes fadeUp{
  to{
    opacity:1;
    transform: translateY(0) scale(1);
  }
}

@keyframes kenburns{
  0%   { transform: translateY(0)   scale(1);     }
  50%  { transform: translateY(-3px) scale(1.015);}
  100% { transform: translateY(-6px) scale(1.03); }
}

.photo:hover{
  animation-play-state: running;
  filter: brightness(1.02);
  transition: filter .25s ease;
}

@media (prefers-reduced-motion: reduce){
  .photo{
    animation: none;
    opacity: 1;
    transform: none;
  }
}